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 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

// 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.

Getting started

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

npm install zenbox

Community & Support

• 📚 Documentation: zenbox.del.wang
• 🐛 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