@choo-choo/vue

Vue 3 binding for Choo Choo: a <ChooChoo> component that renders a railroad diagram from a grammar source or a pre-built IR. SSR-safe, hook-free.

Install

npm install @choo-choo/vue

Plus one grammar parser of your choice if you want to pass a source:

npm install @choo-choo/parser-ebnf

Example

<script setup lang="ts">
import { ChooChoo } from "@choo-choo/vue";
import { ebnfParser } from "@choo-choo/parser-ebnf";

const source = `
digit = "0" | "1" ;
pair  = digit , digit ;
`;
</script>

<template>
  <ChooChoo :source="source" :parser="ebnfParser" rule="pair" />
</template>

You can also skip the parser and pass a pre-built IR via the ir prop — handy if you construct diagrams with @choo-choo/core's builder API.

Learn more

• Documentation
• GitHub

License

MIT