Clean state management for ReactMore application,for less code.

Expressive MVC moves data, behavior, and lifecycle into a focused model. Components stay small, agent code stays readable, and apps remain easy to build at scale. The goal is fewer lines (and tokens) per feature, and a more pleasant DX.

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 harder to trace.

What Expressive adds

React renders your app.
MVC keeps it organized.

Expressive MVC is a model layer for React. It gives data, async and side effects a home away from display logic. React keeps doing what it's good at, while the logic behind it becomes easier to read, write, and test.

Smaller components

Components focus on rendering instead of coordinating features.

Minimal boilerplate

State classes read like normal JavaScript, even when they power complex logic and UI.

Output you can read

When an agent writes the feature, related logic stays together - easier to extend.

Separation built in

Built-in context keeps models separate without prop drilling, so growth isn't tech debt.

For local state

The same logic. Half the noise.

Say you want a reusable, component-owned useFooBarBaz that re-renders on change. Same surface everywhere - only the cost to build it differs. Higher readability (and fewer tokens).

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>  );}

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>  );}

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>  );}

Edit in Playground →

With MVC, destructuring is your dependency list. Just read a field to subscribe to it. Nothing to declare like setters, useCallback, or factory.

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 ceremony.

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}</button>;}const App = () => (  <Provider for={Theme}>    <Toggle />  </Provider>);

Edit in Playground →

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.

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

A Component is its own Provider too. Children can pull from it with zero 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 - install a specialist where it earns its place.

With strong fundamentals, you stop reaching for

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

(Artificial) Idiot-Proof.

Clear conventions mean a good feature looks the same, whether written by you, your team, or an agent. Fewer one-off decisions keep AI focused and on-task.

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.

All 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 flags, client to provide, or cache keys.

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.

Clean state management for ReactMore application,for less code.

React has gotten complicated.

React renders your app. MVC keeps it organized.

Smaller components

Minimal boilerplate

Output you can read

Separation built in

The same logic. Half the noise.

Classes are their own context.

Component is renderable State.

Rails for your React app.

(Artificial) Idiot-Proof.

Dense business logic

Type-safe as a rule

Less to trace when things break

Class instances are just objects

All 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.

All the basics, built right in.

Components customized by subclass

Async without ceremony

React renders your app.
MVC keeps it organized.