A small runtime for light-DOM web components. A component is a definition object with reactive props, or a class with signal fields; both become standard custom elements. A tagged-template renderer, signals, typed props, controllers, models, a theme engine and a library of 132 components sit on top, and the same code runs in a browser, in server-side prerendering and natively through scriptc — the terminal target compiles to a static binary with no JavaScript engine inside.
No runtime dependencies, no virtual DOM. Components render into the light DOM, so a page's stylesheet and a theme reach them as they reach any other element.
npm i @bootstrapp/lightimport View from "@bootstrapp/light";
import { html } from "@bootstrapp/light/html";
View.define("my-counter", { count: 0 }, (el) => html`
<button @click=${() => el.count++}>Count: ${el.count}</button>
`);That registers <my-counter>. The same component as a class holds its state in
signals, and render() re-runs when one it reads changes:
import View from "@bootstrapp/light";
import { html } from "@bootstrapp/light/html";
import { signal } from "@bootstrapp/light/signals";
class MyCounter extends View {
count = signal(0);
render() {
return html`<button @click=${() => this.count.value++}>
Count: ${this.count.value}
</button>`;
}
}
View.register("my-counter", MyCounter);The catalogue at lightstart.dev renders every component from its own demo, in any skin.
| Read | For |
|---|---|
| The package | Components, props, lifecycle, mixins, slots, plugins, hosts, the API of every module |
| The renderer | html, svg, render, key, element, nothing, unsafeHTML |
| Signals | signal, computed, effect, batch, untracked, selector |
| Controllers | Shared state, sync bindings, resource() |
| Models | Schemas, the store, IndexedDB and JSONL adapters, live queries |
| The theme | Tokens, presets, color scheme, icons, the utility-class engine |
| The component library | The lc-* tags, their CSS, forms, theming and composition |
| Native targets | The terminal and desktop hosts, scriptc, the coverage and parity gates |
| Testing and checking | light test, light check, the ESLint plugin |
| Folder | Holds |
|---|---|
packages/light/ |
@bootstrapp/light: the runtime and the light command, with its documentation |
packages/native/, packages/tui/ |
The workspace packages native apps share, and light-native, their tooling (README) |
examples/ |
Pages and apps on light alone: starter, todomvc, indexeddb-explorer, grand-octave, the five guided pages (01-basic-counter.html … 05-plugin-system.html), and tasks, the terminal reference app (README) |
benchmarks/ |
The view engine and renderer under node, natively and in Chromium (README) |
website/ |
The catalogue site, a Bootstrapp app |
pnpm install once at the root.
pnpm verify # every gate: lint, types, light check, node and browser tests, native parity and coverage
pnpm test # the package's tests
pnpm check # light check over the repository and the package
pnpm bench # the benchmarks in Chromium
npx light serve # serve the repository; open /examples/…pnpm verify passes only at zero errors; beyond the package's gates it covers
the tasks app's coverage and baked classes and the workspace packages' checks.
The Bootstrapp monorepo consumes this repository in place: its light/ is a
symlink to a checkout beside it, its workspace lists light/packages/light, and
its projects/light links to website/.
MIT