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 元件

下一步

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