The Modern Web, Without the Weight

WebUI is an open-source framework for building web apps with HTML and CSS. Compile your templates once, render pages using your backend's data, and add JavaScript for interactive behavior.

Try the playgroundInstallation guide

Start with HTML and data

Render a page from a template and JSON data. Then add a component and its browser behavior.

Build the first page
home-counter.htmlHTML + optional behavior
<output>{{count}}</output>
<button @click="{increment()}">
  Add one
</button>
The TypeScript behind the button
@observable count = 0;

increment(): void {
  this.count += 1;
}
HTML arrives rendered. Browser code connects the button to the count. Build this counter.

Choose where rendering happens

Streaming SSR
Stream ready HTML while slower data loads. Hydrate completed regions without waiting for the full response.
Service-worker rendering
Cache the compiled UI, then stream rendered HTML fragments as data arrives. Your app owns the caching policy and first-load bootstrap.
WebAssembly (WASM)
Use the renderer or compiler in the browser. Choose handler-only, parser-only, or combined bundles.
Static site generation
WebUI Press builds Markdown and Web Components into static HTML. Publish to a CDN or static host.
Explore runnable examples

Compile before requests arrive

Template structure is known before a request arrives. WebUI compiles it ahead of time, leaving your server to supply data and render HTML.

Follow the rendering model

Load component assets on demand

Export compiled templates and styles as component assets. Load optional dialogs and panels when they are needed instead of shipping every template up front.

Build and load component assets 
webui build ./src --out ./dist --plugin=webui --emit-component-assets settings-dialog --modules-out ./.webui
For non-routed UI. Use router loaders for routed components.

Coming from React

Components, state, events, and lists. Keep those ideas. Learn where HTML templates and native rendering change the way you work.

Coming from React
Start with HTML and CSS
Bindings, conditions, and loops render on the server. A component does not need a JavaScript class just to display data.
Add behavior, not a second page
Interactive Web Components connect to the rendered DOM. Observable state updates the bindings that depend on it.
Know what changes
Existing JSX and React libraries are not drop-in WebUI components. Initial state comes from your backend; styling follows the web platform.

Keep your backend

Load the compiled template once, then render with request data. Choose a supported binding or use the C interface from another language. A JavaScript SSR engine is not required.

Each guide covers the binding's installation and distribution status.

Make your first page

Start with a template and data. Add an interactive component when you need one.

Start building