zenbox

React state management that feels like Vue + Zustand

Bring Zustand's simplicity with Vue's joyful developer experience to React

What if React felt as natural as Vue?

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?

Vue vibes in React

ZenBox = Code 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

// 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 - It's Zustand's simplicity with Vue's joyful developer experience.

Getting started

👉 Visit https://zenbox.del.wang to view the full documentation.

npm install zenbox

Community & Support

• 🐙 GitHub: idootop/ZenBox
• 🐛 Issues: GitHub Issues
• 💬 Discussions: GitHub Discussions

ZenBox vs Zustand

Feature	ZenBox	Zustand
Learning Curve	✅ As easy as Vue	✅ Low
Vue-like Hooks	✅ useComputed / useWatch	❌ Not supported
TypeScript	✅ Auto-inference	⚠️ Manual interfaces
Cross-Store	✅ Auto tracking	❌ Not supported
State Access	✅ Unified store.value	⚠️ Explicit get() / set()
Scoping	✅ Built-in Provider	❌ Global by default
Immer	✅ Built-in	⚠️ Middleware required
Bundle Size	< 3KB gzipped (without Immer)	< 1KB gzipped

License

MIT License © 2025-PRESENT Del Wang