mobx-bonsai

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

> ### Full documentation can be found on the site:
>
> ## mobx-bonsai.js.org

Introduction

A fast lightweight alternative to mobx-state-tree that combines the simplicity of plain data with the power of MobX reactivity. Unlike mobx-state-tree, 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—getters and MobX actions like embracing a more functional approach, thus improving performance and memory usage. Your application state remains a simple, observable plain object. Instead of modifying the nodes directly with object methods, you work with pure functions that inspect or update the state, ensuring clarity and reproducibility.

By using mobx-bonsai, you get:

- Lightweight and fast: Optimized for performance while consuming less memory.
- Functional accessors: Interaction is achieved through pure functions, keeping state manipulation decoupled from the data structure.
- Immutable snapshots: Effortlessly capture a stable state of your tree at any point.
- MobX Integration: Since mobx-bonsai uses MobX behind the scenes, it integrates seamlessly with mobx and mobx-react.
- Seamless Y.js binding: Two-way binding between Y.js state trees and mobx-bonsai reactive trees available via the mobx-bonsai-yjs package.

$3

Core package:

> npm install mobx-bonsai

> yarn add mobx-bonsai

> pnpm add mobx-bonsai

For Y.js integration (optional):

> npm install mobx-bonsai-yjs yjs

> yarn add mobx-bonsai-yjs yjs

> pnpm add mobx-bonsai-yjs yjs