Generators

A generator is a back-end: it consumes the neutral IR and emits something concrete — real code for a framework, or a design file. Generators are where platform-specific decisions finally get made.

#The React generator

The React generator is the one that ships first and defines the bar. It emits self-contained component source plus a shared theme — output you could read, review, and ship by hand, except you don't have to. It realizes:

• Structure — neutral node kinds become the right elements.
• Behavior — state machines become idiomatic React state and interaction.
• Style — facets and foundations become a theme expressed as CSS custom properties.

The goal is a drop-in replacement for your existing components — matching API and behavior closely enough to swap in without rewrites.

#The Figma generator

Figma is a design target rather than a code target. Today it exports your foundations — turning tokens into a Figma Variables file plus a W3C DTCG token file you can import into design tooling.

#One model, many back-ends

Every generator implements the same small contract: given the IR, emit files; given the foundations, emit a theme. New targets — Vue, native, others — slot in as additional back-ends without changing the IR or the editor. The neutral model is what makes that possible.

#Realization differs per target

The same behavior can execute differently on different platforms, and the same facet token can resolve to a different value per platform. That divergence lives entirely in each generator's realization — never in the shared model. See The IR.

Which generators a given project runs is controlled by its targets.