Utilisation de base

Ouvrir l’outil

1. Ouvrez Cursor Canvas.
2. Fournissez la source de l’une des trois façons suivantes :
   • Coller : déposez le contenu du fichier dans l’éditeur TypeScript
   • Importer : glissez un fichier sur la zone, ou cliquez sur Choisir un fichier
   • Charger l’exemple : cliquez sur Charger l’exemple pour remplir la galerie
3. Confirmez l’aperçu en direct à droite.
4. Ajoutez éventuellement un titre, puis cliquez sur Créer un lien court.
5. Copiez l’URL et envoyez-la. N’importe qui peut rouvrir la page rendue.

Imports acceptés : .canvas.tsx, .tsx, .ts, .jsx, .txt. La source est limitée à 200 000 caractères.

À quoi ressemble un fichier valide

Le compilateur exige un export par défaut et un import depuis 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>
  );
}

Partage et historique

• Les liens courts restent réutilisables ; ce ne sont pas des messages à usage unique.
• Le même cookie propriétaire et le même MD5 réutilisent le lien existant.
• Liens publiés liste les canvas créés dans ce navigateur pour les charger ou les supprimer.

Étapes suivantes

• Fonctions avancées
• Exemples