Cursor Canvas

O Cursor Canvas renderiza um ficheiro .canvas.tsx do Cursor no browser e publica um URL curto reutilizável, por exemplo /cursor-canvas/cv_xxxx.

Use-o quando um agente produzir um canvas para mostrar à equipa, anexar a um ticket ou rever fora do IDE.

O que faz

1. Cole ou carregue um canvas que importe apenas de cursor/canvas.
2. Pré-visualize com o motor React próprio deste site (gráficos SVG, SSR).
3. Crie um atalho. Qualquer pessoa com o URL pode reabrir a página renderizada.

Isto não é o runtime do Cursor IDE. A disposição é próxima; os botões Agent abrem o Cursor via deeplinks cursor:// se o sistema operativo o permitir.

Pré-visualização em direto

O excerto abaixo é um canvas real. O mesmo motor alimenta a ferramenta.

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

Funcionalidades principais

• Pré-visualização em direto: compilar e renderizar no browser à medida que cola
• Carregar: largue .canvas.tsx, .tsx, .ts, .jsx ou .txt
• Atalhos: páginas de partilha reutilizáveis com contador de visualizações
• Histórico: este browser pode listar e reabrir os atalhos que criou
• Tema: a pré-visualização segue o modo claro/escuro do sítio
• Sandbox: só são permitidos imports de cursor/canvas e React

Casos de uso

• Partilhar um painel gerado por um agente sem enviar o ficheiro bruto
• Rever a disposição do canvas antes de o devolver ao repositório
• Ensinar as primitivas públicas de cursor/canvas com exemplos em direto

Passos seguintes

• Utilização básica
• Exemplos
• Segurança