Example front-end code:

  <>
    <Text fill style="linear-gradient(purple, red, 150, 50, 0, 0)" size={26} text="Featured files" x={8} y={36} />
    <Link source="@exactchange:text:example" text="Example text link" id="link1" x={0} y={50} width={200} height={24} />
    <Link source="@exactchange:data:example" text="Example data link" id="link2" x={0} y={74} width={200} height={24} />
    <Link source="@exactchange:image:example" text="Example image link" id="link3" x={0} y={98} width={200} height={24} />
    <Link source="@exactchange:image:davinci" text="Davinci drawing link" id="link4" x={0} y={122} width={200} height={24} />
    <Link source="@exactchange:audio:example" text="Example audio link" id="link5" x={0} y={146} width={200} height={24} />
    <Link source="@exactchange:video:example" text="Example video link" id="link6" x={0} y={170} width={200} height={24} />
    <Link source="@exactchange:page:example" text="Example page link" id="link7" x={0} y={194} width={200} height={24} />
    <Link source="@exactchange:app:example" text="Example app link" id="link8" x={0} y={218} width={200} height={24} />
  </>

Add peers to `peers.json`:

  { "@youralias": "https://your.domain/somefolder" }

When a user navigates to @youralias in Medici, the browser knows to look at https://your.domain/somefolder for the following sub-directories:

  /app
  /audio 
  /data 
  /image
  /page
  /text
  /video

JSX-to-Canvas renderer:

- Vasari: JSX interpreter with renderer (based on node-sdl)

- Cross-platform: SDL is based on C and is naturally cross-platform

- JSX is native code in Medici and transpiles to Canvas drawing (not HTML/CSS)

- Supports native 2D and 3D drawing via Canvas2D, WebGL, and/or WebGPU

- Uses the Node.js JavaScript runtime

Stateful example:

  <>
    <Declare boxId="redBox" boxColor="red" />
    <Event id="handleHover">
      console.log('hovering over the box');
    </Event>
    <Event id="handleClick">
      console.log('box click');
    </Event>
    <Event id="onExit">
      process.exit();
    </Event>
    <Text id="heading" fill style="white" text="Click the box!" x={15} y={20} />
    <Rect id="redBox" fill style="${boxColor}" x={0} y={30} width={100} height={100} hover={handleHover} click={handleClick} />
  </>

Great for building app/game launchers, downloaders/installers, peer-to-peer content networks, and more!