Cursor Canvas

Cursor Canvas renderiza un archivo .canvas.tsx de Cursor en el navegador y publica una URL corta reutilizable, por ejemplo /cursor-canvas/cv_xxxx.

Úsalo cuando un agente genere un canvas que quieras mostrar al equipo, adjuntar a un ticket o revisar fuera del IDE.

Qué hace

1. Pega o sube un canvas que importe solo desde cursor/canvas.
2. Previsualízalo con el renderizador React propio de este sitio (gráficos SVG, SSR).
3. Crea un enlace corto. Cualquiera con la URL puede reabrir la página renderizada.

No es el runtime del IDE de Cursor. El diseño se parece; los botones de Agent abren Cursor mediante deeplinks cursor:// si el sistema operativo lo permite.

Vista previa en vivo

El fragmento de abajo es un canvas real. El mismo renderizador impulsa la herramienta.

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>
  );
}

Funciones clave

• Vista previa en vivo: compila y renderiza en el navegador al pegar
• Subida: suelta .canvas.tsx, .tsx, .ts, .jsx o .txt
• Enlaces cortos: páginas de compartir reutilizables con contador de visitas
• Historial: este navegador puede listar y reabrir los enlaces que creó
• Tema: la vista previa sigue el modo claro/oscuro del sitio
• Sandbox: solo se permiten imports de cursor/canvas y React

Casos de uso

• Compartir un dashboard generado por un agente sin enviar el archivo crudo
• Revisar el diseño del canvas antes de devolverlo al repositorio
• Enseñar las primitivas públicas de cursor/canvas con ejemplos en vivo

Siguientes pasos

• Uso básico
• Ejemplos
• Seguridad