Repolode
Enviar
ivarvong

ivarvong/lantern

Una biblioteca TypeScript sin dependencias para crear explicaciones de código animadas y paso a paso, que se renderizan como SVG en el navegador, Cloudflare Workers o Node.

Ver en GitHubSitio web
Estrellas
247
Forks
6
Issues abiertos
2
Último commit
hace 10 días

¿Qué es?

Lantern es una adaptación a JavaScript/TypeScript del modelo central de manim, el motor de animación de Python, pensada para explicar visualmente los cambios en el código. Las escenas son clases con un método asíncrono construct() que define pasos y animaciones. Se puede acceder directamente a cada paso mediante una URL como ?scene=&step=, y cada escena también puede generar una versión en texto y un seguimiento estructurado del estado, lo que permite que los agentes interpreten el resultado.

La biblioteca no tiene dependencias de ejecución y renderiza a SVG. En el navegador, actualiza un elemento SVG del DOM en cada fotograma de la animación; en Cloudflare Workers o Node, devuelve cadenas SVG. El texto se incorpora como contornos de glifos mediante fuentes incluidas en el paquete, por lo que el renderizado no depende de las fuentes instaladas en el sistema anfitrión. Los diagramas se pueden escribir como diagramas de flujo de Mermaid o como documentos JSON con nodos, aristas, código y operaciones. Además, una API HTTP en el Worker los expone como endpoints de renderizado.

Funciones clave

  • 01Pasos animados a los que se puede acceder directamente por nombre de escena y de paso
  • 02Renderiza a SVG en el navegador (DOM en tiempo real) o como cadenas en Workers y Node
  • 03Texto renderizado a partir de contornos de glifos incorporados, sin depender de las fuentes instaladas
  • 04Análisis de diagramas de flujo de Mermaid y entrada de documentos JSON para las escenas
  • 05Salidas de texto, seguimiento del estado e índices, además de SVG y exportaciones de fotogramas
  • 06API HTTP en Cloudflare Workers para renderizar escenas descritas en JSON

Casos de uso

  • Guiar a quien revisa un cambio de código paso a paso mediante un enlace compartible
  • Generar diagramas animados de flujos de solicitudes o arquitecturas a partir de Mermaid o JSON
  • Producir fotogramas explicativos en SVG en el servidor sin un navegador headless
  • Proporcionar a agentes de IA una versión estructurada en texto y un seguimiento del estado de una explicación animada

Inicio rápido

  1. 1

    Clona el repositorio

    git clone https://github.com/ivarvong/lantern && cd lantern
  2. 2

    Instala las dependencias

    npm install
  3. 3

    Inicia el servidor de desarrollo y abre una escena de demostración

    npm run dev

Antes de usarlo

  • Aún no está publicado en npm; debes clonar el repositorio para usarlo.
  • Se requiere Node 24 para ejecutar las herramientas y las pruebas directamente como TypeScript.
  • Por ahora, quedan fuera del alcance: 3D, operaciones booleanas de trazado, LaTeX y morphs coincidentes.

En colecciones

Diagramas, gráficos y visualizaciones animadas

Temas

#typescript#svg#animation#code-explanation#visualization#cloudflare-workers#mermaid#zero-dependency

Preguntas frecuentes

¿Qué es lantern?
Una biblioteca TypeScript sin dependencias para crear explicaciones de código animadas y paso a paso, que se renderizan como SVG en el navegador, Cloudflare Workers o Node. Lantern es una adaptación a JavaScript/TypeScript del modelo central de manim, el motor de animación de Python, pensada para explicar visualmente los cambios en el código. Las escenas son clases con un método asíncrono construct() que define pasos y animaciones. Se puede acceder directamente a cada paso mediante una URL como ?scene=&step=, y cada escena también puede generar una versión en texto y un seguimiento estructurado del estado, lo que permite que los agentes interpreten el resultado.
¿lantern es gratuito? ¿Qué licencia tiene?
lantern es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿lantern sigue mantenido?
Mantenimiento activo. El último commit de lantern fue el 27 oct 2026.
¿Para qué puedo usar lantern?
Guiar a quien revisa un cambio de código paso a paso mediante un enlace compartible Generar diagramas animados de flujos de solicitudes o arquitecturas a partir de Mermaid o JSON Producir fotogramas explicativos en SVG en el servidor sin un navegador headless Proporcionar a agentes de IA una versión estructurada en texto y un seguimiento del estado de una explicación animada
¿Cómo se instala lantern?
Clona el repositorio: git clone https://github.com/ivarvong/lantern && cd lantern Instala las dependencias: npm install Inicia el servidor de desarrollo y abre una escena de demostración: npm run dev
¿Dónde consigo lantern?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/ivarvong/lantern

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados