Ferramenta Cursor Canvas
Cole um arquivo .canvas.tsx do Cursor, visualize no navegador e publique um link curto compartilhável.
FAQ
Por que parece diferente do Cursor? Esta visualização reimplementa a API pública cursor/canvas em React. Não é o runtime do IDE. Espaçamento, gráficos e controles são próximos, não idênticos ao pixel.
Os botões Agent funcionam? Parcialmente. useCanvasAction abre o Cursor via deeplink (cursor://). Prompts de chat e caminhos de arquivo absolutos funcionam; caminhos relativos e ids de conversa Agent não conseguem apontar para o workspace local, então preenchem um prompt.
Os links curtos expiram? Ficam até o proprietário excluí-los em Links publicados. Não são mensagens de uso único.
Por que a publicação falhou? O backend precisa estar em execução e a origem deve importar de cursor/canvas. Arquivos vazios, com mais de 200.000 caracteres e imports não permitidos são rejeitados.
Por que a pré-visualização está em branco? O arquivo precisa de um export default que retorne primitivas canvas. Expanda os exemplos ao vivo na página de exemplos.
Posso importar lucide-react ou arquivos locais? Não. Só cursor/canvas e React são permitidos. Se precisar de um ícone, coloque um SVG pequeno em linha no IconButton.
A origem é privada? Só até criar um link curto. Depois, qualquer pessoa com a URL pode carregar a origem.
«Carregar exemplo» corresponde a esta documentação? Não. Carregar exemplo na ferramenta injeta a galeria completa do SDK. Esta documentação usa pré-visualizações menores para copiar uma ideia de cada vez.