rdilla

La vista de pájaro de un sitio: todas sus páginas corriendo de verdad, una al lado de la otra en un lienzo con pan y zoom. Con mapa del sitio, enlaces reales entre páginas, comentarios que van a un archivo del repo, un inspector que resuelve tokens, y export de cada frame a PNG. Lo que se echaba de menos de Figma, pero sobre el código.

Corre solo en el servidor de desarrollo (astro dev / vite), en la ruta /rdilla. Fuera de dev no existe: ni ruta, ni endpoints, ni nada que viaje a producción.

La documentación va en español; la interfaz del canvas está en inglés, porque es una herramienta y así se parece a las demás que ya se usan.

Features

• Vista de pájaro — cada página en su propio iframe, viva, a escala, en un lienzo con pan y zoom. No son capturas: es el sitio corriendo.
• Varios anchos a la vez — 1280 / 768 / 375 y los que agregues, para ver desktop y mobile lado a lado.
• Sitemap — un árbol con la estructura real del sitio.
• Links — dibuja los enlaces reales entre páginas (leídos del DOM), con dos modos de origen: un ancla fija o la posición real del <a>.
• Inspect — pasa el cursor por un elemento y lee sus valores; resuelve los tokens del design system.
• Comentarios — deja notas sobre cualquier punto de una página; se guardan en canvas-notes.json en la raíz del repo del sitio, listas para que un agente las atienda.
• Play por página — despierta un artboard para interactuar, ver animaciones y reproducir video, sin salir del lienzo.
• Export a PNG — clic derecho en un frame › Download PNG: una captura fiel, nítida y de la página completa (ver más abajo).

Instalación — Astro

npm i -D rdilla

// astro.config.mjs
import canvas from 'rdilla';

export default defineConfig({
  integrations: [
    // Excluye /rdilla del sitemap por si alguna vez la página volviera a src/pages/.
    sitemap({ filter: (page) => !new URL(page).pathname.startsWith('/rdilla') }),
    canvas(),
  ],
});

Nada más. Las páginas las descubre solo (src/pages/**/*.astro). Si el sitio tiene rutas dinámicas, puede declararlas en src/canvas.routes.ts — ver docs/canvas.md.

Instalación — Vite sin Astro (React, Vue, lo que sea)

npm i -D rdilla

// vite.config.ts
import { canvas } from 'rdilla/vite';

export default defineConfig({
  plugins: [
    react(), // o el que sea
    ...canvas({
      // Sin convención de archivos, las páginas se declaran a mano.
      pages: [
        { path: '/', title: 'Home' },
        { path: '/clients', title: 'Clients' },
        // `dynamic: true` la deja afuera hasta tener un id real que abrir.
        { path: '/clients/:id', title: 'Client detail', dynamic: true },
      ],
      title: 'Nombre del sitio',
    }),
  ],
});

Dos diferencias con Astro, las dos porque acá no hay convención de archivos:

• pages es obligatorio — se declara el arreglo completo a mano.
• No pinta nada si no estás logueado — cada artboard abre la ruta como un iframe al dev server real; si el sitio tiene login, hay que estar logueado en esa misma pestaña (comparte localStorage con el canvas por ser mismo origen).

Export a PNG (Playwright)

La captura la hace un Chrome de verdad sin ventana, así que sale idéntica a lo que ves y a la resolución que quieras — no es una aproximación en JavaScript. Es opt-in: instalar rdilla no baja ningún navegador.

Para activarlo, en el sitio:

npm i -D playwright-core

playwright-core usa el Google Chrome que ya tienes instalado — cero descarga de navegador. Con eso, el clic derecho › Download PNG de cada frame ya funciona: la imagen sale a 2x, de la página completa, y el nombre incluye el ancho para que desktop y mobile no choquen ([email protected], [email protected]).

Si necesitas correrlo en una máquina sin Chrome, usa el Playwright completo, que trae su propio navegador:

npm i -D playwright
npx playwright install chromium

Si falta cualquiera de los dos, el menú te muestra el comando en vez de romperse.

Atajos de teclado

| Tecla | Acción | |---|---| | arrastrar · scroll | pan | | ⌘/ctrl + scroll | zoom | | 0 / ⌘0 | 100% | | f / shift+f | encuadrar al ancho / a todo | | ▶ o doble clic | despertar una página (interacción, motion, video) | | clic derecho | opciones de la página (abrir, recargar, Download PNG) | | t · l · i · c | sitemap · links · inspect · comentarios | | p | elegir páginas | | esc | congelar / cancelar |

Desarrollo local contra un sitio real

Para iterar sin publicar una versión por cada cambio, apunta la dependencia al directorio fuente:

// package.json del sitio
"rdilla": "file:/ruta/a/rdilla"

npm install deja un symlink real; cualquier cambio se refleja al instante en el dev server del sitio. Para volver al paquete publicado, pon de nuevo el rango de versión (^0.6.0) y npm install.

Ojo con las fuentes: al seguir el symlink, Vite sirve los archivos por /@fs/…, que bloquea estáticos fuera de la raíz del proyecto (los .woff2 de Geist dan 403). Agrega la ruta a vite.server.fs.allow mientras iteres así. No afecta a una instalación normal desde npm, donde los archivos se copian dentro de node_modules.

Más

AGENTS.md explica la arquitectura en tres capas (core / vite / astro) y docs/ guarda la referencia completa y los ADR con el porqué de cada decisión.

Licencia

MIT © Erik Zitzermann