Repolode
Submit
ivarvong

ivarvong/lantern

A zero-dependency TypeScript library for building animated, step-by-step code explainers that render to SVG in the browser or on Cloudflare Workers and Node.

View on GitHubWebsite
Stars
247
Forks
6
Open issues
2
Last commit
11 days ago

What is it?

Lantern is a JavaScript/TypeScript port of the core model of manim, the Python animation engine, aimed at explaining code changes visually. Scenes are classes with an async construct() method that declare steps and animations. Each step is addressable through a URL like ?scene=&step=, and each scene can also produce a text form and a structured state trace, which makes the output readable by agents.

The library has no runtime dependencies and renders to SVG. In the browser it patches a live DOM SVG element on each animation frame; in Cloudflare Workers or Node it returns SVG strings. Text is embedded as glyph outlines using bundled fonts, so rendering does not depend on fonts installed on the host. Diagrams can be written as Mermaid flowcharts or as JSON documents of nodes, edges, code and operations, and an HTTP API in the Worker exposes these as render endpoints.

Key features

  • 01Animated steps that can be linked to directly by scene and step name
  • 02Renders to SVG in the browser (live DOM) or as strings in Workers and Node
  • 03Text rendered from embedded glyph outlines, independent of installed fonts
  • 04Mermaid flowchart parsing and JSON document input for scenes
  • 05Text, state-trace and index outputs alongside SVG and frame exports
  • 06HTTP API on Cloudflare Workers for rendering scenes described in JSON

Use cases

  • Walking a reviewer through a code change step by step in a shareable link
  • Generating animated diagrams of request flows or architecture from Mermaid or JSON
  • Producing SVG explainer frames on the server without a headless browser
  • Giving AI agents a structured text and state trace of an animated explanation

Quick start

  1. 1

    Clone the repository

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

    Install dependencies

    npm install
  3. 3

    Start the dev server and open a demo scene

    npm run dev

Things to know

  • Not yet published on npm; you must clone the repository to use it.
  • Requires Node 24 to run the tools and tests directly as TypeScript.
  • Out of scope for now: 3D, boolean path operations, LaTeX, and matching morphs.

In collections

Diagrams, charts & animated visualizations

Topics

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

FAQ

What is lantern?
A zero-dependency TypeScript library for building animated, step-by-step code explainers that render to SVG in the browser or on Cloudflare Workers and Node. Lantern is a JavaScript/TypeScript port of the core model of manim, the Python animation engine, aimed at explaining code changes visually. Scenes are classes with an async construct() method that declare steps and animations. Each step is addressable through a URL like ?scene=&step=, and each scene can also produce a text form and a structured state trace, which makes the output readable by agents.
Is lantern free to use? What license does it have?
lantern is open source under the MIT license. Check the license terms before using it in commercial products.
Is lantern still maintained?
Actively maintained. The last commit to lantern was on Oct 27, 2026.
What can I use lantern for?
Walking a reviewer through a code change step by step in a shareable link Generating animated diagrams of request flows or architecture from Mermaid or JSON Producing SVG explainer frames on the server without a headless browser Giving AI agents a structured text and state trace of an animated explanation
How do I install lantern?
Clone the repository: git clone https://github.com/ivarvong/lantern && cd lantern Install dependencies: npm install Start the dev server and open a demo scene: npm run dev
Where can I get lantern?
The source code and installation instructions are on GitHub: https://github.com/ivarvong/lantern

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects