Cursor Canvas 工具

貼上 Cursor 產生的 .canvas.tsx，在瀏覽器預覽，並產生可分享短鏈。

API 參考

所有路由都在 /api/cursor-canvas 下。作者身分綁定目前 session 使用者（含匿名使用者，cookie 為 sessionId）。

`POST /api/cursor-canvas`

儲存原始碼並回傳短鏈。

請求：

{
  "source": "import { H1 } from \"cursor/canvas\";\nexport default function App() { return <H1>Hi</H1>; }",
  "title": "Optional"
}

欄位	類型	說明
`source`	string	必填。20–200,000 字元。必須從 `cursor/canvas` 匯入。
`title`	string	可選。最多 200 字元。顯示在分享頁。

回應：

{
  "canvasId": "cv_a1b2c3d4e5f6",
  "shareUrl": "https://example.com/cursor-canvas/cv_a1b2c3d4e5f6",
  "title": "Optional",
  "sourceMd5": "5d41402abc4b2a76b9719d911017c592",
  "reused": false,
  "createdAt": "2026-08-31T08:00:00.000Z"
}

同一 owner 已經發布過相同 MD5 時，reused 為 true。

`GET /api/cursor-canvas/:canvasId`

載入分享頁原始碼。會增加 viewCount。

{
  "canvasId": "cv_a1b2c3d4e5f6",
  "title": "Optional",
  "source": "import { H1 } from \"cursor/canvas\";\nexport default function App() { return <H1>Hi</H1>; }",
  "viewCount": 3,
  "createdAt": "2026-08-31T08:00:00.000Z"
}

`GET /api/cursor-canvas/mine`

列出目前 session 使用者的 canvas。沒有 session 使用者時回傳 []。

`DELETE /api/cursor-canvas/:canvasId`

刪除目前 session 使用者建立的 canvas。成功回傳 204。沒有 session 使用者時回傳 401。

`source` 示例 canvas

線上預覽

hello.canvas.tsx

Hello, Canvas

Live preview rendered in the browser from 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>
  );
}

這個頁面對您有幫助嗎？

On this page

POST /api/cursor-canvas GET /api/cursor-canvas/:canvasId GET /api/cursor-canvas/mine DELETE /api/cursor-canvas/:canvasId source 示例 canvas