Cursor Canvas

Cursor Canvas, bir Cursor .canvas.tsx dosyasını tarayıcıda çizer ve /cursor-canvas/cv_xxxx gibi yeniden kullanılabilir kısa bir URL yayımlar.

Bir ajanın ürettiği canvas’ı ekibe göstermek, bir bilete eklemek veya IDE dışında gözden geçirmek istediğinizde kullanın.

Ne yapar

1. Yalnızca cursor/canvas içe aktaran bir canvas yapıştırın veya yükleyin.
2. Bu sitenin kendi React oluşturucusuyla önizleyin (satır içi SVG grafikler, SSR).
3. Kısa bir bağlantı oluşturun. URL’ye sahip herkes çizilmiş sayfayı yeniden açabilir.

Bu, Cursor IDE çalışma zamanı değildir. Yerleşim yakındır; Agent düğmeleri işletim sistemi izin verirse cursor:// deeplink ile Cursor’ı açar.

Canlı önizleme

Aşağıdaki parça gerçek bir canvas’tır. Aynı çizici aracı çalıştırır.

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

Temel özellikler

• Canlı önizleme: yapıştırırken tarayıcıda derleyip çiz
• Yükleme: .canvas.tsx, .tsx, .ts, .jsx veya .txt bırakın
• Kısa bağlantılar: görüntüleme sayaçlı, yeniden kullanılabilir paylaşım sayfaları
• Geçmiş: bu tarayıcı oluşturduğu bağlantıları listeleyip yeniden açabilir
• Tema: önizleme sitenin açık/koyu modunu izler
• Kum havuzu: yalnızca cursor/canvas ve React içe aktarımlarına izin verilir

Kullanım durumları

• Ham dosyayı göndermeden ajanın ürettiği bir panoyu paylaşmak
• Canvas yerleşimini depoya geri göndermeden önce gözden geçirmek
• Genel cursor/canvas primitive’lerini canlı örneklerle öğretmek

Sonraki adımlar

• Temel kullanım
• Örnekler
• Güvenlik