Controlled playground

Watch runtime context compile into interface state.

Select predefined examples, change their environment, and inspect the real traits and CSS custom properties produced by GenomeJS.

Safe controlled state

Inputs

Select a preset and mutate predefined runtime context.

Presets

5 examples

Runtime context

Preparing

Modelight

Contraststandard

Densitycomfortable

Scale1.00×

Every enabled input sends a controlled patch through genome.mutate().

Observe the interface responding to resolved GenomeJS traits.

Application surface

Theme

Preparing the runtime

GenomeJS is compiling the selected preset and expressing its resolved properties.

Inspect resolved values, CSS custom properties, and dependencies.

Compiling output

The selected preset is resolving its initial DNA and CSS custom properties.

The version-one playground mutates predefined values only.

No eval · No arbitrary JavaScript