StateMeshTransaction-first state for React

Quick Start ​

npm install statemesh-core

import { createMesh, StateMeshProvider, useMeshState } from "statemesh-core";

const mesh = createMesh({
  state: { count: 0 }
});

function Counter() {
  const [count, setCount] = useMeshState<number>("count");
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

export function App() {
  return (
    <StateMeshProvider mesh={mesh}>
      <Counter />
    </StateMeshProvider>
  );
}

Why StateMesh? ​

Every state change is a transaction ​

StateMesh treats every mutation — button clicks, API calls, form submissions, route transitions — as a transaction with a built-in lifecycle. You get optimistic UI, automatic rollback, retry with backoff, timeout, and cancellation without writing any boilerplate.

mesh.transaction("cart.checkout", {
  optimistic(state) { state.cart.status = "processing"; },
  async effect(state, payload, ctx) {
    return fetch("/api/checkout", { signal: ctx.signal });
  },
  commit(state, result) { state.order = result; },
  rollback: true,           // Auto-rollback on failure
  retry: { attempts: 3, delay: backoff() }
});

One store for everything ​

State, server cache, forms, URL parameters, cross-tab sync, undo history — all live in one store with one set of types. No more wiring together 5 libraries with different mental models.

const mesh = createMesh({ state: { /* app state */ } });

mesh.action("cart.addItem", addItemHandler);     // State mutations
mesh.resource("products.list", productsDef);      // Server cache
mesh.form("checkout.form", checkoutFormDef);       // Forms
mesh.urlState("filters", filterDefaults);          // URL state
mesh.persist({ keys: ["theme", "cart"] });         // Persistence
mesh.use(tabSyncPlugin({ keys: ["cart"] }));       // Cross-tab sync
mesh.undo({ maxHistory: 50 });                     // Undo/redo

Subscriptions that never waste renders ​

Path-scoped selectors with equality checking. Updating cart.items does not rerender components reading theme. Computed values cache until their dependencies change. Resources deduplicate in-flight requests by key.

// Only re-renders when cart.items.length actually changes
const count = useMeshSelector((state) => state.cart.items.length);

Undo, redo, and time travel — for free ​

Opt-in state history with configurable depth. Replay to any point in time. Batch-aware grouping so multi-step operations undo as one.

mesh.undo();                          // Go back
mesh.redo();                          // Go forward
mesh.enableTimeTravel();
mesh.replayToTimestamp(Date.now() - 5000);  // 5 seconds ago

Routing that IS state management ​

Every route transition is a transaction. Every loader is a resource. Every guard is middleware. Navigation rollback, keep-alive pools, and predictive prefetch — all sharing the same store.

Built-in DevTools ​

Timeline, profiler, diagnostics, state inspector, resource cache viewer, form debugger, and event log — all in a dockable panel. Mask sensitive paths. Export debug reports.

Production-grade from day one ​

• Zero runtime dependencies — React is the only peer dependency
• 100% TypeScript — type-safe paths, discriminated events, generic inference
• SSR-safe — all browser APIs guarded, dehydrate/hydrate for server rendering
• 603 tests — every module, API surface, error path, and edge case covered
• Tree-shakeable — router, devtools, and testing are separate entry points
• Bounded memory — LRU caches, ring buffers, snapshot limits

Documentation ​

Getting Started ​

Core ​

Data ​

UI Integration ​

Router ​

Advanced ​

Testing ​

Integration ​

Reference ​