Skip to content

Architecture

UIForge is organized as a pipeline from declarative specification to rendered DOM:

PageSpec (JSON, apiVersion ui.plexusone.dev/v1)
        │
        ▼
Schema validation          generated JSON Schemas (from the Go types)
        │
        ▼
Registry validation        ComponentSpec manifests, experience profiles
        │
        ▼
Runtime engines            expressions · state · interactions · data binding
        │
        ▼
Renderer                   React  |  Lit web components
        │
        ▼
DOM (shared data-uiforge-* vocabulary)

The key principle: renderers never receive arbitrary HTML or CSS from specs. Pages reference semantic component types; the registry defines what each type accepts; the design system decides how it looks.

Repository layout

Path Role
uispec/ Canonical UISpec Go types — the source of truth
registry/ Component registry, manifests, profiles, page validation
pkg/expression, pkg/state, pkg/interaction, pkg/diff Go runtime engines
schema/ Generated JSON Schemas + go:embed accessors
theme/ design-system-spec → UIForge theme adapter
spec/ @plexusone/uiforge-spec — shared TS types + framework-free engines
renderers/react/, renderers/lit/ The two renderers with their component packs
testdata/pagespecs/ Golden fixtures driving registry validation and renderer conformance

Go types are the source of truth

The UISpec Go structs generate the JSON Schemas (schema/generate/main.go), and the TypeScript types in @plexusone/uiforge-spec mirror them. Component manifests likewise generate the Component Reference pages. Nothing schema-shaped is hand-written twice.

The cross-renderer DOM contract

Both renderers emit the same attribute vocabulary, so tooling, tests, and stylesheets target either interchangeably:

data-uiforge-page, data-uiforge-profile, data-uiforge-layout, data-uiforge-cell, data-uiforge-region, data-uiforge-nav, data-uiforge-nav-item, data-uiforge-component, data-uiforge-missing, data-uiforge-error, data-uiforge-loading, data-uiforge-data-error — plus --uiforge-* CSS custom properties for theme tokens.

A fixture-driven conformance suite renders every golden PageSpec through both renderers and asserts this contract.

Experience profiles

A page declares a profile — dashboard, application, agent, portal, or embedded — and validation enforces that profile's constraints: which layout primitives are allowed, which component namespaces may appear, required layout slots, and maximum nesting depth. One composition model, several governed experience types.