Cursor Canvas

Cursor Canvas affiche un fichier .canvas.tsx Cursor dans le navigateur et publie une URL courte réutilisable, par exemple /cursor-canvas/cv_xxxx.

Utilisez-le lorsqu’un agent produit un canvas à montrer à des collègues, à joindre à un ticket, ou à relire hors de l’IDE.

Ce qu’il fait

1. Collez ou importez un canvas qui n’importe que depuis cursor/canvas.
2. Prévisualisez-le avec le moteur React interne du site (graphiques SVG, SSR).
3. Créez un lien court. Toute personne disposant de l’URL peut rouvrir la page rendue.

Ce n’est pas le runtime de Cursor IDE. La mise en page est proche ; les boutons Agent ouvrent Cursor via des deeplinks cursor:// si le système d’exploitation le permet.

Aperçu en direct

L’extrait ci-dessous est un vrai canvas. Le même moteur alimente l’outil.

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

Fonctions clés

• Aperçu en direct : compilation et rendu dans le navigateur au fur et à mesure
• Import : déposez .canvas.tsx, .tsx, .ts, .jsx ou .txt
• Liens courts : pages de partage réutilisables avec compteur de vues
• Historique : ce navigateur peut lister et rouvrir les liens qu’il a créés
• Thème : l’aperçu suit le mode clair / sombre du site
• Sandbox : seuls les imports cursor/canvas et React sont autorisés

Cas d’usage

• Partager un tableau de bord généré par un agent sans envoyer le fichier brut
• Relire la mise en page avant de committer le canvas dans un dépôt
• Enseigner les primitives publiques cursor/canvas avec des exemples live

Étapes suivantes

• Utilisation de base
• Exemples
• Sécurité