The Modern Web, Without the Weight
Compile HTML templates once. Render with your backend's data, without a JavaScript SSR engine. Use reactive Web Components for browser interactions.
Install the compiler
npm install -D @microsoft/webuiProject-local CLI. Node.js LTS. No Rust toolchain required.
Recorded performance
The initial RPS chart is available without JavaScript. Enable JavaScript to switch tabs, or follow the link to all measurements.
100-todo app. Complete responses; response sizes differ.
Historical, limited snapshot. 1 measured round (20 s); variability is not established. Versions and full raw-run provenance are incomplete.
| Configuration | RPS (req/s) |
|---|---|
| WebUI | 1,593.4 req/s |
| React | 319.35 req/s |
| Next.js | 138.4 req/s |
Higher serves more requests. The scale matches the full chart.
Start with HTML and data
Render a page from a template and JSON state. Then add a component's browser behavior. This counter shows that optional step.
Build the first pageEnable JavaScript to try this component.
<output>{{count}}</output>
<button @click="{increment()}">
Add one
</button>The TypeScript behind the button
@observable count = 0;
increment(): void {
this.count += 1;
}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.
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.
Compile once
Parse templates and plan their bindings before serving the page.
Render with your data
Your backend supplies state. Rust renders the response without a JavaScript SSR engine.
Activate what needs it
Hydrate interactive components. Keep purely presentational components scriptless.
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 assetswebui build ./src --out ./dist --plugin=webui --emit-component-assets settings-dialog --component-assets-out ./.webuiComing 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.