Cursor Canvas

Cursor Canvas rendert eine Cursor-.canvas.tsx-Datei im Browser und veröffentlicht eine wiederverwendbare Kurz-URL wie /cursor-canvas/cv_xxxx.

Nutzen Sie es, wenn ein Agent ein Canvas erzeugt, das Sie Kolleginnen zeigen, an ein Ticket hängen oder außerhalb der IDE prüfen wollen.

Was es tut

1. Fügen Sie ein Canvas ein oder laden Sie eines hoch, das nur aus cursor/canvas importiert.
2. Vorschau mit dem eigenen React-Renderer dieser Seite (inline-SVG-Charts, SSR).
3. Erstellen Sie einen Kurzlink. Jede Person mit der URL kann die gerenderte Seite erneut öffnen.

Das ist nicht die Cursor-IDE-Laufzeit. Das Layout ist nah; Agent-Schaltflächen öffnen Cursor über cursor://-Deeplinks, wenn das Betriebssystem es zulässt.

Live-Vorschau

Das Snippet unten ist ein echtes Canvas. Derselbe Renderer treibt das Tool.

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

Wichtige Funktionen

• Live-Vorschau: im Browser kompilieren und rendern, während Sie einfügen
• Upload: .canvas.tsx, .tsx, .ts, .jsx oder .txt ablegen
• Kurzlinks: wiederverwendbare Share-Seiten mit Aufrufzähler
• Verlauf: dieser Browser kann von ihm erstellte Links auflisten und erneut öffnen
• Theme: die Vorschau folgt dem Hell-/Dunkelmodus der Seite
• Sandbox: nur cursor/canvas- und React-Imports sind erlaubt

Anwendungsfälle

• Ein agentenerzeugtes Dashboard teilen, ohne die Rohdatei zu senden
• Canvas-Layout prüfen, bevor Sie es ins Repo committen
• Öffentliche cursor/canvas-Primitives mit Live-Beispielen erklären

Nächste Schritte

• Grundlagen
• Beispiele
• Sicherheit