dtgraph docs

Documentation for dtgraph — render and validate DTCG token graphs.

dtgraph turns DTCG design token files into a visible token graph — nodes for every token, edges for every alias — and helps you catch problems (dangling aliases, cycles, malformed files) before they reach production.

There are several ways to use it:

The playground — drop a token file (or paste JSON) in your browser, no install, no upload, and explore it on the interactive map: clusters, blast radius, search, a detail panel for every token.
The dtgraph CLI — render a token graph to SVG or validate token files in CI, from the command line. Both understand DTCG resolver files, so a light/dark design system can be checked per context.
In your docs or Storybook — @dtgraph/mdx’s <TokenGraph> component embeds a graph (static or interactive) in MDX/Astro pages; @dtgraph/storybook adds a panel showing each story’s tokens.
@dtgraph/core and @dtgraph/viewer — the parser/resolver library and the map renderer everything above is built on, if you’re integrating dtgraph into your own tooling.

All of them read a token file the same way: @dtgraph/core parses and resolves it once, and the CLI and the viewer build on that graph.

Figure 1 · a token file is parsed once by @dtgraph/core; the CLI and the viewer each build on it.

New to DTCG? Start with the DTCG primer. Ready to use dtgraph? Head to Getting started.