GeezerVison

The World Wide Web, restored to 800 pixels of glory.

GeezerVison is showing microsoft.github.io — The Modern Web, Without the Weight | WebUI Framework

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 playground Installation 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

<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

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.