Cursor Canvas ツール
Cursor の .canvas.tsx を貼り付けてブラウザでプレビューし、共有用の短縮 URL を発行します。
基本的な使い方
ツールを開く
- Cursor Canvas を開きます。
- 次のいずれかの方法でソースを渡します。
- 貼り付け: ファイル内容を TypeScript エディタに貼る
- アップロード: ドロップゾーンにドラッグするか、ファイルを選択 をクリック
- 例を読み込む: 例を読み込む でギャラリー canvas を入れる
- 右側のライブプレビューを確認します。
- 任意でタイトルを追加し、短縮リンクを作成 をクリックします。
- 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>
);
}
ライブプレビュー
hello.canvas.tsx
Hello, Canvas
Live preview rendered in the browser from cursor/canvas.
共有と履歴
- 短縮リンクは再利用できます。一度きりのメッセージではありません。
- 同じセッションユーザーと同じファイル MD5 なら既存リンクを再利用します。
- 公開済みリンク には、このブラウザで作成した canvas が一覧表示され、読み込みや削除ができます。