White Label

State management guide

TypeScript state management without React

Use observable state in TypeScript without adopting React or a framework-level store. White Label Model keeps state synchronous, observable, and independent from rendering.

Package documentationAPI reference

Start with a small state primitive

White Label Model gives plain objects, arrays, and Maps one observable API. It does not require a component framework, virtual DOM, provider tree, or framework-specific store.

That makes it useful when application state needs a clear owner but rendering, networking, routing, and persistence should stay separate.

import {Model} from 'white-label-model';

const profile = new Model({name: 'Ada', online: true});
profile.update({name: 'Grace'});

Observe changes directly

Mutations are synchronous. Accepted changes emit events before the mutation call returns, so listeners see the resulting state immediately.

Nested object, array, and Map changes are observed lazily through proxies instead of requiring a whole-state diff.

profile.on('change', state => {
    console.log(state.name);
});

profile.get().online = false;

Keep rendering and I/O outside state

Model deliberately does not fetch data, render UI, or control navigation. Resolve asynchronous work in application code and then apply the result with set(), update(), push(), or delete().

The separation keeps state management useful in browser code, server code, tests, and applications that do not use React or another frontend framework.

When this approach fits

Use this approach when you want observable TypeScript state with explicit ownership and a small API. It is especially appropriate when a feature does not need the conventions or ecosystem of a framework-level state library.

If an application already depends on a framework store and its surrounding tooling, replacing it only to reduce dependencies may not provide enough value.