State management that just works
📚 Docs · Demos · API · Get Started
--- ```tsx import { create } from "storion/react"; const [_, useCounter] = create({ state: { count: 0 }, setup: ({ state }) => ({ inc: () => state.count++, dec: () => state.count--, }), }); function Counter() { const { count, inc } = useCounter((s, a) => ({ count: s.count, ...a })); return ; } ``` **No Provider. No boilerplate. It just works.** --- ## Features | Feature | Description | | -------------------- | -------------------------------------------- | | 🎯 **Auto-tracking** | Read state → subscribed automatically | | ⚡ **Fine-grained** | Only changed state triggers re-renders | | 🔒 **Type-safe** | Full TypeScript inference, zero manual types | | 🌊 **Async-first** | Loading states, error handling, Suspense | | 🛠️ **DevTools** | Time-travel debugging built-in | | 📦 **~4KB** | Tiny bundle, no compromises | --- ## Install ```bash npm install storion ``` --- ## Usage ### Single Store For isolated features, widgets, or prototypes: ```tsx import { create } from "storion/react"; const [_, useAuth] = create({ state: { user: null }, setup: ({ state }) => ({ login: (user) => { state.user = user; }, logout: () => { state.user = null; }, }), }); ``` ### Multiple Stores For apps with shared state (auth, cart, users): ```tsx import { store, container, StoreProvider, useStore } from "storion/react"; const authStore = store({ name: "auth", state: { user: null }, setup: ({ state }) => ({ login: (user) => { state.user = user; }, logout: () => { state.user = null; }, }), }); const cartStore = store({ name: "cart", state: { items: [] }, setup: ({ state, get }) => { const [auth] = get(authStore); // Cross-store access return { add: (item) => { state.items = [...state.items, item]; }, clear: () => { state.items = []; }, }; }, }); const app = container(); function App() { return (