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 sourceplus 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.

Status

Figma token export is built. Figma component export (turning components into variant sets with Auto Layout and bound variables) is designed but not yet built, and will require a companion Figma plugin.

#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.