https://github.com/xaviergonz/mobx-bonsai

A fast lightweight alternative to MobX-State-Tree + Y.js two-way binding
https://github.com/xaviergonz/mobx-bonsai

mobx mobx-keystone mobx-node mobx-state-tree observable state-management yjs

Last synced: about 1 year ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/xaviergonz/mobx-bonsai
• Owner: xaviergonz
• License: mit
• Created: 2025-02-08T16:14:31.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2025-04-06T13:37:15.000Z (about 1 year ago)
• Last Synced: 2025-04-28T15:15:24.848Z (about 1 year ago)
• Topics: mobx, mobx-keystone, mobx-node, mobx-state-tree, observable, state-management, yjs
• Language: TypeScript
• Homepage: https://mobx-bonsai.js.org
• Size: 2.18 MB
• Stars: 7
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          


  

  
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](https://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`](https://mobx.js.org) and [`mobx-react`](https://github.com/mobxjs/mobx-react).

- **Seamless Y.js binding:** Two-way binding between `Y.js` state trees and `mobx-bonsai` reactive trees included.

### Installation

> `npm install mobx-bonsai`

> `yarn add mobx-bonsai`