Fonctions avancées

Sandbox de compilation

La source est compilée dans le navigateur avec Sucrase, puis évaluée contre une liste blanche de modules :

• Autorisés : cursor/canvas, react, react/jsx-runtime, react/jsx-dev-runtime
• Tout autre import est bloqué à la compilation
• Le fichier doit contenir from "cursor/canvas" ou from 'cursor/canvas'
• Longueur maximale : 200 000 caractères

C’est une sandbox d’aperçu, pas un bundler React général. Les paquets npm, fichiers CSS et imports d’espace de travail local ne seront pas résolus.

Thème

L’aperçu suit le mode clair / sombre du site via useHostTheme. Il est reconstruit lorsque vous changez de thème.

État interactif

useCanvasState conserve les valeurs des contrôles entre les reconstructions de la page courante. Formulaires, pastilles et interrupteurs gardent leurs valeurs pendant que vous modifiez le source voisin.

import { Callout, Grid, H2, Row, Stack, Stat, Text } from "cursor/canvas";

export default function Metrics() {
  return (
    <Stack gap={16}>
      <H2>Release health</H2>
      <Row gap={16} wrap>
        <Stat value="99.2%" label="Uptime" tone="success" />
        <Stat value="142 ms" label="p95 latency" tone="info" />
        <Stat value="3" label="Open incidents" tone="warning" />
      </Row>
      <Grid columns={2} gap={12}>
        <Callout tone="success" title="Deployed">
          canvas-host 1.4.2 is live in all regions.
        </Callout>
        <Callout tone="warning" title="Budget">
          Error budget burn is 18% for the current window.
        </Callout>
      </Grid>
      <Text size="small" tone="tertiary">
        Sample data · not connected to production
      </Text>
    </Stack>
  );
}

Graphiques, tableaux et tâches

Cet aperçu couvre les primitives publiques cursor/canvas des galeries Cursor : mise en page, typographie, cartes, encadrés, stats, tableaux, graphiques, todos, diffs et helpers DAG.

import { BarChart, H2, PieChart, Stack, Text } from "cursor/canvas";

export default function Charts() {
  return (
    <Stack gap={16}>
      <H2>Traffic mix</H2>
      <BarChart
        categories={["Mon", "Tue", "Wed", "Thu", "Fri"]}
        series={[
          { name: "Accepted", data: [42, 55, 48, 61, 58], tone: "success" },
          { name: "Rejected", data: [8, 6, 11, 7, 9], tone: "danger" },
        ]}
        stacked
        height={200}
      />
      <PieChart
        data={[
          { label: "IDE", value: 128, tone: "info" },
          { label: "CLI", value: 34, tone: "success" },
          { label: "Cloud", value: 51, tone: "warning" },
        ]}
        donut
        size={180}
      />
      <Text size="small" tone="tertiary">
        Sample telemetry · stacked series and donut share
      </Text>
    </Stack>
  );
}

Pages de partage

• Les URL ressemblent à /cursor-canvas/cv_xxxx
• Chaque ouverture incrémente viewCount
• Les liens restent jusqu’à ce que le propriétaire les supprime dans Liens publiés
• Le même MD5 de source pour le même propriétaire réutilise l’enregistrement (reused: true)

Actions hôte

Sur le web, useCanvasAction ouvre Cursor via des deeplinks officiels. newComposerChat préremplit une invite de chat. Les chemins openFile absolus utilisent cursor://file/... ; les chemins relatifs à l’espace de travail ne peuvent pas être résolus depuis le navigateur, donc ils préremplissent aussi une invite. openAgent n’a pas de deeplink public, donc il préremplit une invite avec l’identifiant de conversation. Le système d’exploitation demande encore confirmation avant de lancer Cursor.

Étapes suivantes

• Référence API
• Sécurité