Advanced Features

Compilation sandbox

Source is compiled in the browser with Sucrase, then evaluated against a module allowlist:

• Allowed: cursor/canvas, react, react/jsx-runtime, react/jsx-dev-runtime
• Any other import is blocked at compile time
• The file must contain from "cursor/canvas" or from 'cursor/canvas'
• Maximum source length is 200,000 characters

This is a preview sandbox, not a general React bundler. npm packages, CSS files, and local workspace imports will not resolve.

Theme

Preview follows the site light/dark color mode through useHostTheme. Rebuilds when you toggle the theme.

Interactive state

useCanvasState persists control values across rebuilds in the current page. Forms, pills, and toggles keep their values while you edit nearby source.

import { Callout, Grid, H2, Row, Stack, Stat, Text } from "cursor/canvas";

export default function Metrics() {
  return (
    <Stack gap={16}>
      <H2>Release health</H2>
      <Row gap={16} wrap>
        <Stat value="99.2%" label="Uptime" tone="success" />
        <Stat value="142 ms" label="p95 latency" tone="info" />
        <Stat value="3" label="Open incidents" tone="warning" />
      </Row>
      <Grid columns={2} gap={12}>
        <Callout tone="success" title="Deployed">
          canvas-host 1.4.2 is live in all regions.
        </Callout>
        <Callout tone="warning" title="Budget">
          Error budget burn is 18% for the current window.
        </Callout>
      </Grid>
      <Text size="small" tone="tertiary">
        Sample data · not connected to production
      </Text>
    </Stack>
  );
}

Charts, tables, and tasks

This preview implements the public cursor/canvas primitives used in Cursor galleries: layout, typography, cards, callouts, stats, tables, charts, todos, diffs, and DAG helpers.

import { BarChart, H2, PieChart, Stack, Text } from "cursor/canvas";

export default function Charts() {
  return (
    <Stack gap={16}>
      <H2>Traffic mix</H2>
      <BarChart
        categories={["Mon", "Tue", "Wed", "Thu", "Fri"]}
        series={[
          { name: "Accepted", data: [42, 55, 48, 61, 58], tone: "success" },
          { name: "Rejected", data: [8, 6, 11, 7, 9], tone: "danger" },
        ]}
        stacked
        height={200}
      />
      <PieChart
        data={[
          { label: "IDE", value: 128, tone: "info" },
          { label: "CLI", value: 34, tone: "success" },
          { label: "Cloud", value: 51, tone: "warning" },
        ]}
        donut
        size={180}
      />
      <Text size="small" tone="tertiary">
        Sample telemetry · stacked series and donut share
      </Text>
    </Stack>
  );
}

Share pages

• Share URLs look like /cursor-canvas/cv_xxxx
• Each successful open increments viewCount (the author's own views do not)
• Links can be public or password protected, and can expire
• Open editor on the share page is shown only to the author (current session user)
• Identical source MD5 from the same owner reuses the existing record and updates access settings (reused: true)
• The author can delete links from Published links

Host actions

On the web, useCanvasAction opens Cursor through official deeplinks. newComposerChat prefills a chat prompt. Absolute openFile paths use cursor://file/...; workspace-relative paths cannot be resolved from the browser, so they also prefill a prompt. openAgent has no public deeplink, so it prefills a prompt with the conversation id. The OS still asks you to confirm before Cursor launches.

Next steps

• API reference
• Security