Uso básico

Abrir a ferramenta

1. Abra Cursor Canvas.
2. Forneça a origem de uma destas três formas:
   • Colar: solte o conteúdo do arquivo no editor TypeScript
   • Enviar: arraste um arquivo para a zona, ou clique em Escolher arquivo
   • Carregar exemplo: clique em Carregar exemplo para preencher a galeria
3. Confirme a pré-visualização ao vivo à direita.
4. Opcionalmente adicione um título e clique em Criar link curto.
5. Copie a URL e envie. Qualquer pessoa pode reabrir a página renderizada.

Uploads aceitos: .canvas.tsx, .tsx, .ts, .jsx, .txt. A origem está limitada a 200.000 caracteres.

Como é um arquivo válido

O compilador exige um export padrão e um import de 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>
  );
}

Compartilhamento e histórico

• Os links curtos continuam reutilizáveis; não são mensagens de uso único.
• O mesmo cookie de proprietário e o mesmo MD5 reutilizam o link existente.
• Links publicados lista os canvas criados neste navegador para carregá-los ou excluí-los.

Passos seguintes

• Recursos avançados
• Exemplos