Cursor Canvas

O Cursor Canvas renderiza um arquivo .canvas.tsx do Cursor no navegador e publica uma URL curta reutilizável, por exemplo /cursor-canvas/cv_xxxx.

Use quando um agente produzir um canvas para mostrar à equipe, anexar a um ticket ou revisar fora do IDE.

O que faz

1. Cole ou envie um canvas que importe apenas de cursor/canvas.
2. Visualize com o renderizador React próprio deste site (gráficos SVG, SSR).
3. Crie um link curto. Qualquer pessoa com a URL pode reabrir a página renderizada.

Isto não é o runtime do Cursor IDE. O layout é próximo; os botões Agent abrem o Cursor via deeplinks cursor:// se o sistema operacional permitir.

Pré-visualização ao vivo

O trecho abaixo é um canvas real. O mesmo renderizador 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 ao vivo: compile e renderize no navegador à medida que cola
• Upload: solte .canvas.tsx, .tsx, .ts, .jsx ou .txt
• Links curtos: páginas de compartilhamento reutilizáveis com contador de visualizações
• Histórico: este navegador pode listar e reabrir os links que criou
• Tema: a pré-visualização segue o modo claro/escuro do site
• Sandbox: só são permitidos imports de cursor/canvas e React

Casos de uso

• Compartilhar um painel gerado por um agente sem enviar o arquivo bruto
• Revisar o layout do canvas antes de devolvê-lo ao repositório
• Ensinar as primitivas públicas de cursor/canvas com exemplos ao vivo

Passos seguintes

• Uso básico
• Exemplos
• Segurança