Cursor Canvas

Cursor Canvas 会把 Cursor 的 .canvas.tsx 在浏览器里渲染出来，并发布一条可重复打开的短链，例如 /cursor-canvas/cv_xxxx。

适合把 Agent 生成的 canvas 发给同事、贴进工单，或在 IDE 之外检查版面。

能做什么

1. 粘贴或上传只从 cursor/canvas 导入的 canvas。
2. 用本站的第一方 React 渲染器预览（inline SVG 图表，支持 SSR）。
3. 生成短链。任何拿到链接的人都能重新打开渲染结果。

这不是 Cursor IDE 运行时。版面会接近；网页上的 Agent 按钮会通过 cursor:// deeplink 唤起本机 Cursor（需系统确认）。

在线预览

下面是一份真实 canvas，和 工具页 用的是同一套渲染器。

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

主要功能

• 实时预览：粘贴后在浏览器里编译并渲染
• 上传文件：支持 .canvas.tsx、.tsx、.ts、.jsx、.txt
• 短链分享：可重复打开，并统计浏览次数
• 历史记录：当前浏览器可以列出并重新打开自己创建的链接
• 主题跟随：预览跟随站点的浅色 / 深色模式
• 沙箱：只允许导入 cursor/canvas 和 React

使用场景

• 分享 Agent 生成的仪表盘，而不必发送原始文件
• 提交到仓库前先检查 canvas 版面
• 用可交互示例讲解公开的 cursor/canvas 组件

下一步

• 基本用法
• 示例
• 安全说明