Liveline

This is a tribute / re-skin of benji.org/liveline. Same library, same demos, our own typography sandbox — built to study how a single column of muted text plus a few embedded charts feels so much more alive than yet another marketing landing page.

The library is liveline by @benjitaylor. It does one thing — draws a line that moves smoothly when a number changes — and everything else (momentum, candles, orderbook, multi-series, degen particles) is opt-in.

Pass a growing array of { time, value } points and the latest value. Liveline interpolates between updates so even sparse data renders smooth at 60fps.

import { Liveline } from 'liveline'

function Chart({ data, value }) {
  return (
    <div style={{ height: 200 }}>
      <Liveline data={data} value={value} />
    </div>
  )
}

A random walk with the occasional spike — the kind of trace you stare at on a flaky service. The reference line at 80% is just a number; Liveline draws the dashed guide and label.

Pass series instead of data to draw multiple overlapping lines that share one axis. Toggle chips appear when there are 2+ series — clicking hides that line with a smooth fade and the Y-axis re-fits.

The classic breaking points: high-frequency ticks, sharp reversals, isolated spikes on a flat line, full chaos. Crank it up and watch the line keep its composure.

Liveline can do a lot — momentum arrows, particles, orderbooks, scrubbing, time windows, candles. But at the end of the day, if you just want a line that moves when a number changes, it does that just fine too.

Source · github.com/benjitaylor/liveline·Original page · benji.org/liveline