Control
Keep boundaries explicit
State, rendering, messages, and routing remain separate packages with ordinary JavaScript contracts.
Small pieces. Complete applications.
Framework-independent TypeScript packages for state, rendering, coordination, routing, and project generation across browser and Node.js runtimes.
- 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.
Platform
Stay close to the web
Real links, native events, the DOM, History API, Web Request/Response, Node.js, and TypeScript stay visible and usable.
Adoption
Take only what you need
Use one package or compose the stack. Static HTML, server-rendered responses, and request-scoped Node.js functions can use the same focused primitives.
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});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();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');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();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.
Observable state
white-label-model
Detailed documentationObject, array, and Map state with synchronous observation and optional runtime validation.
Rendering + lifecycle
white-label-view
Detailed documentationBrowser and DOM-free server rendering, model binding, delegated events, JSX, ownership, and cleanup.
Application events
white-label-mediator
Detailed documentationSynchronous typed application events without coupling publishers to subscribers.
URL → application intent
white-label-router
Detailed documentationOne route contract across progressively enhanced browser navigation and server dispatch.
Project creation
generator-white-label
Detailed documentationCLI and programmatic project creation with JSX or plain-TypeScript templates plus a provider-neutral Request/Response handler example.
Get started
Choose your entry point.
Start with a generated application, or install only the primitives your existing project needs.
Generate the starter
npx generator-white-label create my-projectThe generator asks whether you want JSX. Both choices produce the same browser behavior and include the same provider-neutral server handler example.
Install only what you need
npm install white-label-model white-label-view
npm install white-label-mediator white-label-routerEvery runtime package works independently. Add another piece only when the feature needs its responsibility.