Basic Usage

Open the tool

1. Open Cursor Canvas.
2. Provide source in one of three ways:
   • Paste: drop the file contents into the TypeScript editor
   • Upload: drag a file onto the drop zone, or click Choose file
   • Load example: click Load example to fill the gallery canvas
3. Confirm the live preview on the right.
4. Optionally add a title, then click Create short link.
5. Copy the URL and send it. Anyone can reopen the rendered page.

Accepted uploads: .canvas.tsx, .tsx, .ts, .jsx, .txt. Source is capped at 200,000 characters.

What a valid file looks like

The compiler requires a default export and an import from cursor/canvas:

import { H1, Stack, Text } from "cursor/canvas";

export default function Demo() {
  return (
    <Stack gap={16}>
      <H1>Hello</H1>
      <Text>Rendered on WorkerJob.</Text>
    </Stack>
  );
}

import { H1, Stack, Text } from "cursor/canvas";

export default function Hello() {
  return (
    <Stack gap={12}>
      <H1>Hello, Canvas</H1>
      <Text tone="secondary">
        Live preview rendered in the browser from cursor/canvas.
      </Text>
    </Stack>
  );
}

Share and history

• Short links stay reusable; they are not one-time messages.
• The same session user plus the same file MD5 reuses the existing link.
• Published links lists canvases created in this browser so you can load or delete them.

Next steps

• Advanced features
• Examples