Temel kullanım

Aracı aç

1. Cursor Canvas öğesini açın.
2. Kaynağı şu üç yoldan biriyle verin:
   • Yapıştır: dosya içeriğini TypeScript düzenleyicisine bırakın
   • Yükle: bir dosyayı bırakma alanına sürükleyin veya Dosya seç öğesine tıklayın
   • Örnek yükle: galeri canvas’ını doldurmak için Örnek yükle öğesine tıklayın
3. Sağdaki canlı önizlemeyi doğrulayın.
4. İsteğe bağlı bir başlık ekleyin, sonra Kısa bağlantı oluştur öğesine tıklayın.
5. URL’yi kopyalayıp gönderin. Herkes çizilmiş sayfayı yeniden açabilir.

Kabul edilen yüklemeler: .canvas.tsx, .tsx, .ts, .jsx, .txt. Kaynak 200.000 karakterle sınırlıdır.

Geçerli bir dosya nasıl görünür

Derleyici bir varsayılan dışa aktarma ve cursor/canvas içe aktarması ister:

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

Paylaşım ve geçmiş

• Kısa bağlantılar yeniden kullanılabilir kalır; tek kullanımlık iletiler değildir.
• Aynı sahip çerezi ve aynı dosya MD5’i mevcut bağlantıyı yeniden kullanır.
• Yayımlanan bağlantılar, bu tarayıcıda oluşturulan canvas’ları yüklemek veya silmek için listeler.

Sonraki adımlar

• Gelişmiş özellikler
• Örnekler