{"id":13452450,"url":"https://github.com/xaviergonz/mobx-keystone","last_synced_at":"2025-05-14T12:11:20.399Z","repository":{"id":38802225,"uuid":"186887617","full_name":"xaviergonz/mobx-keystone","owner":"xaviergonz","description":"A MobX powered state management solution based on data trees with first class support for Typescript, support for snapshots, patches and much more","archived":false,"fork":false,"pushed_at":"2025-05-01T17:23:32.000Z","size":28224,"stargazers_count":584,"open_issues_count":58,"forks_count":26,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-05-07T13:35:33.853Z","etag":null,"topics":["data-trees","frp","functional-reactive-programming","immutability","mobx","mobx-keystone","mobx-state-tree","mutability","reactive","snapshots","state-management","state-tree"],"latest_commit_sha":null,"homepage":"https://mobx-keystone.js.org","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xaviergonz.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-05-15T19:09:44.000Z","updated_at":"2025-05-04T10:15:22.000Z","dependencies_parsed_at":"2023-10-14T16:28:09.668Z","dependency_job_id":"f86a7cde-35b0-4ebf-89fc-2e145a5ceb2a","html_url":"https://github.com/xaviergonz/mobx-keystone","commit_stats":{"total_commits":1243,"total_committers":17,"mean_commits":73.11764705882354,"dds":"0.15687851971037814","last_synced_commit":"56948ce702eea4bf4bba80cd127cb8effeba53aa"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xaviergonz%2Fmobx-keystone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xaviergonz%2Fmobx-keystone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xaviergonz%2Fmobx-keystone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xaviergonz%2Fmobx-keystone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xaviergonz","download_url":"https://codeload.github.com/xaviergonz/mobx-keystone/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254140763,"owners_count":22021219,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["data-trees","frp","functional-reactive-programming","immutability","mobx","mobx-keystone","mobx-state-tree","mutability","reactive","snapshots","state-management","state-tree"],"created_at":"2024-07-31T07:01:24.466Z","updated_at":"2025-05-14T12:11:20.371Z","avatar_url":"https://github.com/xaviergonz.png","language":"TypeScript","funding_links":[],"categories":["cross framework","Awesome MobX","List","TypeScript"],"sub_categories":["Related projects and utilities"],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./apps/site/static/img/logo.png\" height=\"128\" /\u003e\n  \u003ch1 align=\"center\"\u003emobx-keystone\u003c/h1\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ci\u003eA MobX powered state management solution based on data trees with first-class support for TypeScript, snapshots, patches and much more\u003c/i\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca aria-label=\"NPM version\" href=\"https://www.npmjs.com/package/mobx-keystone\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/mobx-keystone.svg?style=for-the-badge\u0026logo=npm\u0026labelColor=333\" /\u003e\n  \u003c/a\u003e\n  \u003ca aria-label=\"License\" href=\"./LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/l/mobx-keystone.svg?style=for-the-badge\u0026labelColor=333\" /\u003e\n  \u003c/a\u003e\n  \u003ca aria-label=\"Types\" href=\"./packages/lib/tsconfig.json\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/types/mobx-keystone.svg?style=for-the-badge\u0026logo=typescript\u0026labelColor=333\" /\u003e\n  \u003c/a\u003e\n  \u003cbr /\u003e\n  \u003ca aria-label=\"CI\" href=\"https://github.com/xaviergonz/mobx-keystone/actions/workflows/main.yml\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/actions/workflow/status/xaviergonz/mobx-keystone/main.yml?branch=master\u0026label=CI\u0026logo=github\u0026style=for-the-badge\u0026labelColor=333\" /\u003e\n  \u003c/a\u003e\n  \u003ca aria-label=\"Codecov\" href=\"https://codecov.io/gh/xaviergonz/mobx-keystone\"\u003e\n    \u003cimg src=\"https://img.shields.io/codecov/c/github/xaviergonz/mobx-keystone?token=6MLRFUBK8V\u0026label=codecov\u0026logo=codecov\u0026style=for-the-badge\u0026labelColor=333\" /\u003e\n  \u003c/a\u003e\n  \u003ca aria-label=\"Netlify Status\" href=\"https://app.netlify.com/sites/mobx-keystone/deploys\"\u003e\n    \u003cimg src=\"https://img.shields.io/netlify/c5f60bcb-c1ff-4d04-ad14-1fc34ddbb429?label=netlify\u0026logo=netlify\u0026style=for-the-badge\u0026labelColor=333\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003e ### Full documentation can be found on the site:\n\u003e\n\u003e ## [mobx-keystone.js.org](https://mobx-keystone.js.org)\n\n#### New! Y.js bindings for `mobx-keystone` are now available in the `mobx-keystone-yjs` package as well as a working example in the examples section of the online docs.\n\n## Introduction\n\n`mobx-keystone` is a state container that combines the _simplicity and ease of mutable data_ with the _traceability of immutable data_ and the _reactiveness and performance of observable data_, all with a fully compatible TypeScript syntax.\n\nSimply put, it tries to combine the best features of both immutability (transactionality, traceability and composition) and mutability (discoverability, co-location and encapsulation) based approaches to state management; everything to provide the best developer experience possible.\nUnlike MobX itself, `mobx-keystone` is very opinionated about how data should be structured and updated.\nThis makes it possible to solve many common problems out of the box.\n\nCentral in `mobx-keystone` is the concept of a _living tree_. The tree consists of mutable, but strictly protected objects (models, arrays and plain objects).\nFrom this living tree, immutable, structurally shared snapshots are automatically generated.\n\nAnother core design goal of `mobx-keystone` is to offer a great TypeScript syntax out of the box, be it for models (and other kinds of data such as plain objects and arrays) or for its generated snapshots.\n\nTo see some code and get a glimpse of how it works check the [Todo List Example](https://mobx-keystone.js.org/examples/todo-list).\n\nBecause state trees are living, mutable models, actions are straightforward to write; just modify local instance properties where appropriate. It is not necessary to produce a new state tree yourself, `mobx-keystone`'s snapshot functionality will derive one for you automatically.\n\nAlthough mutable sounds scary to some, fear not, actions have many interesting properties.\nBy default trees can only be modified by using an action that belongs to the same subtree.\nFurthermore, actions are replayable and can be used to distribute changes.\n\nMoreover, because changes can be detected on a fine-grained level, JSON patches are supported out of the box.\nSimply subscribing to the patch stream of a tree is another way to sync diffs with, for example, back-end servers or other clients.\n\nSince `mobx-keystone` uses MobX behind the scenes, it integrates seamlessly with [`mobx`](https://mobx.js.org) and [`mobx-react`](https://github.com/mobxjs/mobx-react).\nEven cooler, because it supports snapshots, action middlewares and replayable actions out of the box, it is possible to replace a Redux store and reducer with a MobX data model.\nThis makes it possible to connect the Redux devtools to `mobx-keystone`.\n\nLike React, `mobx-keystone` consists of composable components, called _models_, which capture small pieces of state. They are instantiated from props and after that manage and protect their own internal state (using actions). Moreover, when applying snapshots, tree nodes are reconciled as much as possible.\n\n## Requirements\n\nThis library requires a more or less modern JavaScript environment to work, namely one with support for:\n\n- MobX 6, 5, or 4 (with its gotchas)\n- Proxies\n- Symbols\n- WeakMap/WeakSet\n\nIn other words, it should work on mostly anything except _it won't work in Internet Explorer_.\n\nIf you are using TypeScript, then version \u003e= 4.2.0 is recommended, though it _might_ work with older versions.\n\n## Installation\n\n\u003e `npm install mobx-keystone`\n\n\u003e `yarn add mobx-keystone`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxaviergonz%2Fmobx-keystone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxaviergonz%2Fmobx-keystone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxaviergonz%2Fmobx-keystone/lists"}