Class-based state for ReactStructure withoutall the baggage.

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

import React from 'react';import { Model } from '@expressive/mvc';class Counter extends Model {  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 See Examples

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

1,457 tests · 100% coverage · 11.4 kB min+gzip · v0.91.0

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 { Model } from '@expressive/mvc';class FooBarBaz extends Model {  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

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

Vibe code you can keep.

Clear conventions mean a good feature looks the same, whether written by you, your team, or an agent. Generated code stays readable, with less to trace when things break.

Dense business logic

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

Logic and state are addressable

Every behavior has a name and a home you can point at. A fix starts at the class, not a hunt through wiring.

Type-safe as a rule

Classes pair naturally with TypeScript and JSDocs, to surface types and intent where the work is.

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.

Classes are their own context.

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

import React from 'react';import { Component, Model } from '@expressive/mvc';class Theme extends Model {  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 = () => (  <Component for={Theme}>    <Toggle />  </Component>);

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 a Model with a view.

Component extends Model for self-contained (or extensible) display logic. It's renderable in JSX. Fields drive getters and render() method 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/mvc';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 →

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/mvc';// 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/mvc';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}!</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 Model 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.

Class-based state for ReactStructure withoutall the baggage.

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.

Vibe codeVibe code you can keep.

Dense business logic

Logic and state are addressable

Type-safe as a rule

Class instances are just objects

Classes are their own context.

Component is a Model with a view.

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.

Smaller components

Separated concerns

Less Ceremony

Higher Clarity

Dense business logic

Logic and state are addressable

Type-safe as a rule

Class instances are just objects

The basics, built right in.

Components customized by subclass

Async without ceremony

Incremental adoption

Keep what works

Portable state

No build-time magic

React renders your app.
MVC keeps it organized.

Vibe code you can keep.