Introduction

zerolith is a standalone frontend framework for single-page applications. State lives in fine-grained signals, HTML templates bind those signals with no compiler, a typed router handles navigation, and one command line serves the app while you work and builds it for production. It talks to any backend over plain HTTP, and renders on the server when a page needs it.

The guides explain one concept each, with the pattern zerolith uses for it and an example that runs as a test. New to zerolith? The tutorial builds a small app from an empty folder, one idea per step, and the playground runs code in your browser.

How it fits together

A component is a plain function that builds a view, and it does not run again when its state changes. Its template binds signals to the places on the page that show them, so a change to a signal updates the text, attribute, list, or branch bound to it and nothing else: there is no virtual DOM to compare and no component to render again.

Everything else is a package around that core, and an application installs the ones it uses:

Getting started

Node 24 or newer is required. Install the command line once; npm puts the prebuilt binary for your platform on your PATH:

npm install --global @zerolith/cli@alpha

Then write a starter application and run it:

zerolith new my-app
cd my-app
zerolith dev

zerolith new asks a few questions. Enter takes the default, a flag answers a question on the command line, and --yes takes every default without asking:

In the project:

The starter's README walks through its files, deploying, and environment variables, and the command line guide has every option.

A component

A component is a function that returns a view. State is signals, and the template binds them:

import { computed, html, render, signal } from "zerolith";

function Counter({ start = 0 }: { start?: number })
{
    const count = signal(start);
    const doubled = computed(() => count.get() * 2);
    return html`
        <section>
            <p>Count: ${count}, doubled: ${doubled}</p>
            <button @click=${() => count.set(count.get() + 1)}>Add one</button>
        </section>`;
}

render(Counter({ start: 1 }), "#app");

A click sets count. The text bound to count and doubled changes, and the paragraph reads Count: 2, doubled: 4; Counter does not run again, and nothing else on the page is touched.

The one rule to learn first

Bind the signal, not its value. A template given a signal follows it; a template given count.get() is given a number, read once:

import { html, render, signal } from "zerolith";

const count = signal(1);

render(html`
    <p class="live">${count}</p>
    <p class="frozen">${count.get()}</p>`, "#app");

// The first paragraph now shows 2; the second still shows 1.
count.set(2);

To show a value derived from signals, bind a computed value, as ${computed(() => item.get().name)}.

Putting it on the page

render mounts a view at the end of an element, named by a CSS selector or passed as the element itself, and returns a root: container is the element it mounted into, and dispose() removes the view and stops its effects. A selector that matches nothing fails with mount_target_missing. hydrate takes the same targets for markup the server rendered; see Server rendering.

import { html, render } from "zerolith";

const app = render(html`<p>Hello from zerolith</p>`, "#app");

// Later, to take the view down and stop its effects:
app.dispose();

The page itself is plain HTML. The starter's index.html links the global stylesheet, loads the entry module, src/main.ts or src/main.js, and leaves one element to mount into; a module script runs once the document is parsed, so it can sit in the head and still find #app:

<head>
    <link rel="stylesheet" href="/src/styles.css">
    <script type="module" src="/src/main.ts"></script>
</head>
<body>
    <div id="app"></div>
</body>

zerolith dev serves the modules as they are and resolves the packages they import from node_modules, and zerolith build bundles them.

Where to go next

Read the basics in order; the rest is there for when an application needs it.

Basics

Building apps

Tooling

Every export is in the reference, generated from the source.