基本用法

開啟工具

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，可以載入或刪除。

下一步

• 進階功能
• 示例