v3.2 · MIT · zero deps

Reactive state,
modeled as a graph.

Lattice is a 3kB fully-typed library that tracks dependencies as a graph and recomputes only what changed. No virtual DOM, no proxies you can't inspect — just signals that know who depends on them.

Star on GitHub 0 stars

$ npm i lattice

Why it exists

State management got complicated. Dependency tracking didn't have to.

Modern UI state is a web of derived values, yet most tools either recompute everything or bury the reactivity behind machinery you can't see. Lattice treats state as what it actually is — a directed graph — and gives you a tiny, inspectable runtime that recomputes the minimum.

01 Over-rendering. Component trees re-run on every state change, even untouched branches. Lattice updates only the nodes that actually read the changed value.
02 Opaque reactivity. Proxies and compiler magic hide what triggered what. Lattice exposes the dependency graph — you can walk it, log it, snapshot it.
03 Framework lock-in. Most signal libraries are welded to one renderer. Lattice is 3kB of plain TypeScript that works in React, Vue, Svelte, or vanilla.

Features

A signal primitive, four ways.

One mental model — nodes and edges — covers reading, deriving, reacting, and debugging. The whole public API fits on a postcard.

Signals

Reactive values you read like a function and write with .set. Subscribers update synchronously, in order.

const count = signal(0)
count.set(2)     // graph notified
count()         // => 2

Computed

Derived nodes that auto-track their dependencies. Recompute lazily, cache until an input actually changes.

const doubled = computed(
  () => count() * 2,
)            // edges: [count]

Effects

Side effects that re-run when — and only when — a value they read changes. Cleanup runs automatically.

effect(() => 
  render(doubled())
)           // reruns on change

Inspectable graph

The dependency graph is a first-class object. Walk it, snapshot it, or print a dot diagram in tests.

graph.deps(doubled)
// => [Signal<count>]
graph.toDot()  // graphviz

license MIT stars 8.4k build passing coverage 98% npm v3.2.0 bundle 3.04 kB

Contributors

Built by people, not a foundation.

247 contributors and counting. Every avatar below is one merged pull request away from being you.

Mara Okonkwo @maraok Leo Vásquez @leov Priya Nair @pnair Tomas Berg @tberg Yuki Sato @yukis Chen Wei @cwei Aisha Rahman @aishark Diego Rivas @driv

How to contribute

From clone to merged in four steps.

No CLA, no Slack invite, no committee. Read the steps, pick an issue, ship.

Fork & clone
Fork the repo, then clone your fork. git clone git@github.com:you/lattice.git
Install & test
One command installs deps and runs the suite. Everything is offline. pnpm i && pnpm test
Branch & build
Branch from main, make your change, keep the bundle under 3.5kB. git checkout -b fix/edge-case
Open a PR
Push and open a pull request. CI runs typecheck, tests and size-limit. gh pr create --base main

good first issue

New to the codebase? 23 issues are tagged good first issue — small, well-scoped, and reviewed within a day.

Funded by teams who ship on it.

Sponsorship pays for the maintainers' time so issues get answered and releases stay on schedule.

Gold

Silver

Backers

One scroll, one decision

If it saved you a re-render, give it a star.

Stars are how maintainers know it matters, how new users find it, and how sponsors decide. It costs you a click.

Star on GitHub Read the docs

Reactive state,modeled as a graph.