Wirestate is a TypeScript state-management toolkit built around dependency-injected services.

Application logic lives in @Injectable classes. React and Lit adapters provide those services to UI trees. Reactivity is separate: use MobX, Preact Signals, plain values, or another state bridge inside your services.

Use Wirestate when you want service-owned state and workflows that can be scoped to an app, subtree, feature, modal, tenant, or test.

• Services own state, workflows, and cross-component coordination.
• Containers define scope and lifetime.
• Events broadcast notifications inside a container.
• Commands run one active write handler.
• Queries run one active read handler.
• Provider lifecycle hooks connect service work to React or Lit ownership.

Install the Wirestate packages for the stack you use.

# React + Signals
npm install @wirestate/core @wirestate/signals @wirestate/react @wirestate/react-signals

# React + MobX
npm install @wirestate/core @wirestate/mobx @wirestate/react @wirestate/react-mobx

# Lit + Signals
npm install @wirestate/core @wirestate/signals @wirestate/lit @wirestate/lit-signals

# Lit + MobX
npm install @wirestate/core @wirestate/mobx @wirestate/lit @wirestate/lit-mobx

Wirestate decorators work with legacy TypeScript decorators and TC39 standard decorators. For legacy TypeScript decorators, enable experimentalDecorators.

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

import { Injectable } from "@wirestate/core";
import { ContainerProvider, useInjection } from "@wirestate/react";
import { useSignals } from "@wirestate/react-signals";
import { Signal, signal } from "@wirestate/signals";

@Injectable()
class CounterService {
  public readonly count: Signal<number> = signal(0);

  public increment(): void {
    this.count.value++;
  }
}

function Counter() {
  useSignals();

  const counter = useInjection(CounterService);

  return <button onClick={() => counter.increment()}>Count: {counter.count.value}</button>;
}

export function App() {
  return (
    <ContainerProvider config={{ bindings: [CounterService] }}>
      <Counter />
    </ContainerProvider>
  );
}

@wirestate/react connects the component to the service. useSignals() subscribes this component to signal reads during render. The same service pattern can use MobX or Preact Signals in React or Lit.

• Docs home
• Installation
• Core guide
• React guide
• Lit guide
• API reference

pnpm install
pnpm lint
pnpm typecheck
pnpm test
pnpm build
pnpm docs:build

Build output goes to target/.

MIT