Small pieces. Complete applications.

Framework-independent TypeScript packages for state, rendering, coordination, routing, and project generation.

Runtime: Browser + Node.js
Architecture: Explicit composition
Rendering: DOM or escaped JSX
Approach: HTML first, JS enhances

Why White Label

Own the application architecture.

Use the web platform directly, adopt only the primitives a feature needs, and keep meaningful HTML as the foundation instead of hiding the application behind a framework runtime.

Control

Keep boundaries explicit

State, rendering, messages, and routing remain separate packages with ordinary JavaScript contracts.

Platform

Stay close to the web

Real links, native events, the DOM, History API, ES modules, Node.js, and TypeScript stay visible and usable.

Adoption

Take only what you need

Use one package or compose the stack. Static content can stay static and server-rendered content can remain server-owned.

Architecture

One job per piece.

Each package has a focused responsibility. Use one by itself or compose them when a feature needs the full flow.

01Router
URL → application intent.
02Mediator
Intent → decoupled events.
03Model
Events → observable state.
04View
State → rendered output.

These are responsibilities, not mandatory layers. A feature that only needs state can use Model by itself.

Learn by doing

Four ideas. Four tiny examples.

Each example teaches one concept, shows the smallest useful code, and gives you one obvious interaction to try.

Model

Observe state changes

Store state, listen once, then update it synchronously.

const model = new Model({count: 0});

model.on('change', state => console.log(state.count));
model.update({count: 1});

Open API index

Try it

View

Render from a model

Give View a model and a template. Model changes trigger rendering.

new View({
    parentElement: mount,
    model,
    template: ({name}) => <p>Hello, {name}</p>
}).initialize();

Open API index

Try it

Mediator

Publish without coupling

Subscribers react to named events without the publisher knowing who they are.

mediator.on('message', text => console.log(text));

mediator.emit('message', 'Hello');

Open API index

Try it

Router

Turn a URL into intent

Define a route, then enhance real links instead of replacing them.

router.routes = {
    '/products': () => showProducts()
};

router.initialize();

Open API index

Try it

API reference

API index, on its own page.

The homepage stays focused on learning the architecture. The API index is optimized for scanning public signatures and jumping directly into the authoritative package documentation.

Browse the API index

Get started

Choose your entry point.

Start with a generated application, or install only the primitives your existing project needs.

New project

Generate the starter

npx generator-white-label create my-project

The generator asks whether you want JSX. Both choices produce the same application behavior.

Existing project

Install only what you need

npm install white-label-model white-label-view
npm install white-label-mediator white-label-router

Every runtime package works independently. Add another piece only when the feature needs its responsibility.