Steal the show with simpler state management
Caper is a React framework that makes state management as easy as a midnight heist. No more complex state machines or confusing patterns.
Caper is a React framework that makes state management as easy as a midnight heist. No more complex state machines or confusing patterns.
A better way to manage state
Manage your application state with a straightforward message-based system.
Full TypeScript support with type inference for your messages and state.
The Actor Model, Simplified
Caper brings the power of the Actor model to React, with a twist that makes it incredibly simple to use.
All events—from DOM interactions to async operations—flow through a single receive() method. This creates a clear, predictable path for all data changes in your application.
No need for complex reactive primitives. Use simple JavaScript types—strings, numbers, objects—for your state. The Actor model handles the reactivity for you.
In Caper, your UI is just another value that changes in response to state updates. You have complete control over when and how your UI renders.
A Simple Counter Example
This counter demonstrates how all events flow through a single receive() method, making state management straightforward and predictable.
type Mailbox = ['increment'] | ['decrement'];
function counter() {
const { deliver, draw } = tools<Mailbox>();
let count = 0;
return {
receive: ([name, value]: Mailbox) => {
switch(name) {
case 'increment': count++; break;
case 'decrement': count--; break;
}
const ui = (
<div>
<button onClick={deliver('increment')}>Increment</button>
<button onClick={deliver('decrement')}>Decrement</button>
<p>Count: {count}</p>
</div>
);
draw(ui);
}
};
}