A language for creating visualizations using a React-like JSX dialect that evaluates to SVG. Designed for general graphics, plots, graphs, and network diagrams.

Head to compendiumlabs.ai/gum for a live demo and documentation. For Python bindings, see gum.py.

Installation

bun i gum-jsx

Usage

Write some gum.jsx code:

<Plot xlim={[0, 2*pi]} ylim={[-1.5, 1.5]} grid margin={[0.2, 0.1]} aspect={2}>
  <SymLine fy={sin} stroke={blue} stroke-width={2} />
</Plot>

Then evaluate it to SVG:

import { evaluateGum } from 'gum/eval'
const elem = evaluateGum(jsx)
const svg = elem.svg()

Which will produce the following:

You can also use JavaScript directly:

import { Svg, Box, Text, Circle, Plot, SymLine, pi, sin } from 'gum'
const elem = new Plot({
  children: new SymLine({ fy: sin, stroke: blue, stroke_width: 2 }),
  xlim: [0, 2*pi], ylim: [-1.5, 1.5], grid: true, margin: [0.2, 0.1], aspect: 2,
})
const svg = elem.svg()

CLI

You can use the gum command to convert gum.jsx into SVG text or PNG data. You can even just display it directly in the terminal! For the latter you need a terminal that supports images, such as ghostty or kitty. There are a bunch of code examples in docs/code/ and docs/gallery/ to try out.

Generate an SVG from a gum.jsx file:

cat input.jsx | bun run cli -f svg > output.svg

Generate a PNG from a gum.jsx file:

cat input.jsx | bun run cli -f png > output.png

Display a gum.jsx file in the terminal:

cat input.jsx | bun run cli

CLI options:

| Option | Description | Default | |--------|-------------|---------| | -s, --size <size> | Image size in pixels | 500 | | -t, --theme <theme> | Theme: light or dark | light | | -w, --width <width> | Width of the PNG | null | | -h, --height <height> | Height of the PNG | null | | -f, --format <format> | Format: svg or png | svg | | -b, --background <color> | Background color | null (transparent) | | -o, --output <output> | Output file | null (stdout) | | -u, --update | Live update display | false |