Cursor Canvas 도구

Cursor .canvas.tsx 파일을 붙여 넣고 브라우저에서 미리 본 뒤, 공유 가능한 짧은 링크를 만듭니다.

API 참조

모든 경로는 /api/cursor-canvas 아래입니다. 소유권은 현재 세션 사용자입니다(익명 포함, 쿠키 sessionId).

`POST /api/cursor-canvas`

소스를 저장하고 짧은 공유 URL을 반환합니다.

요청:

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

필드	타입	설명
`source`	string	필수. 20–200,000자. `cursor/canvas`에서 import해야 합니다.
`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`

현재 세션 사용자의 canvas를 나열합니다. 세션 사용자가 없으면 []를 반환합니다.

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

현재 세션 사용자가 만든 canvas를 삭제합니다. 성공 시 204. 세션 사용자가 없으면 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