Cursor Canvas

Cursor Canvas renders a Cursor .canvas.tsx file in the browser and publishes a reusable short URL such as /cursor-canvas/cv_xxxx.

Use it when an agent produces a canvas you want to show teammates, attach to a ticket, or review outside the IDE.

What it does

1. Paste or upload a canvas that imports only from cursor/canvas.
2. Preview it with this site's first-party React renderer (inline SVG charts, SSR).
3. Create a short link. Anyone with the URL can reopen the rendered page.

This is not the Cursor IDE runtime. Layout is close; Agent buttons open Cursor via cursor:// deeplinks when the OS allows it.

Live preview

The snippet below is a real canvas. The same renderer powers the tool.

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>
  );
}

Key features

• Live preview: compile and render in the browser as you paste
• Upload: drop .canvas.tsx, .tsx, .ts, .jsx, or .txt
• Short links: reusable share pages with a view counter
• History: this browser can list and reopen links it created
• Theme: preview follows the site light/dark mode
• Sandbox: only cursor/canvas and React imports are allowed

Use cases

• Share an agent-generated dashboard without sending the raw file
• Review canvas layout before committing it back to a repo
• Teach public cursor/canvas primitives with live examples

Next steps

• Basic usage
• Examples
• Security