Utilização básica

Abrir a ferramenta

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

Carregamentos aceites: .canvas.tsx, .tsx, .ts, .jsx, .txt. A origem está limitada a 200 000 caracteres.

Como é um ficheiro válido

O compilador exige um export predefinido 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>
  );
}

Partilha e histórico

• Os atalhos continuam reutilizáveis; não são mensagens de uso único.
• O mesmo cookie de proprietário e o mesmo MD5 reutilizam o atalho existente.
• Atalhos publicados lista os canvas criados neste browser para os carregar ou eliminar.

Passos seguintes

• Funcionalidades avançadas
• Exemplos