AI-First
A structured page model models can write and revise reliably: clear REGISTRY, COMPONENTS, and DATA boundaries instead of opaque templates.
Web Definition Language
HTML, CSS, and JavaScript — composed as data
RuledWDL is a host-agnostic core engine that renders declarative JSON into optimized HTML. Same primitives you already know: structure, style, and behavior — separated for composition, reuse, and generation.
Built for how interfaces are made now
Author once as WDL JSON. Render anywhere the engine runs — Node, Workers, edge, or the browser — without a bundler step for the page model itself.
Edge-Rendered
Compose to HTML at the edge or in-process. Predictable output, no client-only framework tax required for the document.
No-Build
Define pages, layouts, and components as data — no compile step, no static-site generation pipeline, no framework build just to ship HTML artifacts and website pages.
GenUI ready
Generation-friendly surface: deterministic structure, data binding, and reusable components that tools can emit and humans can read.
Not another proprietary UI schema
WDL does not invent a parallel component vocabulary on top of the web. It wraps the web you already use.
HTML & CSS primitives
Elements, classes, and attributes map to normal HTML. Styles are ordinary CSS utilities or tokens — not a closed design DSL.
Familiar interpolation
The same mental model as HTML, CSS, and JavaScript wiring — expressed inside WDL JSON with ${} binding and loops.
Separation that scales
Structure (COMPONENTS), style (REGISTRY), and content (DATA) stay separable so composition and reuse stay explicit.
Three keys. One render.
A page is REGISTRY + COMPONENTS + DATA. Layouts chain with {{content}}. The engine turns that into HTML using a pluggable store.
Minimal page shape
{
"REGISTRY": { "title": { "class": "text-3xl font-semibold" } },
"COMPONENTS": [
{ "layers": "h1.title", "attr": { ".title": { "text": "Hello ${name}" } } }
],
"DATA": { "name": "World" }
}Try the engine
Edit WDL JSON and see HTML render live. On large screens JSON and preview sit side by side; on mobile start in JSON, then switch tabs. Device frames stay true size — pan and zoom when the viewport is smaller.