기본 사용법

도구 열기

1. Cursor Canvas를 엽니다.
2. 다음 세 가지 방법 중 하나로 소스를 제공합니다.
   • 붙여넣기: 파일 내용을 TypeScript 편집기에 붙입니다
   • 업로드: 드롭 영역에 파일을 끌어다 놓거나 파일 선택을 클릭합니다
   • 예제 불러오기: 예제 불러오기를 눌러 갤러리 canvas를 채웁니다
3. 오른쪽 라이브 미리보기를 확인합니다.
4. 선택적으로 제목을 추가한 뒤 짧은 링크 만들기를 클릭합니다.
5. URL을 복사해 보냅니다. 누구나 렌더된 페이지를 다시 열 수 있습니다.

허용되는 업로드: .canvas.tsx, .tsx, .ts, .jsx, .txt. 소스는 200,000자로 제한됩니다.

유효한 파일 형태

컴파일러는 default export와 cursor/canvas import를 요구합니다.

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>
  );
}

공유와 기록

• 짧은 링크는 재사용할 수 있으며 일회성 메시지가 아닙니다.
• 같은 세션 사용자와 같은 파일 MD5는 기존 링크를 재사용합니다.
• 게시된 링크는 이 브라우저에서 만든 canvas를 나열하므로 불러오거나 삭제할 수 있습니다.

다음 단계

• 고급 기능
• 예제