UI Rendering Engine

Describe the screen.
Skip the frontend build.

The Server-Driven UI layer behind approval screens and other engine-generated forms in TotalApp. Instead of hand-coding a screen for every table or form combination another engine needs, this engine describes the screen as a small JSON tree, which the frontend renders instantly using a shared, theme-aware component catalog.

Server-Driven UI Semantic Styling Powers Matrix Reviews Theme-Aware
Server-Driven UI

A JSON tree in.
A working screen out

The backend describes a screen as a JSON tree of components — input, badge, button — and the frontend renders it instantly. No page-specific frontend code needed for every new form.

  • Screens described as a small JSON component tree
  • No hand-coded frontend page for every table/form combination
  • Any engine can generate a review screen without frontend work
  • New fields or actions ship by changing the JSON, not the app
See a Generated Screen
totalapp.app / ui-tree
{
"type": "form",
"children": [
{ "type": "badge", "role": "success" },
{ "type": "input", "label": "Vendor" },
{ "type": "button", "role": "primary" }
]
}
Semantic Styling

Roles, not colors.
Brand applies itself

Components carry semantic roles — primary, success, danger — not literal color values. Every tenant's white-label branding applies automatically, with zero per-screen styling work.

  • Components declare a role, not a hex code
  • Same JSON tree renders correctly under any tenant's brand
  • Zero duplicate screens — one shared component catalog
  • Dozens of near-identical hand-built screens replaced by one system
Explore the Component Catalog
totalapp.app / component-catalog
Component roles — resolved per tenant
role: primary role: success role: danger
Tenant A — Acme Corp
"primary" resolves to violet — Acme's brand color
Tenant B — Nova Retail
Same JSON tree, "primary" resolves to Nova's orange — zero screen code changed
Powers Matrix Agent Reviews

Already at work
behind the scenes

The human-review step after Matrix Agent scores a vendor, lead, or compliance record is rendered by this engine — proof that server-driven screens hold up in production today.

  • Matrix Agent review screens are generated, not hand-built
  • Approval, findings, and review flows share the same rendering path
  • New engines can reuse the same review UI instantly
  • One rendering engine, many generated experiences
See a Review Screen
totalapp.app / matrix/review
TechParts GmbH — Score 91 Rendered
Generated Components
badge · role: success
breakdown bars · 3 criteria
approve / reject buttons
Every element above is a JSON tree generated by Matrix Agent and rendered by this engine — no dedicated review page was hand-built.
Theme-Aware by Default

White-label,
without extra work

Every generated screen automatically respects the tenant's white-label branding — logo, colors, and typography — with no per-screen theming code required.

  • Tenant branding applies to every generated screen automatically
  • Instant rendering — the frontend reads the tree once and renders
  • Light and dark mode supported without extra markup
  • New tenants get correctly branded screens on day one
See White-Label in Action
totalapp.app / theme-preview
Same JSON tree, two tenants
primary button
badge accent
Tenant A — Acme Corp
primary button
badge accent
Tenant B — Nova Retail
Logo, colors, and typography swap automatically per tenant — no per-screen theming code required.
All Capabilities

Everything in the box

UI Rendering Engine ships a complete Server-Driven UI layer, ready to power approval screens for any engine.

Server-Driven UI

The backend describes a screen as a JSON tree of components; no page-specific frontend code needed.

Instant Rendering

The frontend reads the tree once and renders a fully working, styled screen immediately.

Semantic Styling

Components carry semantic roles — primary, success, danger — not literal colors, so every tenant's brand applies automatically.

Zero Duplicate Screens

One shared component catalog replaces dozens of near-identical hand-built approval/review pages.

Powers Matrix Agent Reviews

The human-review step after Matrix Agent scores a vendor, lead, or compliance record is rendered by this engine.

Theme-Aware by Default

Every generated screen automatically respects the tenant's white-label branding.