Reactive design-token compiler

Design tokens that respond.

Declare relationships once. GenomeJS discovers dependencies, resolves tokens safely, and expresses the result as efficient CSS custom properties.

Get started Open playground

npm install @genomejs/core

Automatic dependency discovery

Safe topological resolution

Diffed CSS variable output

Live compiler

Watch runtime context resolve into CSS.

Mutate mode, scale, contrast, and viewport state to see the related token values update in the graph and rendered interface.

runtime connected

Runtime context

Mode

Scale

1.0

Contrast

Viewport

Dependency graph

mode

surface

#1a1a1a

buttonColor

#ff6900

mode

foreground

#f2f2f2

contrast

buttonColor

#ff6900

buttonText

#1e1e1e

scale

gap

16px

controlHeight

40px

viewport

previewWidth

100%

panelRadius

12px

CSS output

--g-surface

#1a1a1a

--g-foreground

#f2f2f2

--g-button-color

#ff6900

--g-gap

16px

--g-panel-radius

12px

--g-preview-width

100%

Rendered interface

Styled by the generated `--g-*` properties.

desktop

Responsive token preview

Change the runtime context and watch only related output values update.

The problem

Stop maintaining every possible state by hand.

Traditional token systems often grow into parallel theme objects, breakpoint overrides, and manually synchronized branches. GenomeJS keeps the relationships in one token graph.

Without GenomeJS

Every variation becomes another object to maintain.

1const lightTheme = {
2  // duplicated values
3};
4 
5const darkTheme = {
6  // more duplicated values
7};
8 
9const mobileTheme = {
10  // another branch to maintain
11};

Theme duplication
Breakpoint duplication
Manual synchronization
Runtime condition branching
Hard-to-track relationships

With GenomeJS

Declare relationships once and mutate explicit context.

1const tokens = {
2  foreground: (dna, context) =>
3    context.mode === "dark"
4      ? dna.lightText
5      : dna.darkText,
6};
7 
8genome.mutate({ mode: "dark" });
9 
10// --g-foreground updates

Declare relationships once
Keep runtime context explicit
Discover dependencies automatically
Output normal CSS custom properties
Keep framework integration thin

GenomeJS does not replace CSS custom properties. It resolves your token relationships and expresses the resulting values through them.

How it works

From token definition to reactive CSS.

GenomeJS discovers relationships, resolves them safely, and expresses the result through the platform primitives your interface already understands.

STAGE 01

Declare

Start with raw values and pure token functions. Runtime conditions remain explicit instead of being hidden across duplicated theme objects.

Pipeline

Token definition

1const genome = new Genome({2  primitives: {3    spacing: 16,4    base: "#ff6900",5  },6  tokens: {7    gap: (dna, context) =>8      dna.spacing * context.scale,9  },10});

Framework adapters

One engine. Use your framework’s native reactivity.

GenomeJS keeps token compilation in the framework-neutral Core package, then exposes resolved values through thin adapters for React, Vue, and Svelte.

Core

@genomejs/core

The framework-neutral token compiler and runtime.

Read guide

npm install @genomejs/core

1import { Genome } from "@genomejs/core";2 3const genome = new Genome({4  primitives: {5    color: "#ff6900",6  },7 8  tokens: {9    headingColor: (dna) =>10      dna.color,11  },12});13 14const color =15  genome.getTrait("headingColor");

Live output

Core adapter

connected

Hello, Genome

The adapter exposes the same resolved Core state using its framework’s normal reactivity model.

accent: #ff6900
gap: 16px
radius: 18px
control: 42px

Shared runtime

Same Genome instance

Same resolved DNA values

Same CSS custom properties

Framework-native subscriptions

The live preview runs through the React adapter because this website is a Next.js application. The Vue and Svelte tabs show their actual public adapter APIs.

Core capabilities

A token engine built around relationships, not duplicated states.

GenomeJS handles dependency discovery, resolution, runtime mutation, and CSS expression while keeping the resulting interface compatible with normal platform primitives.

Automatic dependency discovery

Token relationships are inferred from the values each function reads.

No manually maintained dependency arrays or separate graph declarations.

Safe resolution

Derived tokens are topologically ordered before their values are resolved.

Dependencies resolve in a predictable order, even across multiple token layers.

Clear errors

Circular relationships and unresolved token references fail early.

Invalid graphs surface descriptive errors instead of silently producing broken output.

Reactive context

Call genome.mutate() when runtime conditions change.

Color mode, contrast, scale, viewport state, and custom context remain explicit.

Efficient CSS output

Only CSS custom properties whose resolved values changed are rewritten.

GenomeJS keeps the last expressed values and avoids identical style writes.

Framework adapters

Use the same Core engine with React, Vue, and Svelte.

Each adapter exposes Genome state through its framework’s normal reactivity model.

Included utilities

Smaller APIs for accessibility, responsive values, environmental state, and scoped output.

@genomejs/core

contrastRatio()

Measure color contrast.

lockContrast()

Adjust colors toward a target ratio.

fluidScale()

Generate responsive type values.

bindContainerSize()

Connect container dimensions.

bindMediaQueries()

Connect media-query state.

scope()

Create isolated Genome instances.

Reliability

Invalid graphs fail before they become broken interfaces.

GenomeJS validates token relationships, reports unresolved references, and avoids rewriting CSS values that have not actually changed.

Repository safeguards

$ npm run verify

Representative project checks. This is not a live CI status feed.

Core engine tests
Resolution order, graph validation, CSS diffing, and scoped context.
React adapter tests
Initial trait reads and reactive updates after mutation.
React SSR verification
Traits render through React DOM Server without a browser DOM.
Vue adapter tests
Reactive Vue refs subscribe to the shared Genome runtime.
Svelte adapter tests
Rune-aware state follows Genome subscriptions.
TypeScript project references
The complete monorepo is checked through tsc -b.
Workspace builds
All publishable packages are built before release.
GitHub Actions CI
Install, typecheck, build, and test run on pushes and pull requests.

configured: typecheck → build → test

Circular graphs fail early

GenomeJS detects cycles while compiling the dependency graph, before invalid token output reaches the interface.

CircularDependencyError a → b → c → a Resolution stopped.

Unknown tokens fail clearly

References to primitives or tokens that do not exist produce a dedicated unresolved-token error.

UnresolvedTokenError Token "surface" reads:  "missingColor" Unknown reference.

Unchanged CSS stays untouched

GenomeJS stores the last expressed value and skips identical CSS custom-property writes.

genome.mutate({ scale: 1 }) --g-gap: unchanged--g-radius: unchanged 0 redundant writes

Predictable failure is part of the API.

Circular references fail early. Unknown tokens fail clearly. Unchanged CSS values are not rewritten.

Typed packagesSSR coveredGraph validated

Build design systems that react to their environment.

Define token relationships once, mutate runtime context explicitly, and let GenomeJS resolve the resulting interface.

npm install @genomejs/core

Install the framework-neutral Core package.

Read the documentation View on GitHub

Framework-neutral coreReact, Vue, SvelteMIT licensed