Experiments
Open Standard · Server-Driven UI

Your UI is a database query. Your AI rewrites it in real-time.

LUI is a server-driven architecture that collapses the entire presentation layer into plain-text tokens streamed from a secure backend. No client-side schemas. No duplicated state. No SPA complexity. Just a spatial layout engine that renders what the server says you can see.

▶ Scroll to explore the architecture
Core Concepts
00 — The Hook
AI Layout Morphing
Type a prompt. Watch the dashboard restructure itself in real-time. Columns resize, components appear, logic rules activate — all compiled server-side and streamed to the edge.
> "add a forecast metric card"
✓ Row_2 rebalanced: 50% → 33.3%
✓ MetricCard{forecast} inserted
✓ session_view patched & streamed
01
The Executive Thesis
Why traditional SPAs are structurally broken for enterprise software, and what collapsing the stack actually means.
02
Spatial Hierarchy
Page → Row → Component. A rigid three-tier coordinate system that eliminates div soup forever.
03
Cascade in Action
Watch a real UI evolve layer by layer: System → Tenant → Role → User. See what changes, what locks, and what disappears.
04
Untouchables
Governance-locked UI elements that no downstream layer can move, hide, or modify. Compliance as a compile-time guarantee.
05
Zero-Trust HATEOAS
If you can't see the button, you can't hack the button. Permissions are enforced by omission, not by hiding.
06
The Grammar
A line-based, comma-delimited token stream. Smaller than JSON, faster to parse, human-readable by default.
07
Explicit Logic Matrix
Interactive behaviors declared in Disjunctive Normal Form. Decoupled from components, parsed at 120fps on the edge.
08
Durable Execution
Optimistic UI with idempotent transactions, automatic rollback animations, and crash-safe multi-step workflows.
00 — The Hook

AI Layout Morphing

Every LUI screen carries a contextual AI sidecar panel. Type a natural-language prompt and the backend compiles a valid layout patch, rebalances spatial coordinates, and streams the updated token block to the client edge — all within a single SSE frame.

How it works

The AI bridge formats the full spatial context — the active Page → Row → Component coordinate block, user history, and permission scope — into a structured prompt. The model responds strictly with a valid LUI layout patch. No freeform text. No hallucinated components. Just geometry.

Before & after: "add forecast metric card"

Before
page: WorkspaceConsole
row: Row_2 [width: 100%]
Gross Ledger
$45,000
component: MetricCard
Open Items
1 Invoice
component: MetricCard
After
page: WorkspaceConsole
row: Row_2 [width: 100%]
Gross Ledger
$45,000
component: MetricCard
Open Items
1 Invoice
component: MetricCard
Forecast
24%
component: MetricCard

User types: "add a forecast metric card"

The sidecar captures the prompt and appends the current page layout context.

Server compiles the layout patch

The AI responds with a structured token block. The cascade compiler validates it against the user's permission scope and any Untouchable constraints.

Row_2 rebalances: 50% → 33.3%

Existing components smoothly animate to their new widths. The new MetricCard fades into position.

session_view updated

The change persists in the ephemeral session layer. Promote it to userDefault_view to save permanently, or discard it when the session ends.

Provider-agnostic by design. The AI bridge is a wrapper interface. Swap between Anthropic, OpenAI, or local Ollama pipelines without changing a single layout token. The framework owns the context formatting and output validation — the model just fills in the geometry.

01 — Executive Thesis

The state fragmentation problem

Traditional enterprise architectures duplicate every piece of presentation logic: once in the database, and again in a heavy JavaScript SPA. Routing, validation, permissions, field visibility — all maintained in two places, drifting apart over time.

Traditional SPA
  • × Permissions checked client + server
  • × Routes defined frontend + backend
  • × Validation duplicated in both layers
  • × Heavy JS bundles, slow initial load
  • × State management libraries on top
LUI Architecture
  • ✓ Single source of truth: the database
  • ✓ Routes are layout queries
  • ✓ Validation compiled server-side
  • ✓ Zero-bundle client: pure layout engine
  • ✓ No client-side schema ownership

The collapse

LUI eliminates the duplication by making the server the absolute owner of both screen geometry and application capability. The client edge runtime is a stateless spatial interpreter. It accepts plain-text tokens, maps them to hardware-accelerated view primitives, and renders. No compilation pipeline. No local routing. No persistent business logic.

The client owns rendering, not decisions. Think of it as a GPU for your application layout. It draws what it's told — fast, smooth, and without opinions about what should be on screen.

02 — Spatial Hierarchy

Page → Row → Component

Every UI element lives at an explicit geometric coordinate. No arbitrary nesting. No wrapper divs. No CSS grid guesswork. Three tiers, deterministic layout.

Page
Row (100% width)
Component
Component

What it looks like, structurally

page: SpatialWorkspaceConsole
row: Row_1 [width: 100%]
component: NavigationMenu
row: Row_2 [width: 100%]
Gross Ledger
$45,000
component: MetricCard
Open Items
1 Invoice
component: MetricCard
row: Row_3 [width: 100%]
Invoice IDAccount NameStatus
INV-2026-001Vanguard Supply CorpPending
INV-2026-002Stark ManufacturingApproved
component: Table
row: Row_4 [width: 100%]
Batch Post System Invoices
component: ActionButton

Deterministic apportionment

When multiple components share a row, width is divided equally by default. Two components get 50/50. Three get 33.3/33.3/33.3. Asymmetric splits require an explicit width declaration — nothing is ever ambiguous.

One token stream, many interpreters

The Go backend streams LUI tokens over SSE. It never sends HTML, JSON, or platform-specific markup. Each target platform ships its own LUI interpreter — a thin, deterministic parser that maps tokens to native view primitives. The token format is the cross-platform contract.

Go Backend → LUI Token Stream (SSE)
└— lui-web  JS/TS (~14KB) → DOM elements
└— lui-ios  Swift → SwiftUI views
└— lui-android  Kotlin → Jetpack Compose
└— lui-desktop  C# / Rust → native widgets
No HTML crosses the wire. No WebViews on mobile. Each interpreter is auditable, deterministic, and native.
03 — The 5-Layer View Cascade

Layouts as relational data

When a route is requested, the backend compiles five configuration layers from bottom to top. Each layer can override the one below it — unless an element is marked Untouchable.

LayerNameScopeLifetime
1systemDefaultGlobal platform blueprintAll tenantsInfinite
2tenantDefaultOrganization overridesSingle tenantInfinite
3roleDefaultPermission-scoped structureAccess groupInfinite
4userDefaultPersonal workspace settingsSingle accountPersistent
5sessionLive sandbox & AI previewsActive sessionEphemeral

This isn't a config file hierarchy. These are database rows. The cascade is compiled inside a Postgres query at request time, meaning layout compilation participates in the same transactional guarantees as your business data. No eventual consistency. No stale cache. No race conditions.

03b — Cascade in Action

Watch the UI evolve, layer by layer

The same invoice console page, compiled through four cascade layers. Click each tab to see what changes, what gets locked, and what disappears entirely.

1System Default
2Tenant: Acme
3Role: Auditor
4User: Maria Chen
Base blueprint — shipped to all tenants Compliance Banner — Untouchable: platform
The SaaS platform ships the systemDefault_view: a universal blueprint every tenant starts from. The GDPR compliance banner is marked Untouchable at the platform level — no tenant, role, or user can ever remove or modify it. Every other element is overridable by downstream layers.
page: InvoiceConsole — view: systemDefault
UNTOUCHABLE: platform
row: Row_0 [width: 100%]
GDPR Data Processing Notice — This system processes personal data under EU regulation 2016/679
component: ComplianceBanner
row: Row_1 [width: 100%]
component: NavigationMenu
row: Row_2 [width: 100%]
Gross Ledger
$45,000
component: MetricCard
Open Items
1 Invoice
component: MetricCard
row: Row_3 [width: 100%]
Invoice IDAccountStatus
INV-2026-001Vanguard Supply CorpPending
INV-2026-002Stark ManufacturingApproved
component: Table
row: Row_4 [width: 100%]
Batch Post Invoices
component: ActionButton
page: InvoiceConsole view: systemDefault_view row: Row_0 [width: 100%] untouchable: platform component: ComplianceBanner{id: gdpr, label: "GDPR Data Processing Notice"} row: Row_1 [width: 100%] component: NavigationMenu{id: nav, items: [Console, Ledgers, Accounts, Admin]} row: Row_2 [width: 100%] component: MetricCard{id: kpi_gross, label: "Gross Ledger", value: "$45,000"} component: MetricCard{id: kpi_open, label: "Open Items", value: "1 Invoice"} row: Row_3 [width: 100%] component: Table[2]{id: invoices, columns: [InvoiceID, Account, Status]} row: Row_4 [width: 100%] component: ActionButton{id: batch_post, label: "Batch Post Invoices"}
+ MetricCard "Regional Volume" + Table column "Region" ~ Nav: +Audit Trail, +tenant name, -Admin ~ Button label localized Nav — Untouchable: tenant
Acme Global Logistics applies their tenantDefault_view. They add a regional volume metric (Row_2 auto-rebalances to 33.3%), inject a Region column into the table, rebrand the navigation, and lock the nav bar as a Tenant Untouchable so no role or user can alter company branding. The platform compliance banner remains locked from Layer 1.
page: InvoiceConsole — view: tenantDefault (Acme Global Logistics)
UNTOUCHABLE: platform
row: Row_0 [width: 100%]
GDPR Data Processing Notice — This system processes personal data under EU regulation 2016/679
component: ComplianceBanner
UNTOUCHABLE: tenant
row: Row_1 [width: 100%]
Console Ledgers Audit Trail acme_global_logistics
component: NavigationMenu
row: Row_2 [width: 100%]
Gross Ledger
$45,000
component: MetricCard
Open Items
1 Invoice
component: MetricCard
Regional Volume
342 units
component: MetricCard
row: Row_3 [width: 100%]
Invoice IDAccountRegionStatus
INV-2026-001Vanguard Supply CorpAPACPending
INV-2026-002Stark ManufacturingEMEAApproved
component: Table
row: Row_4 [width: 100%]
Post to Acme Ledger
component: ActionButton
--- tenantDefault_view: acme_global_logistics --- --- Row_0: UNTOUCHABLE (platform) — cannot modify --- row: Row_1 [width: 100%] untouchable: tenant component: NavigationMenu{id: nav, items: [Console, Ledgers, Audit Trail], tenant: "acme_global_logistics"} row: Row_2 [width: 100%] component: MetricCard{id: kpi_gross} — inherited component: MetricCard{id: kpi_open} — inherited component: MetricCard{id: kpi_region, label: "Regional Volume", value: "342 units"} row: Row_3 [width: 100%] component: Table{id: invoices, columns: [InvoiceID, Account, Region, Status]} row: Row_4 [width: 100%] component: ActionButton{id: batch_post, label: "Post to Acme Ledger"}
− ActionButton removed (no permission) + AuditPanel in new Row_5 + Table column "Priority" AuditPanel — Untouchable: role
The Warehouse Auditor role applies roleDefault_view. The batch posting button is dropped entirely from the token stream — auditors don't have posting permissions, so the component never reaches the client (zero-trust HATEOAS). A mandatory audit panel is added and locked as a Role Untouchable. The platform banner and tenant nav remain locked from above.
page: InvoiceConsole — view: roleDefault (Warehouse Auditor)
UNTOUCHABLE: platform
row: Row_0 [width: 100%]
GDPR Data Processing Notice — This system processes personal data under EU regulation 2016/679
component: ComplianceBanner
UNTOUCHABLE: tenant
row: Row_1 [width: 100%]
Console Ledgers Audit Trail acme_global_logistics
component: NavigationMenu
row: Row_2 [width: 100%]
Gross Ledger
$45,000
component: MetricCard
Open Items
1 Invoice
component: MetricCard
Regional Volume
342 units
component: MetricCard
row: Row_3 [width: 100%]
Invoice IDAccountRegionPriorityStatus
INV-2026-001Vanguard Supply CorpAPACHIGHPending
INV-2026-002Stark ManufacturingEMEALOWApproved
INV-2026-003Oscorp IndustriesAMERCRITICALFlagged
component: Table
row: Row_4 — DROPPED (zero-trust)
Post to Acme Ledger
NEVER SENT TO CLIENT
UNTOUCHABLE: role
row: Row_5 [width: 100%]
Recent Audit Log
2026-05-22 — INV-2026-003 flagged by system (amount threshold)
2026-05-21 — INV-2026-001 submitted by J. Park
2026-05-20 — Batch #47 reconciliation complete
component: AuditPanel
--- roleDefault_view: warehouse_auditor --- --- Row_0: UNTOUCHABLE (platform) — inherited --- --- Row_1: UNTOUCHABLE (tenant) — inherited --- row: Row_3 [width: 100%] component: Table{id: invoices, columns: [InvoiceID, Account, Region, Priority, Status]} row: Row_4 — REMOVED (user lacks 'ledger.batch_post' permission) --- ActionButton token is never emitted to the client --- row: Row_5 [width: 100%] untouchable: role component: AuditPanel{id: audit_log, depth: 3, source: "/api/audit/recent"}
~ Metric cards reordered + BookmarkBar (personal) ~ AuditPanel: compact mode (content locked) 3 Untouchables enforced from above
Maria Chen personalizes her userDefault_view. She reorders her metric cards (Open Items first — that's what she checks every morning), adds a personal bookmark bar, and sets the audit panel to compact mode. She cannot remove the compliance banner (platform lock), the branded nav (tenant lock), or the audit panel content (role lock). She can only style it. The batch post button is still gone — her role doesn't have the permission.
page: InvoiceConsole — view: userDefault (Maria Chen)
UNTOUCHABLE: platform
row: Row_0 [width: 100%]
GDPR Data Processing Notice — This system processes personal data under EU regulation 2016/679
component: ComplianceBanner
UNTOUCHABLE: tenant
row: Row_1 [width: 100%]
Console Ledgers Audit Trail acme_global_logistics
component: NavigationMenu
row: Row_2 [width: 100%]
Open Items
1 Invoice
component: MetricCard
Regional Volume
342 units
component: MetricCard
Gross Ledger
$45,000
component: MetricCard
row: Row_2b [width: 100%]
My Bookmarks
Vanguard Q4 Review Monthly Reconciliation APAC Flagged Items
component: BookmarkBar
row: Row_3 [width: 100%]
Invoice IDAccountRegionPriorityStatus
INV-2026-001Vanguard Supply CorpAPACHIGHPending
INV-2026-002Stark ManufacturingEMEALOWApproved
INV-2026-003Oscorp IndustriesAMERCRITICALFlagged
component: Table
UNTOUCHABLE: role (display: compact)
row: Row_5 [width: 100%]
Recent Audit Log
3 entries · compact view
component: AuditPanel
--- userDefault_view: maria.chen@acme --- --- Row_0: UNTOUCHABLE (platform) — cannot modify --- --- Row_1: UNTOUCHABLE (tenant) — cannot modify --- --- Row_4: absent — role removed batch_post permission --- row: Row_2 [width: 100%] --- reorder: kpi_open, kpi_region, kpi_gross --- component: MetricCard{id: kpi_open} — moved to position 1 component: MetricCard{id: kpi_region} — moved to position 2 component: MetricCard{id: kpi_gross} — moved to position 3 row: Row_2b [width: 100%] component: BookmarkBar{id: my_bookmarks, items: ["Vanguard Q4", "Monthly Recon", "APAC Flagged"]} row: Row_5 [width: 100%] — UNTOUCHABLE (role): content locked, display overridable component: AuditPanel{id: audit_log, display: "compact"}

Four layers. One query. Zero ambiguity. Every pixel Maria sees is the deterministic result of compiling systemDefault + tenantDefault + roleDefault + userDefault in a single Postgres query. Change a rule at any layer and the downstream output updates instantly. No cache busting. No client-side diffing. No "have you tried clearing your browser?"

04 — Untouchables

Governance as a compile-time guarantee

In multi-tenant enterprise software, certain UI elements are non-negotiable. A compliance banner that legal requires. An audit trail that regulators mandate. A billing widget the SaaS provider needs. LUI makes these constraints structurally unbreakable.

What is an Untouchable?

Any component, row, or section in the cascade can be flagged 🔒 untouchable by the layer that owns it. Once locked, no downstream layer can override, hide, move, or modify that element. The lock is enforced during cascade compilation — not at the client, not in middleware, but inside the database query itself.

The downward-only lock

Layer 1: Platform locks Compliance Banner, Billing
▼ cannot unlock ▼
Layer 2: Tenant locks Nav Branding, Required Fields
▼ cannot unlock ▼
Layer 3: Role locks Audit Panel, Risk Score
▼ cannot unlock ▼
Layer 4: User can rearrange, add personal widgets
▼ cannot unlock ▼
Layer 5: Session / AI sandbox only, all locks enforced

The cascade respects the hierarchy. Layer 1 untouchables cannot be unlocked by Layers 2–5. Layer 2 untouchables cannot be unlocked by Layers 3–5. An Untouchable is a downward-only lock — the layer that created it is the only layer that can remove it. This makes compliance auditable by construction: you can query the database for every Untouchable constraint and prove exactly what every user sees.

AI-safe governance

When the AI sidecar generates a layout patch, the cascade compiler validates it against all active Untouchable constraints before streaming the update. If the patch attempts to modify a locked element, it's rejected with a structured error — the user sees a clear message explaining which governance rule blocked the change and which authority owns the lock.

05 — Zero-Trust HATEOAS

If you can't see the button, you can't hack the button

Because layout rendering happens inside a secure database context, unauthorized accounts never receive the tokens for actions they can't perform. The component block is dropped during cascade compilation. It never reaches the client DOM.

Same page, two roles, different reality

Comptroller sees:
roleDefault: comptroller
row: Row_3
Invoice IDAccountStatus
INV-2026-001Vanguard SupplyPending
component: Table
row: Row_4
Post to Acme Ledger
component: ActionButton
row: Row_5
Void Selected Invoices
component: ActionButton
Auditor sees:
roleDefault: warehouse_auditor
row: Row_3
Invoice IDAccountStatus
INV-2026-001Vanguard SupplyPending
component: Table
Row_4 & Row_5: not in token stream
No buttons. No endpoints. No DOM nodes. Nothing to hack.
Traditional approach

Render the button, hide it with CSS or a client-side permission check. The DOM node, the API endpoint, and the action label are all present in the page source.

LUI approach

The server never emits the component token. No DOM node. No endpoint reference. No label string. The attack surface was never transmitted.

06 — The Grammar

A line-based token stream

LUI replaces nested JSON and YAML with a space-conscious, comma-delimited notation. Schema headers are defined once; raw values stream line-by-line. The result is smaller payloads, faster parsing, and configuration files that humans can actually read.

page: SpatialWorkspaceConsole tenant_id: acme_global_logistics view: session_view row: Row_1 [width: 100%] component: NavigationMenu{id: top_menu, items: [Dashboard, Ledgers, Accounts]} row: Row_2 [width: 100%] component: MetricCard{id: kpi_gross, label: "Gross Ledger", value: "$45,000"} component: MetricCard{id: kpi_open, label: "Pending", value: "1 Invoice"} row: Row_3 [width: 100%] component: Table[2]{id: invoice_grid, columns: [InvoiceID, Client, Status]}: INV-2026-001, Vanguard Supply Corp, Pending INV-2026-002, Stark Manufacturing, Approved row: Row_4 [width: 100%] component: ActionButton{id: batch_trigger, label: "Post to Ledger", method: "POST"}

Why not JSON?

JSON is designed for machine interchange, not human authorship. LUI tokens are designed to be read by developers, written by AI, and parsed by edge runtimes with minimal overhead. The tabular array syntax (define headers once, stream values) maps directly to the relational data model underneath — what you see in the token stream is what's stored in the database row.

07 — Explicit Logic Matrix

Behavior, decoupled from layout

Interactive capabilities — disabling elements, hiding rows, validating inputs — are declared in an isolated logic block at the tail of the configuration payload. Structured in Disjunctive Normal Form: an OR of ANDs.

logic[2]{componentId, directive, conditions(ANDed), alternateConditions(ORed)}: batch_trigger, enabledIf, invoice_grid.hasSelection+user.hasRole('Comptroller'), user.isGodMode batch_trigger, disabledIf, system.offline

How the edge parses it

batch_trigger.enabledIf evaluation:
invoice_grid.hasSelection + user.hasRole('Comptroller') FALSE
OR
user.isGodMode FALSE
Result: DISABLED — button is not interactive

Parsing mechanics

The + operator is a strict AND: both conditions must be true. The , separator creates independent OR channels: any single branch passing is sufficient. This structure lets edge engines evaluate interactive constraints with lightweight regex operations at 120fps — no JavaScript framework required.

Because logic blocks are separate from component declarations, the same constraint can be applied, removed, or overridden at any layer in the cascade without touching the layout geometry.

08 — Durable Execution

Optimistic UI with crash-safe guarantees

LUI's durable execution layer runs on Temporal with Postgres persistence — the same engine trusted by Uber, Netflix, and Stripe for mission-critical workflows. Every user interaction is an idempotent, resumable transaction.

The happy path and the rollback

Optimistic state (instant)
t=0ms — user clicks "Post"
row: Row_2
Open Items
0 Invoices
component: MetricCard
row: Row_3
Invoice IDStatus
INV-2026-001Posted
component: Table
After Temporal rollback (t=1.5s)
t=1500ms — transaction failed
row: Row_2 — reverted
Open Items
1 Invoice
component: MetricCard
row: Row_3 — reverted
Invoice IDStatus
INV-2026-001Pending
component: Table
Temporal Rollback: Ledger constraint violation — fiscal period 2026-Q2 is locked for reconciliation

1. Optimistic interaction

The edge runtime updates the UI instantly — changing numbers, badge styles, component states — before the network request completes.

2. Signed envelope payload

Interactions are queued client-side and pushed as a single payload signed with an auto-generated LUI-Sync-Token.

3. Idempotency enforcement

Duplicate submissions (network flaps, retries) are detected via token hash and replayed — never executed twice.

4. Failed update reversion

On failure, the server sends an error layout patch. Components animate back to historical state with a global error toast.

5. Crash-safe workflows

Multi-step operations run as durable workflows. Server power loss mid-transaction? Execution resumes at the exact step it dropped.

Backend-agnostic by design. DBOS is the reference implementation, not a hard dependency. The durable execution contract can be fulfilled by Temporal, Inngest, or any system that provides deterministic replay and transactional step isolation.

The Full Picture

One architecture. Zero fragmentation.

LUI isn't another frontend framework. It's an architectural position: the server should own both what you see and what you can do. The client should be fast, beautiful, and utterly opinionless about business logic.

Database
Layouts + Data + Logic
Cascade Compiler
5 Layers + Untouchables
Token Stream
SSE / Plain Text
Edge Runtime
Stateless Renderer

What enterprise teams get

Security
  • ✓ Zero-trust rendering
  • ✓ Untouchable governance
  • ✓ No client-side attack surface
Speed
  • ✓ Optimistic UI everywhere
  • ✓ Zero-bundle client runtime
  • ✓ SSE streaming updates
Control
  • ✓ 5-layer personalization
  • ✓ AI-driven layout morphing
  • ✓ Crash-safe durable execution