基本用法

打开工具

1. 打开 Cursor Canvas。
2. 用下面三种方式之一提供源码：
   • 粘贴：把文件内容贴进 TypeScript 编辑器
   • 上传：把文件拖到上传区，或点击 选择文件
   • 加载示例：点击 加载示例，填入完整组件目录
3. 在右侧确认实时预览。
4. 可选填写标题，然后点击 生成短链。
5. 复制 URL 发给别人。任何人都可以通过链接重新打开渲染页。

支持的上传格式：.canvas.tsx、.tsx、.ts、.jsx、.txt。源码上限为 20 万字符。

合法文件长什么样

编译器要求有 default export，并且从 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>
  );
}

分享与历史

• 短链可重复打开，不是阅后即焚。
• 同一 session 用户且文件 MD5 相同时，会复用已有短链。
• 已发布短链 会列出这个浏览器创建过的 canvas，可以加载或删除。

下一步

• 高级功能
• 示例