Your first page #

Create an HTML template and give it data. The result is a page that displays Hello, Ada!, even with browser JavaScript disabled.

Project setup #

Use the hello-webui project from Installation. That step creates package.json, installs the CLI, and checks that it runs. If you already completed it, do not create another project.

Work in that directory for every command below. Create src and data directories in your editor:

hello-webui/
  package.json
  src/
    index.html
  data/
    state.json

Creating the template #

src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{title}}</title>
</head>
<body>
  <main>
    <h1>Hello, {{name}}!</h1>
    <p>{{message}}</p>
  </main>
</body>
</html>

The braces mark text bindings. For example, takes the name value from your data. WebUI escapes text values before writing them into the HTML.

Creating the state #

data/state.json

{
  "title": "My first WebUI page",
  "name": "Ada",
  "message": "This HTML was rendered on the server."
}

This file is the state for the local preview: the values needed to render the page. It is separate from the template so the same HTML can display different data.

Previewing with webui serve #

npm run dev

pnpm run dev

yarn run dev

bun run dev

Open http://127.0.0.1:3000/:

Hello, Ada!
This HTML was rendered on the server.

The CLI reads your template and state, then serves the rendered HTML. There is no application script or browser runtime to install for this page.

To try another value, stop the server with Ctrl+C, change name to "Grace" in data/state.json, and run npm run dev again. The heading becomes Hello, Grace!. Set it back to "Ada" before the next lesson.

For automatic rebuilds while editing, use npm run dev -- --watch. If port 3000 is occupied, use npm run dev -- --port 3001. See the serve command for these development options.

Next step #

Add a component to put a reusable part of the page in its own HTML and CSS files.

The Add interaction lesson contains the working counter, browser build setup, and troubleshooting.

For deployment, read Production builds and choose a host integration.