Cursor Canvas 工具
粘贴 Cursor 生成的 .canvas.tsx，在浏览器里预览，并生成可分享短链。
高级功能
源码在浏览器里用 Sucrase 编译，再按模块白名单求值：
- 允许：
cursor/canvas、react、react/jsx-runtime、react/jsx-dev-runtime - 其他 import 会在编译期被拦截
- 文件必须包含
from "cursor/canvas" 或 from 'cursor/canvas' - 源码最长 20 万字符
这是预览沙箱，不是通用 React 打包器。npm 包、CSS 文件和本地工作区导入都无法解析。
预览通过 useHostTheme 跟随站点的浅色 / 深色模式。切换主题时会重新渲染。
useCanvasState 会在当前页面的重建之间保留控件值。编辑附近源码时，表单、胶囊按钮和开关仍会记住当前值。
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>
);
}
本预览覆盖 Cursor gallery 里公开的 cursor/canvas 组件：布局、排版、卡片、提示、指标、表格、图表、待办、Diff 和 DAG 辅助函数。
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>
);
}
- 分享 URL 形如
/cursor-canvas/cv_xxxx - 每次成功打开会增加
viewCount（作者自己打开不加） - 短链可设为公开或密码访问，并可设置过期时间
- 分享页的 打开编辑器 只对作者（当前 session 用户）显示
- 同一 owner 的相同源码 MD5 会复用记录，并更新权限设置（
reused: true） - 作者可在 已发布短链 里删除链接
网页上的 useCanvasAction 会通过官方 deeplink 唤起 Cursor。newComposerChat 会预填聊天提示。绝对路径的 openFile 使用 cursor://file/...；工作区相对路径在浏览器里无法解析，因此也会预填提示。openAgent 没有公开 deeplink，会带上会话 id 预填提示。系统仍会在启动 Cursor 前征求确认。
