Uso básico

Abrir la herramienta

1. Abre Cursor Canvas.
2. Proporciona el origen de una de estas tres formas:
   • Pegar: suelta el contenido del archivo en el editor TypeScript
   • Subir: arrastra un archivo a la zona, o pulsa Elegir archivo
   • Cargar ejemplo: pulsa Cargar ejemplo para rellenar la galería
3. Confirma la vista previa en vivo a la derecha.
4. Opcionalmente añade un título y pulsa Crear enlace corto.
5. Copia la URL y envíala. Cualquiera puede reabrir la página renderizada.

Subidas aceptadas: .canvas.tsx, .tsx, .ts, .jsx, .txt. El origen está limitado a 200.000 caracteres.

Cómo se ve un archivo válido

El compilador exige un export por defecto y un import desde 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>
  );
}

Compartir e historial

• Los enlaces cortos siguen siendo reutilizables; no son mensajes de un solo uso.
• El mismo cookie de propietario y el mismo MD5 reutilizan el enlace existente.
• Enlaces publicados lista los canvas creados en este navegador para cargarlos o eliminarlos.

Siguientes pasos

• Funciones avanzadas
• Ejemplos