It parses DTCG token files and renders the reference graph between tokens — which
primitives feed which semantic tokens, what breaks if a value changes, and where
cycles hide — as an interactive node graph, so token lineage and blast radius stay
legible as a design system grows.
Try it
Open the playground and drop a DTCG file on it
(or a *.resolver.json with the files it references, then switch between its contexts):
tokens cluster by what they reference, the most-depended-on primitives are the biggest dots,
hovering spotlights relations, clicking opens a detail panel, / searches. Nothing is uploaded.
Packages
| Package | What it is |
|---|
@dtgraph/core | Parse DTCG files and resolver documents, resolve aliases (across files and per context), build the token graph, render a static SVG. |
dtgraph | CLI: dtgraph validate and dtgraph render for one or more token files, or a resolver plus its files. |
@dtgraph/viewer | The interactive WebGL map: clusters, blast radius, hover/click focus, search, detail panel. |
@dtgraph/mdx | <TokenGraph> for MDX/Astro pages, static SVG or interactive. |
@dtgraph/storybook | Storybook addon panel showing each story's token graph. |
Documentation
Full docs live at https://julien-deramond.github.io/dtgraph/docs/.
| Page | What's in it |
|---|
| Getting started | Two ways to start using dtgraph — the playground, or the CLI. |
| DTCG primer | What a DTCG token file looks like, for someone who's never seen one before. |
| Interactive viewer | Explore a token graph as a zoomable map — clusters, blast radius, search, and a detail panel for every token. |
| CLI reference | Every dtgraph CLI command, flag, and exit code. |
Status
Early-stage / pre-release. Core parsing, graph model, and rendering are still being
designed — see the open issues for what's
in progress.
Contributing
Contributions are welcome. See CONTRIBUTING.md for how issues and
pull requests are triaged and reviewed, including the workflow for AI-agent-submitted
issues. To report a bug or request a feature, open an issue.
License
Code: MIT. The brand files (the mark and the artwork, including the header image) are all rights reserved.
