Managed state for ReactMore application,for less code.

Expressive MVC moves data, behavior, and lifecycle into focused models. Components stay small, application logic stays readable, and every feature takes less code to build, test, and change.

import React from 'react';import State from '@expressive/react';class Counter extends State {  count = 0;    increment() {    this.count++;  }}function App() {  const { count, increment } = Counter.use();  return (    <button onClick={increment}>      Clicked {count} times    </button>  );}

Edit in Playground →

Get Started View Docs

Drops into React you already have - not a framework, no rewrite.

React has gotten complicated.

useStateuseEffectuseMemouseCallbackuseRefuseContextuseReduceruseLayoutEffectuseIduseTransitionuseStateuseEffectuseMemouseCallbackuseRefuseContextuseReduceruseLayoutEffectuseIduseTransition

useSWRuseQueryuseMutationuseInfiniteQueryuseFormuseFieldArrayuseControlleruseStoreuseSelectoruseDispatchuseSWRuseQueryuseMutationuseInfiniteQueryuseFormuseFieldArrayuseControlleruseStoreuseSelectoruseDispatch

useDeferredValueuseSyncExternalStoreuseImperativeHandleuseOptimisticuseActionStateuseFormStatususeMediaQueryuseDebounceuseVirtualizeruseLocalStorageuseDeferredValueuseSyncExternalStoreuseImperativeHandleuseOptimisticuseActionStateuseFormStatususeMediaQueryuseDebounceuseVirtualizeruseLocalStorage

Hooks accumulate with features. Their logic stays tied to React. Wiring them makes components larger, tightly coupled, and difficult to trace.

What Expressive adds

React renders your app.
MVC keeps it organized.

Expressive MVC is a model layer for your app. It gives data, async and side effects a home away from display logic. Components stay simple and behavior easy to read, write and debug.

Smaller components

Focus on the display logic, not coordinating features.

Separated concerns

Break up features so growth isn't tech debt.

Less Ceremony

Normal logic, without the factories and wrappers.

Higher Clarity

Review agent output with confidence, not gymnastics.

For local state

The same logic. Half the noise.

Say you want a reusable, component-owned useFooBarBaz that re-renders on change. Examples have same state and behavior. Expressive gets there with less code.

FooBarBazExpressive

import React from 'react';import State from '@expressive/react';class FooBarBaz extends State {  foo = 0;  bar = 'hello';  baz = true;  bump() {    this.foo++;  }}function Widget() {  const { foo, bar, baz, bump } = FooBarBaz.use();  return (    <button onClick={bump}>      {foo} · {bar} · {String(baz)}    </button>  );}

~86 tokens

import React, { useState, useCallback } from 'react';function useFooBarBaz() {  const [foo, setFoo] = useState(0);  const [bar, setBar] = useState('hello');  const [baz, setBaz] = useState(true);  const bump = useCallback(() => setFoo(f => f + 1), []);  return { foo, bar, baz, bump, setFoo, setBar, setBaz };}function Widget() {  const { foo, bar, baz, bump } = useFooBarBaz();  return (    <button onClick={bump}>      {foo} · {bar} · {String(baz)}    </button>  );}

~122 tokens

import React from 'react';import State from '@expressive/react';class FooBarBaz extends State {  foo = 0;  bar = 'hello';  baz = true;  bump() {    this.foo++;  }}function Widget() {  const { foo, bar, baz, bump } = FooBarBaz.use();  return (    <button onClick={bump}>      {foo} · {bar} · {String(baz)}    </button>  );}

~86 tokens

Edit in Playground →

With MVC, destructuring is your dependency list. Just read a field to subscribe to it. No setters, dependency arrays, or memoized callbacks.

Classes are their own context.

Wrap a subtree in <Provider for={X}> - components inside need only X.get() to interact with the nearest instance. Fully typed, zero boilerplate.

import React from 'react';import State, { Provider } from '@expressive/react';class Theme extends State {  mode = 'light';  toggle() {    this.mode = this.mode === 'light' ? 'dark' : 'light';  }}const Toggle = () => {  const { mode, toggle } = Theme.get();  return <button onClick={toggle}>{mode} mode</button>;}const App = () => (  <Provider for={Theme}>    <Toggle />  </Provider>);

Edit in Playground →

light mode

No createContext<T>, null default, missing-provider guard to write and maintain. Every app needs this eventually. Jotai's Provider will wrap a whole atom store, MobX leaves it to you.

Component is renderable State.

Component is for self-contained (or extensible) display logic. Fields drive getters and render() directly - destructure this as you would use hook.

A Component provides itself too, accessible to children without prop drilling.

import React from 'react';import { Component } from '@expressive/react';class TipCalculator extends Component {  bill = 50;  tipPercent = 18;  get tip() {    return (this.bill * this.tipPercent) / 100;  }  get total() {    return this.bill + this.tip;  }  render() {    const { bill, tipPercent, tip, total } = this;    return (      <div>        <input type="number" value={bill}          onFocus={(e) => e.currentTarget.select()}          onChange={(e) => (this.bill = +e.target.value)}        />        <input type="range" min={0} max={30} value={tipPercent}          onChange={(e) => (this.tipPercent = +e.target.value)}        />        <p>          Tip {tip.toFixed(2)} · Total {total.toFixed(2)}        </p>      </div>    );  }}

$18%tip 9.00 · total 59.00

Edit in Playground →

Batteries (and charger) included.

Rails for your React app.

MVC covers stateful behavior you normally need a library for. Build forms, tables, and modals on the same foundation. The only opinions are your own.

With strong fundamentals, you stop reaching for

swrreact-error-boundaryimmeruse-context-selectorformikuse-local-storagereact-queryreact-hook-formusehooks-tsuse-debounce

Better architecture, better output.

Clear conventions mean a good feature looks the same, whether written by you, your team, or an agent. AI-generated code stays readable and high quality.

Dense business logic

State, derived values, async, and lifecycle live together. Composition helps separate concerns into readable chunks.

Type-safe as a rule

Classes pair naturally with TypeScript and JSDoc, so editors surface types and intent where the work is.

Less to trace when things break

No dependency arrays, stale closures, or complicated interactions. A fix starts at the class, not a hunt through wiring.

Class instances are just objects

The instance is the source of truth. Log it, assert on it, or bind it to window to inspect directly.

The basics, built right in.

Components customized by subclass

A base owns structure and behavior; PascalCase subcomponents are seams a subclass overrides for appearance. Your own behavior-complete widgets - Table, Toast, Picker - all without config soup or shadcn.

import { Component } from '@expressive/react';// A behavior-complete base: owns data and selection,// leaves appearance to overrideable subcomponents.class Picker extends Component {  items = [] as string[];  selected = 0;  choose(index: number) {    this.selected = index;  }  // A visual seam - override the look, keep the wiring.  Item({ index }: { index: number }) {    return <>{this.items[index]}</>;  }  render() {    return (      <ul>        {this.items.map((item, i) => (          <li key={item} onClick={() => this.choose(i)}>            <this.Item index={i} />          </li>        ))}      </ul>    );  }}// Subclass fills in appearance; behavior is inherited.class FruitPicker extends Picker {  items = ['Apple', 'Banana', 'Cherry'];  Item({ index }: { index: number }) {    const active = index === this.selected;    return <>{active ? '🍎' : '🍏'} {this.items[index]}</>;  }}

Edit in Playground →

Async without ceremony

Accessing set(async) suspends until it resolves. A Component can define its own fallback and even error boundary via catch() - no isPending, no thunks.

import { Component, set } from '@expressive/react';class Profile extends Component {  fallback = <p>Loading...</p>;  user = set(async () => {    const res = await fetch('/api/user/1');    if (!res.ok)      throw new Error('Could not find the user.');    const { first, last } = await res.json();    return first + " " + last;  });  async catch(error: Error) {    this.fallback = <p>{error.message}</p>;  }  render() {    return <h1>Hello {this.user.name}!</h1>;  }}const App = () => <Profile />;

Edit in Playground →

A layer, not a leap.

Start with the feature already hurting and leave the rest alone. MVC works with the React app and tools you already have.

Incremental adoption

No big-bang rewrite. Adopt it one feature at a time and leave simple useState calls alone. A tool for complexity, not a replacement.

Keep what works

MVC doesn't need to replace every hook or specialist library. Keep the tools that still earn their place.

Portable state

Headless State classes don't depend on a component tree. Move them, test them, or use the framework-agnostic core.

No build-time magic

MVC adds no compiler, code generation, or custom syntax. What you write is what runs.

Move just one feature out of hooks.

Start with one, leave the rest. See how it feels.

Get Started View Docs

The agent skill gives your coding agent the full API and best practices.

Managed state for ReactMore application,for less code.

React has gotten complicated.

React renders your app.MVC keeps it organized.

Smaller components

Separated concerns

Less Ceremony

Higher Clarity

The same logic. Half the noise.

Classes are their own context.

Component is renderable State.

Rails for your React app.

Better architecture, better output.

Dense business logic

Type-safe as a rule

Less to trace when things break

Class instances are just objects

The basics, built right in.

Components customized by subclass

Async without ceremony

A layer, not a leap.

Incremental adoption

Keep what works

Portable state

No build-time magic

Move just one feature out of hooks.

The basics, built right in.

Components customized by subclass

Async without ceremony

React renders your app.
MVC keeps it organized.