Skip to content

Repository files navigation

egraph-ui

Generates a plausible API payload, then uses an e-graph to enumerate every valid way of rendering it.

Wang tiles are solved under edge-matching constraints and read as a JSON Schema; an instance is sampled from that. Each UI component contributes rewrite rules saying what data it can display, so after saturation an e-class holds every view that can render a value — and extracting one term is choosing one of the equivalent UIs.

The set of valid UIs is finite and countable, so every one has an index. The re-roll button draws a random index; the map places sampled UIs by which components they use and walks to a new one as you drag.

Values are bound to bireactive cells, so the rendered UI is editable and derived views write backwards — edit the Fahrenheit box and the Celsius source changes.

Packages

@egraph-ui/egraph the e-graph, saturation and the index over valid UIs. No dependencies
@egraph-ui/plugins-form 57 components, each with the rules for the data it can render. Bring your own set instead
@egraph-ui/faker the payload generator. Standalone, and skippable if you have real data
@egraph-ui/explorer the map of the UI space. Depends only on the e-graph
@egraph-ui/app the site, wiring the four together

Turborepo runs the tasks; the root holds nothing but those and turbo itself. External versions live once, in the catalog in pnpm-workspace.yaml, so every package asks for catalog: and anything internal for workspace:*.

Develop

pnpm install
pnpm dev        # the app's vite server
pnpm test       # vitest, per package
pnpm typecheck
pnpm build      # output in packages/app/dist

Sharing

The URL carries everything that decides what is on screen: the payload seed, the index of the chosen UI, the enabled components as a bitset, and a fingerprint of the generator. A link reproduces a session exactly, and one made by a different generator says so rather than quietly showing something else.

Releases

Packages

Contributors

Languages