Cursor Canvas

Cursor Canvas는 Cursor .canvas.tsx 파일을 브라우저에서 렌더링하고 /cursor-canvas/cv_xxxx 같은 재사용 가능한 짧은 URL을 게시합니다.

에이전트가 만든 canvas를 동료에게 보여 주거나, 티켓에 붙이거나, IDE 밖에서 레이아웃을 검토할 때 사용하세요.

하는 일

1. cursor/canvas만 import하는 canvas를 붙여 넣거나 업로드합니다.
2. 이 사이트의 자체 React 렌더러로 미리 봅니다(인라인 SVG 차트, SSR).
3. 짧은 링크를 만듭니다. URL을 가진 누구나 렌더된 페이지를 다시 열 수 있습니다.

Cursor IDE 런타임이 아닙니다. 레이아웃은 비슷합니다. 웹의 Agent 버튼은 OS가 허용하면 cursor:// 딥링크로 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 import만 허용

사용 사례

• 원본 파일을 보내지 않고 에이전트가 만든 대시보드를 공유
• 저장소에 커밋하기 전에 canvas 레이아웃 검토
• 공개 cursor/canvas 프리미티브를 라이브 예제로 설명

다음 단계

• 기본 사용법
• 예제
• 보안