Cursor Canvas

Cursor Canvas merender file .canvas.tsx Cursor di peramban dan menerbitkan URL pendek yang dapat dipakai ulang, misalnya /cursor-canvas/cv_xxxx.

Gunakan saat agen menghasilkan canvas yang ingin Anda tunjukkan ke rekan, tempel ke tiket, atau tinjau di luar IDE.

Apa yang dilakukannya

1. Tempel atau unggah canvas yang hanya mengimpor dari cursor/canvas.
2. Pratinjau dengan perender React milik situs ini (bagan SVG inline, SSR).
3. Buat tautan pendek. Siapa pun yang punya URL dapat membuka kembali halaman yang dirender.

Ini bukan runtime IDE Cursor. Tata letaknya mirip; tombol Agent membuka Cursor lewat deeplink cursor:// jika OS mengizinkan.

Pratinjau langsung

Cuplikan di bawah adalah canvas sungguhan. Perender yang sama menggerakkan alat.

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

Fitur utama

• Pratinjau langsung: kompilasi dan render di peramban saat Anda menempel
• Unggah: jatuhkan .canvas.tsx, .tsx, .ts, .jsx, atau .txt
• Tautan pendek: halaman berbagi yang dapat dipakai ulang dengan penghitung tampilan
• Riwayat: peramban ini dapat mencantumkan dan membuka ulang tautan yang dibuatnya
• Tema: pratinjau mengikuti mode terang/gelap situs
• Sandbox: hanya impor cursor/canvas dan React yang diizinkan

Kasus penggunaan

• Bagikan dasbor buatan agen tanpa mengirim file mentah
• Tinjau tata letak canvas sebelum mengembalikannya ke repositori
• Ajarkan primitif publik cursor/canvas dengan contoh langsung

Langkah berikutnya

• Penggunaan dasar
• Contoh
• Keamanan