Introduction

mobx-bonsai

A fast lightweight alternative to MobX-State-Tree + Y.js two-way binding

🚀 Supercharged State Management for Modern Applications

Fast, type-safe, and elegantly simple reactive state management with deep MobX integration and optional Y.js two-way binding.

Overview

mobx-bonsai is a lightning-fast alternative to mobx-state-tree that combines the simplicity of plain data with the power of MobX reactivity. Unlike some state management solutions, tree nodes in mobx-bonsai are always plain data objects with no embedded methods, getters, or setters. Instead, all interactions are managed via external functions—embracing a more functional approach that dramatically improves performance and reduces memory footprint.

Why Choose mobx-bonsai? ✨

• ⚡️ Blazing Fast Performance: Optimized for performance with a significantly lower memory footprint.

• 📦 Plain Data First: Work with simple observable objects and arrays using a clean functional approach—no class-based overhead or complex inheritance patterns.

• 🔎 Best-in-class TypeScript Support: Enjoy seamless TypeScript integration with perfect type inference and zero need for complex type helpers or casting.

• 🌳 Powerful Node Type System: Define reusable node types with built-in defaults, actions, getters, and computed values—while maintaining pristine separation of concerns.

• 🧭 Tree Navigation: Easily traverse your state tree with powerful helpers like getParent, getRoot, and findChildren.

• 📸 Immutable Snapshots: Generate immutable snapshots for time-travel debugging, serialization, or React rendering optimization.

• ⚙️ Full MobX Integration: Complete compatibility with MobX reactions, computeds, and actions for building truly reactive applications.

• 👥 Real-time Collaboration Ready: Built-in two-way binding with Y.js for effortless real-time collaboration features.

Installation

# Using npm
npm install mobx-bonsai

# Using yarn
yarn add mobx-bonsai

# Using pnpm
pnpm add mobx-bonsai

Quick Example

import { node, nodeType, TNode } from 'mobx-bonsai';
import { observer } from 'mobx-react-lite';

// Define your types with TypeScript
type Todo = {
  text: string
  done: boolean
};

// Create a todo type with actions and so on
const TTodo = nodeType<Todo>()
  .getters({
    getFormattedText() {
      return `${this.done ? '✓' : '○'} ${this.text}`;
    }
  })
  .actions({
    toggle() {
      this.done = !this.done;
    }
  });

// Create a simple component
const TodoItem = observer(({ todo }: { todo: Todo }) => (
  <div onClick={() => TTodo.toggle(todo)}>
    {TTodo.getFormattedText(todo)}
  </div>
));