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.

Installation

Core package:

npm install mobx-bonsai

yarn add mobx-bonsai

For Y.js integration (optional):

npm install mobx-bonsai-yjs yjs

yarn add mobx-bonsai-yjs yjs