React state management that feels like Vue vibes in React
npm install zenbox    
You know that feeling when you write Vue code? Everything just clicks. computed values update automatically, watch lets you react to changes elegantly, and ref.value gives you a consistent way to access everything.
Then you switch to React and... where did all that magic go?
ZenBox = Code in React like Vue 💚 + Manage state like Zustand 🐻
- 💪 Powerful - All of Zustand's benefits + more
- ⚡️ Easy to Use - Where Vue's simplicity meets React's power
- 📦 Lightweight - 100 lines of core code, no bloat, just the good stuff
``ts
// Types are automatically inferred from initial state
const userStore = createStore({
name: "Del Wang",
posts: ["Hello World!"],
});
// Computed values that just work
const greeting = useComputed(() => Hey ${userStore.value.name}!);
// Watch changes like Vue
useWatch(
() => userStore.value.posts.length,
(count) => console.log(${count} posts now)`
);
If you squint, this could be Vue code. But it's React, and it works exactly like you'd expect.
This is ZenBox - where Zustand's simplicity meets Vue's joyful developer experience.
👉 Visit https://zenbox.del.wang to view the full documentation.
`shell`
npm install zenbox
- 📚 Documentation: zenbox.del.wang
- 🐛 Issues: GitHub Issues
- 💬 Discussions: GitHub Discussions
| Feature | ZenBox | Zustand |
| ------------------ | --------------------------------- | ----------------------------- |
| Learning Curve | ✅ As easy as Vue | ✅ Low |
| Vue-like Hooks | ✅ useComputed / useWatch | ❌ Not supported |store.value
| TypeScript | ✅ Auto-inference | ⚠️ Manual interfaces |
| Cross-Store | ✅ Auto tracking | ❌ Not supported |
| State Access | ✅ Unified | ⚠️ Explicit get() / set()` |
| Scoping | ✅ Built-in Provider | ❌ Global by default |
| Immer | ✅ Built-in | ⚠️ Middleware required |
| Bundle Size | < 3KB gzipped (without Immer) | < 1KB gzipped |
MIT License © 2025-PRESENT Del Wang