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 のランタイムではありません。レイアウトは近いです。Web 上の Agent ボタンは、OS が許可すれば cursor:// deeplink で 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 に対応
• 短縮リンク: 再利用可能な共有ページと閲覧回数
• 履歴: このブラウザが作成したリンクを一覧・再オープン
• テーマ: サイトのライト / ダークモードに追従
• サンドボックス: import できるのは cursor/canvas と React のみ

用途

• 元ファイルを送らずに、エージェント生成のダッシュボードを共有する
• リポジトリに戻す前に canvas のレイアウトを確認する
• 公開 cursor/canvas プリミティブをライブ例で説明する

次のステップ

• 基本的な使い方
• 例
• セキュリティ