What is WebUI? #
WebUI builds web apps from HTML templates, CSS, and data. A compiler prepares the templates before requests arrive. A native renderer fills them with your backend's data to produce HTML. Add TypeScript where a component needs browser behavior, such as responding to a button.
Start here #
These lessons assume you can edit HTML and run commands in a terminal.
Installation and the first three lessons use one hello-webui project.
| Step | Result |
|---|---|
| Installation | A project with a working local CLI |
| Your first page | HTML rendered from a template and JSON data |
| Add a component | A reusable count display with its own HTML and CSS |
| Add interaction | A button that updates the count in the browser |
| Build a Todo app | A separate app with lists and events between components |
Coming from React? The comparison guide maps components, props, state, and events to WebUI. It uses the same counter as the lessons above.
To try bindings without creating a project, use the playground. It edits HTML, CSS, and JSON data; it does not run component TypeScript.
How WebUI works #
The compiler reads your templates at build time. The server combines the compiled result with request data. In the browser, interactive components connect to the rendered HTML rather than replacing it.
The CLI handles compilation and HTTP serving for the local lessons. A production backend supplies its own data and uses a host integration. Read How rendering works for that division of work.
Key concepts #
Use these pages when you need more detail about a lesson:
| Reference | What it explains |
|---|---|
| Template syntax | Bindings, conditions, lists, and attributes |
| Components | File naming, composition, and DOM boundaries |
| State and data | Initial server data and browser updates |
| Interactivity | Events, observable properties, and lifecycle |
| CSS and themes | Component styles and shared design tokens |