Grundlagen

Tool öffnen

1. Öffnen Sie Cursor Canvas.
2. Liefern Sie die Quelle auf eine von drei Arten:
   • Einfügen: Dateiinhalt in den TypeScript-Editor legen
   • Hochladen: Datei auf die Drop-Zone ziehen oder Datei wählen klicken
   • Beispiel laden: Beispiel laden klicken, um das Galerie-Canvas zu füllen
3. Bestätigen Sie die Live-Vorschau rechts.
4. Optional einen Titel hinzufügen, dann Kurzlink erstellen klicken.
5. URL kopieren und senden. Jede Person kann die gerenderte Seite erneut öffnen.

Akzeptierte Uploads: .canvas.tsx, .tsx, .ts, .jsx, .txt. Quelle maximal 200.000 Zeichen.

Wie eine gültige Datei aussieht

Der Compiler verlangt einen Default-Export und einen Import aus cursor/canvas:

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

Teilen und Verlauf

• Kurzlinks bleiben wiederverwendbar; es sind keine Einmalnachrichten.
• Derselbe Session-Nutzer plus dieselbe Datei-MD5 verwendet den bestehenden Link erneut.
• Veröffentlichte Links listet in diesem Browser erstellte Canvases zum Laden oder Löschen.

Nächste Schritte

• Erweiterte Funktionen
• Beispiele