Global, or close to home.
Share state across your app, or isolate it with createContext. The same approach, at the right scope.
Shared React state that feels like useState. Precise subscriptions, composable selectors, and DevTools your coding agent can use.Product
React state.
Without the guesswork.
Shared state that feels like useState. Precise subscriptions,
composable selectors, and DevTools your coding agent can use.
profile.tsx
1 / 5
TSprofile.tsx
YOUR APPLICATIONOne store. Two values.
Familiar hook API TypeScript inference Global or scoped Open source · MIT
FOR YOU. AND YOUR CODING AGENT. BETA
Give your agent
runtime evidence.
Go beyond what the code should do. Inspect the state, run an action, and read back what actually changed. A shorter path from question to evidence.
Explore Agentic DevToolsA feedback loop, not a guess.
app.local / release
Release checklist
A small app. An observable state change.
Write the docs
Ship the examplesupdated
Review the release
1 of 3 complete
coding-agent / terminal
WORKFLOW PREVIEW$npx rgsh --listtodos state: {"todos":[{"text":"Write the docs","done":true},… actions: add, toggle, remove$npx rgsh state todos todos[1].done[todos] state at todos[1].done:falseRuntime inspected. Ready to act.
How the connection works
Coding agent → rgsh CLI → local WebSocket → open Chrome DevTools panel → your application. Setup requires the Chrome extension, ws as a development dependency, and the debug import before your stores are created. Keep that import out of production. The preview above is illustrative; it does not connect to an app or run shell commands.
PRECISE SUBSCRIPTIONS
One field changes.
Not everything
needs to react.
A component should subscribe to what it uses. Select a name, a theme, or a derived value. Unrelated store changes stay unrelated.
Get precise with selectorsThis is about updates from a store subscription. Components can still render for other React reasons.
TRY IT · EDIT A VALUE BELOW
Theme
Light
ProfileNameAda
useProfile(s => s.name)
ThemeLabellight
useProfile(s => s.theme)
WholeStore
useProfile()
Counts selected-value changes, not React renders.
SELECTOR COMPOSITION
const useActiveAdmins = useActiveUsers.createSelectorHook( users => users.filter(u => u.role === 'admin'), { isEqual: shallowCompare } );SELECTED → Ada, LinClick any hook ↑
CHAINABLE SELECTORS
Build on a selector.
Not on repetition.
Turn a slice into a reusable hook. Derive another hook from it. Share the same logic across components without copying the selection everywhere.
Explore selector compositionSelector hooks return values directly. Update the source store through its API. Use an equality option for derived arrays.
Small API.
Room for the real world.
Start with one store. Add structure only where your application needs it.
State that stays with you.
Add a storage key for browser persistence. Bring validation and migrations when your data evolves.
Explore persistenceActions with intention.
Give updates a name. Organize async work and domain logic without changing how components read state.
Work with actionsA few useful details.
No mystery around the small print.
Do I need a provider for global state?
No. A store created with createGlobalState lives outside the component tree. A provider is used when you intentionally choose scoped state with createContext.
What does an agent need to use the DevTools?
An agent that can execute terminal commands, a running development app, the Chrome extension with its panel open, the development debug import, and the ws dependency. The rgsh CLI works with state and actions; it is not browser automation.
Can I try the actual extension before integrating it?
Yes. The examples on this website are connected. Open an example, install the Chrome extension, open its DevTools panel, and reload that page. How to try it.
LESS CEREMONY. MORE CLARITY.
Your next store
starts here.
A familiar hook. A precise subscription. A clearer way to build.