Choo Choo

Choo Choo is a TypeScript library that turns a grammar into an SVG railroad diagram. It supports three grammar formalisms (EBNF, ANTLR4, PEG) and four framework bindings (vanilla JS, React, Vue, Astro). Rendering is pure — a tree in, an SVG string out — so the renderer runs anywhere JavaScript does.

Quick start

The simplest path is the custom element from @choo-choo/vanilla:

pnpm add @choo-choo/vanilla @choo-choo/parser-ebnf

<script type="module">
  import "@choo-choo/vanilla";
  import "@choo-choo/vanilla/styles.css";
  import { ebnfParser } from "@choo-choo/parser-ebnf";
  const el = document.querySelector("choo-choo");
  el.parser = ebnfParser;
</script>

<choo-choo compose="grouped">
  digit  = ? 0-9 ?;
  number = digit , { digit };
</choo-choo>

The three layers

Layer	Module	Description
Core	Architecture	Choo Choo architecture
Core	Intermediate representation	Representation for manual renders
Core	Renderer	SVG renderer
Core	Manual builder	Manual builder
Parsers	EBNF	Parser for EBNF grammars
Parsers	ANTLR	Parser for ANTLR grammars
Parsers	PEG	Parser for PEG grammars
Bindings	Vanilla	Bindings for Vanilla
Bindings	React	Bindings for React
Bindings	Vue	Bindings for Vie
Bindings	Astro	Bindings for Astro