\n\n> ### Full documentation can be found on the site:\n>\n> ## [mobx-keystone.js.org](https://mobx-keystone.js.org)\n\nCollaborative editing is available through the [`mobx-keystone-yjs`](https://mobx-keystone.js.org/integrations/yjs-binding) and [`mobx-keystone-loro`](https://mobx-keystone.js.org/integrations/loro-binding) CRDT bindings, with complete examples in the online docs.\n\n## Introduction\n\n`mobx-keystone` helps you build complex client-side apps with a single source of truth, mutable model code, and immutable traceability built in.\nYou write straightforward actions and computed values, while the library gives you snapshots, patches, undo/redo, and runtime protection on top.\n\nYou can think of it as a TypeScript-first model layer on top of MobX that scales better as your domain grows.\n\n### Quick links\n\n- [Installation](https://mobx-keystone.js.org/installation)\n- [Getting Started](https://mobx-keystone.js.org/getting-started)\n- [Class Models](https://mobx-keystone.js.org/class-models)\n- [Todo List Example](https://mobx-keystone.js.org/examples/todo-list)\n- [MST Migration Guide](https://mobx-keystone.js.org/mst-migration-guide)\n- [API docs](https://mobx-keystone.js.org/api/)\n\n### Quick glance\n\n```ts\nimport { computed } from \"mobx\"\nimport { Model, model, modelAction, prop, registerRootStore } from \"mobx-keystone\"\n\n@model(\"todo/Todo\")\nclass Todo extends Model({\n text: prop(\"\"),\n done: prop(false),\n}) {\n @modelAction\n toggle() {\n this.done = !this.done\n }\n}\n\n@model(\"todo/Store\")\nclass TodoStore extends Model({\n todos: prop(() => []),\n}) {\n @computed\n get pendingCount() {\n return this.todos.filter((t) => !t.done).length\n }\n\n @modelAction\n addTodo(text: string) {\n this.todos.push(new Todo({ text }))\n }\n}\n\nconst store = new TodoStore({})\nregisterRootStore(store)\n```\n\n### Why teams choose mobx-keystone\n\n- Mutable action code with protected updates, so state changes stay explicit and safe.\n- Runtime snapshots and JSON patches for persistence, sync, replay, and debugging.\n- Built-in primitives for references, transactions, action middlewares, and undo/redo.\n- Strong TypeScript inference for models, snapshots, and actions.\n- Composable domain models that stay maintainable as app complexity grows.\n- Seamless integration with MobX and `mobx-react-lite`.\n\n### What users are saying\n\n> \"I've never been so in love with a tool. [...] In my eyes it is the perfect state management tool for TS/React projects. [...] Building complex clientside apps has never been so easy and fun for me.\"\n>\n> - [@finallyblueskies](https://github.com/finallyblueskies), [#538](https://github.com/xaviergonz/mobx-keystone/issues/538)\n\n> \"I'm absolutely loving this project. [...] It's taken all the best bits from mobx and mobx-state-tree and put them into a single package that's a joy to work with. [...] You've literally thought of everything!\"\n>\n> - [@robclouth](https://github.com/robclouth), [#146](https://github.com/xaviergonz/mobx-keystone/issues/146)\n\n### How it works\n\nAt the center of `mobx-keystone` is a _living tree_ of mutable but strictly protected models, arrays, and plain objects.\nYou update state through model actions, and immutable structurally shared snapshots are derived automatically.\n\nThis gives you mutability where it helps developer experience, plus immutable traceability where it helps reliability.\n\nTrees can only be modified by actions that belong to the same subtree.\nActions are replayable and can be distributed, and fine-grained changes can be observed as JSON patches.\n\nBecause `mobx-keystone` uses MobX behind the scenes, it integrates naturally with [`mobx`](https://mobx.js.org) and [`mobx-react-lite`](https://github.com/mobxjs/mobx/tree/main/packages/mobx-react-lite).\nThe snapshot and middleware system also makes it possible to replace a Redux reducer/store pair with model-driven state and connect Redux devtools.\n\n`mobx-keystone` consists of composable _models_ that capture domain state and behavior together.\nModel instances are created from props, protect their own updates, and reconcile efficiently when applying snapshots.\n\n## Requirements\n\nThis library requires a modern JavaScript environment with support for:\n\n- MobX 7, 6, 5 (or 4 with its gotchas)\n- Proxies\n- Symbols\n- WeakMap/WeakSet\n\nIn practice, this covers current browsers and Node.js releases, but not Internet Explorer.\n\nWhen using TypeScript, version 5.4 or newer is required. Legacy decorators remain supported by `mobx-keystone`; see the [installation guide](https://mobx-keystone.js.org/installation) for the required compiler configuration and the MobX 7 compatibility note.\n\n## Installation\n\n> `npm install mobx mobx-keystone`\n\n> `yarn add mobx mobx-keystone`\n\n> `pnpm add mobx mobx-keystone`\n\n`mobx` is a peer dependency and must be installed alongside `mobx-keystone`.\n","readmeFilename":"README.md"}
![\"mobx-keystone\"](\"./apps/site/static/img/logo-dark.png\"){kind=logo}
\n ![](\"https://img.shields.io/npm/v/mobx-keystone.svg?style=for-the-badge&logo=npm&labelColor=333\")
\n \n \n ![](\"https://img.shields.io/npm/l/mobx-keystone.svg?style=for-the-badge&labelColor=333\")
\n \n \n ![](\"https://img.shields.io/npm/types/mobx-keystone.svg?style=for-the-badge&logo=typescript&labelColor=333\")
\n \n ![](\"https://img.shields.io/github/actions/workflow/status/xaviergonz/mobx-keystone/main.yml?branch=master&label=CI&logo=github&style=for-the-badge&labelColor=333\")
![](\"https://img.shields.io/codecov/c/github/xaviergonz/mobx-keystone?token=6MLRFUBK8V&label=codecov&logo=codecov&style=for-the-badge&labelColor=333\")
![](\"https://img.shields.io/netlify/c5f60bcb-c1ff-4d04-ad14-1fc34ddbb429?label=netlify&logo=netlify&style=for-the-badge&labelColor=333\")