Cursor Canvas 도구
Cursor .canvas.tsx 파일을 붙여 넣고 브라우저에서 미리 본 뒤, 공유 가능한 짧은 링크를 만듭니다.
고급 기능 소스는 브라우저에서 Sucrase로 컴파일된 뒤 모듈 허용 목록에 대해 평가됩니다.
허용: cursor/canvas, react, react/jsx-runtime, react/jsx-dev-runtime 다른 import는 컴파일 시점에 차단됩니다 파일에 from "cursor/canvas" 또는 from 'cursor/canvas'가 있어야 합니다 최대 소스 길이는 200,000자입니다 미리보기 샌드박스이며 일반 React 번들러가 아닙니다. npm 패키지, CSS 파일, 로컬 워크스페이스 import는 해석되지 않습니다.
미리보기는 useHostTheme으로 사이트 라이트/다크 모드를 따릅니다. 테마를 바꾸면 다시 렌더됩니다.
useCanvasState는 현재 페이지의 재빌드 사이에 컨트롤 값을 유지합니다. 근처 소스를 편집해도 폼, 필, 토글 값이 남습니다.
Release health Deployed
canvas-host 1.4.2 is live in all regions.
Budget
Error budget burn is 18% for the current window.
Sample data · not connected to production
복사 import { Callout, Grid, H2, Row, Stack, Stat, Text } from "cursor/canvas";
export default function Metrics() {
return (
<Stack gap={16}>
<H2>Release health</H2>
<Row gap={16} wrap>
<Stat value="99.2%" label="Uptime" tone="success" />
<Stat value="142 ms" label="p95 latency" tone="info" />
<Stat value="3" label="Open incidents" tone="warning" />
</Row>
<Grid columns={2} gap={12}>
<Callout tone="success" title="Deployed">
canvas-host 1.4.2 is live in all regions.
</Callout>
<Callout tone="warning" title="Budget">
Error budget burn is 18% for the current window.
</Callout>
</Grid>
<Text size="small" tone="tertiary">
Sample data · not connected to production
</Text>
</Stack>
);
}
이 미리보기는 Cursor 갤러리의 공개 cursor/canvas 프리미티브를 다룹니다. 레이아웃, 타이포그래피, 카드, 콜아웃, 통계, 표, 차트, 할 일, diff, DAG 헬퍼입니다.
Traffic mix Sample telemetry · stacked series and donut share
복사 import { BarChart, H2, PieChart, Stack, Text } from "cursor/canvas";
export default function Charts() {
return (
<Stack gap={16}>
<H2>Traffic mix</H2>
<BarChart
categories={["Mon", "Tue", "Wed", "Thu", "Fri"]}
series={[
{ name: "Accepted", data: [42, 55, 48, 61, 58], tone: "success" },
{ name: "Rejected", data: [8, 6, 11, 7, 9], tone: "danger" },
]}
stacked
height={200}
/>
<PieChart
data={[
{ label: "IDE", value: 128, tone: "info" },
{ label: "CLI", value: 34, tone: "success" },
{ label: "Cloud", value: 51, tone: "warning" },
]}
donut
size={180}
/>
<Text size="small" tone="tertiary">
Sample telemetry · stacked series and donut share
</Text>
</Stack>
);
}
공유 URL은 /cursor-canvas/cv_xxxx 형태입니다 열 때마다 viewCount가 증가합니다 소유자가 게시된 링크 에서 삭제할 때까지 유지됩니다 같은 owner의 동일한 소스 MD5는 기존 레코드를 재사용합니다(reused: true) 웹에서 useCanvasAction은 공식 딥링크로 Cursor를 엽니다. newComposerChat은 채팅 프롬프트를 미리 채웁니다. 절대 경로 openFile은 cursor://file/...을 씁니다. 워크스페이스 상대 경로는 브라우저에서 해석할 수 없어 마찬가지로 프롬프트를 미리 채웁니다. openAgent에는 공개 딥링크가 없어 대화 id를 넣은 프롬프트를 미리 채웁니다. Cursor가 실행되기 전에 OS가 확인을 요청합니다.
