# mobxjs/mobx-state-tree

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/mobxjs-mobx-state-tree).**

7,050 stars · 636 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/mobxjs/mobx-state-tree
- Homepage: https://mobx-state-tree.js.org/
- awesome-repositories: https://awesome-repositories.com/repository/mobxjs-mobx-state-tree.md

## Topics

`hacktoberfest` `mobx` `mobx-state-tree` `mst` `observable` `redux` `snapshot` `state-management` `state-tree`

## Description

MobX State Tree is a structured, tree-based state management library for JavaScript applications that combines typed model definitions with reactive snapshots and patch-based change tracking. It provides a reactive state container with runtime and compile-time type safety, where application state is defined as a tree of typed models with collocated actions, computed views, and lifecycle hooks for predictable state mutations.

The library is built around an action-centric mutation model that encapsulates all state changes within named functions that directly modify the tree, supported by generator-based asynchronous flows that yield promises for clean async state mutations. It includes a reference and relationship system that links related models via lightweight identifier references for normalized data management, and provides immutable snapshots and JSON Patch streams that enable time-travel debugging, undo/redo patterns, and state persistence. Middleware hooks allow intercepting actions before execution for logging, modification, or cancellation.

The library supports defining structured models with typed properties, computed values, enumerations, unions, refinements, custom types, and identifier-based references for cross-tree lookups. It offers snapshot creation and application, patch recording and replay, model cloning, node destruction and detachment, and environment dependency injection. TypeScript types can be derived automatically from model definitions for compile-time safety, and the library integrates with UI frameworks by observing state changes and re-rendering components reactively.

Documentation covers model definition, action management, async flows, middleware, references, snapshots, patches, and TypeScript integration.

## Tags

### Part of an Awesome List

- [State Model Definitions](https://awesome-repositories.com/f/awesome-lists/learning/applied-type-theory/data-modeling-types/state-model-definitions.md) — Defines the core typed state models with properties, actions, and lifecycle hooks that structure the entire library. ([source](https://mobx-state-tree.js.org/API/))
- [Tree-Wide](https://awesome-repositories.com/f/awesome-lists/data/unique-identifiers/tree-wide.md) — Marks properties as immutable identifiers unique across the entire tree for reconciliation and reference resolution. ([source](https://mobx-state-tree.js.org/concepts/references))
- [Data Modeling Types](https://awesome-repositories.com/f/awesome-lists/learning/applied-type-theory/data-modeling-types.md) — Defines application state as typed models with properties and actions, enforcing runtime type safety. ([source](https://mobx-state-tree.js.org/compare/context-reducer-vs-mobx-state-tree))

### User Interface & Experience

- [Tree-Based State Containers](https://awesome-repositories.com/f/user-interface-experience/reactive-state-management-libraries/tree-based-state-containers.md) — Provides a structured, tree-based reactive state container with typed models, actions, and snapshot support.
- [Running Action Contexts](https://awesome-repositories.com/f/user-interface-experience/context-menu-construction/action-mapping/running-action-contexts.md) — Provides a built-in mechanism to retrieve the context of the currently executing action for introspection. ([source](https://mobx-state-tree.js.org/API/))
- [State Tree Node Resolvers by Path](https://awesome-repositories.com/f/user-interface-experience/visual-node-editors/area-selection/path-based-node-selection/state-tree-node-resolvers-by-path.md) — Resolves state tree nodes by their JSON path, enabling programmatic navigation and access. ([source](https://mobx-state-tree.js.org/API/))
- [Selective Re-rendering](https://awesome-repositories.com/f/user-interface-experience/selective-re-rendering.md) — Splits observer components so each re-renders only when its specific observed data changes. ([source](https://mobx-state-tree.js.org/intro/getting-started))
- [Parameterized State Views](https://awesome-repositories.com/f/user-interface-experience/state-driven-view-functions/parameterized-state-views.md) — Defines reusable, read-only parameterized views that filter or transform state data on demand. ([source](https://mobx-state-tree.js.org/intro/getting-started))
- [Model Action Call Listeners](https://awesome-repositories.com/f/user-interface-experience/user-input-processing/listener-based-action-processing/model-action-call-listeners.md) — Provides a notification system for model action invocations with serializable argument payloads. ([source](https://mobx-state-tree.js.org/concepts/actions))
- [Subtree Action Listeners](https://awesome-repositories.com/f/user-interface-experience/user-input-processing/listener-based-action-processing/subtree-action-listeners.md) — Ships a listener subscription mechanism that fires on any action invocation within a subtree. ([source](https://mobx-state-tree.js.org/API/))
- [JSON Patch Listeners](https://awesome-repositories.com/f/user-interface-experience/user-input-processing/listener-based-action-processing/subtree-action-listeners/json-patch-listeners.md) — Provides a listener that fires on every JSON Patch applied to a subtree for change tracking. ([source](https://mobx-state-tree.js.org/API/))

### Data & Databases

- [Mutation Protection](https://awesome-repositories.com/f/data-databases/data-management/state-context-management/immutable-state-containers/mutation-protection.md) — Locks models so only actions can modify state, preventing accidental direct mutations. ([source](https://mobx-state-tree.js.org/API/))
- [State Tree Model Linkers](https://awesome-repositories.com/f/data-databases/data-models/model-dependency-references/state-tree-model-linkers.md) — Links model instances via lightweight identifier references for efficient cross-entity relationships. ([source](https://mobx-state-tree.js.org/intro/getting-started))
- [State Snapshots](https://awesome-repositories.com/f/data-databases/data-snapshotting/state-snapshots.md) — Updates a model tree and all its descendants to match a previously captured plain-object snapshot. ([source](https://mobx-state-tree.js.org/concepts/snapshots))
- [Reference-Based Denormalization](https://awesome-repositories.com/f/data-databases/data-store-requirements/reference-based-denormalization.md) — Keeps data normalized internally while allowing interaction through denormalized references. ([source](https://mobx-state-tree.js.org/))
- [Reference-Based Data Normalization](https://awesome-repositories.com/f/data-databases/data-store-requirements/reference-based-denormalization/reference-based-data-normalization.md) — Links related models via lightweight identifier references for normalized data management.
- [JSON Patching](https://awesome-repositories.com/f/data-databases/json-patching.md) — Applies JSON Patch operations to model instances to modify their state. ([source](https://mobx-state-tree.js.org/API/))
- [Patch Stream Change Tracking](https://awesome-repositories.com/f/data-databases/json-patching/patch-stream-change-tracking.md) — Emits JSON Patch streams for every mutation, enabling fine-grained observation and replay of state changes.
- [State Snapshots](https://awesome-repositories.com/f/data-databases/key-value-persistence-stores/snapshot-persistence/state-snapshots.md) — Restores a model instance's state from a previously captured plain-object snapshot. ([source](https://mobx-state-tree.js.org/API/))
- [Snapshot-Based State Restoration](https://awesome-repositories.com/f/data-databases/local-state-caches/startup-state-caches/snapshot-based-state-restoration.md) — Recreates a model instance or applies a snapshot to restore a previous state. ([source](https://mobx-state-tree.js.org/intro/getting-started))
- [Application State Persistences](https://awesome-repositories.com/f/data-databases/local-state-caches/startup-state-caches/snapshot-based-state-restoration/application-state-persistences.md) — Provides snapshot and patch mechanisms for saving and restoring application state to storage backends.
- [Model Action Definitions](https://awesome-repositories.com/f/data-databases/model-action-definitions.md) — Defines custom behaviors and operational logic for data models through collocated action functions. ([source](https://mobx-state-tree.js.org/concepts/actions))
- [Collocated Action and View Definitions](https://awesome-repositories.com/f/data-databases/model-action-definitions/collocated-action-and-view-definitions.md) — Defines models with collocated actions, computed views, and lifecycle hooks for predictable state mutations.
- [Model Instantiation](https://awesome-repositories.com/f/data-databases/model-as-a-table-integrations/model-instantiation.md) — Instantiates observable state tree models from plain data, enabling reactive state management. ([source](https://cdn.jsdelivr.net/gh/mobxjs/mobx-state-tree@master/README.md))
- [State Tree Model Instance Linkers](https://awesome-repositories.com/f/data-databases/model-reference-transpilation/state-tree-model-instance-linkers.md) — Links model instances by identifier references for efficient relationships without embedding full objects. ([source](https://cdn.jsdelivr.net/gh/mobxjs/mobx-state-tree@master/README.md))
- [State Tree Reference Creators](https://awesome-repositories.com/f/data-databases/model-reference-transpilation/state-tree-reference-creators.md) — Creates identifier-based references between models for normalized data relationships within the state tree. ([source](https://mobx-state-tree.js.org/API/))
- [Class Instance to Plain Object Converters](https://awesome-repositories.com/f/data-databases/ordered-data-structures/ordered-collection-literals/object-collection-processors/object-transformation/class-instance-to-plain-object-converters.md) — Converts a model tree into an immutable plain JavaScript object for transport or serialization. ([source](https://mobx-state-tree.js.org/concepts/snapshots))
- [Identifier-Based Model Linkers](https://awesome-repositories.com/f/data-databases/relational-data-modeling/identifier-based-model-linkers.md) — Stores identifiers to link related models, enabling efficient relationships without data duplication. ([source](https://cdn.jsdelivr.net/gh/mobxjs/mobx-state-tree@master/README.md))
- [Identifier-Based Model References](https://awesome-repositories.com/f/data-databases/relationship-management/reference-link-managers/identifier-based-model-references.md) — Links related data entities across a state tree using lightweight identifier references for normalized data management.
- [Identifier-Based Model References](https://awesome-repositories.com/f/data-databases/relationship-modeling/identifier-based-model-references.md) — Links related models via lightweight identifier references for normalized data management and cross-tree lookups.
- [Custom Data Types](https://awesome-repositories.com/f/data-databases/custom-data-types.md) — Creates custom immutable types with serializable representations for values like dates or decimals. ([source](https://mobx-state-tree.js.org/API/))
- [Enumeration Types](https://awesome-repositories.com/f/data-databases/data-governance-modeling/data-modeling-schemas/data-schemas/enumeration-types.md) — Creates string-based enumeration types from a list of allowed values. ([source](https://mobx-state-tree.js.org/API/))
- [State Tree Node Detachments](https://awesome-repositories.com/f/data-databases/graph-node-deletions/detached-node-deletions/state-tree-node-detachments.md) — Ships a detach function that removes a node from its parent and turns it into an independent tree. ([source](https://mobx-state-tree.js.org/API/))
- [JSON Patch Recorders](https://awesome-repositories.com/f/data-databases/json-patching/json-patch-recorders.md) — Captures all JSON Patch operations applied to a subtree for later replay or inspection. ([source](https://mobx-state-tree.js.org/API/))
- [JSON Patch Replayers](https://awesome-repositories.com/f/data-databases/json-patching/json-patch-replayers.md) — Replays recorded JSON Patch operations onto a model to restore or modify its state. ([source](https://mobx-state-tree.js.org/concepts/patches))
- [Deep Class Instance Cloning](https://awesome-repositories.com/f/data-databases/zero-copy-cloning/deep-class-instance-cloning.md) — Creates deep independent copies of state tree nodes as new standalone trees. ([source](https://mobx-state-tree.js.org/API/))

### Development Tools & Productivity

- [Undo-Redo State History](https://awesome-repositories.com/f/development-tools-productivity/change-tracking/state-tracking-utilities/action-based-state-tracking/undo-redo-state-history.md) — Reverses applied patches to revert state changes, supporting undo/redo patterns without manual state tracking. ([source](https://mobx-state-tree.js.org/concepts/patches))
- [Time-Travel Debuggers](https://awesome-repositories.com/f/development-tools-productivity/time-travel-debuggers.md) — Records state snapshots and replays them to move forward or backward through state history. ([source](https://mobx-state-tree.js.org/intro/getting-started))

### Programming Languages & Runtimes

- [Asynchronous Generator Runners](https://awesome-repositories.com/f/programming-languages-runtimes/asynchronous-control-flows/asynchronous-generator-runners.md) — Provides utilities that execute generator functions by treating yielded promises as sequential steps. ([source](https://mobx-state-tree.js.org/concepts/async-actions))
- [Reactive State Typing](https://awesome-repositories.com/f/programming-languages-runtimes/programming-language-varieties/programming-languages/type-systems/typed-state-management/reactive-state-typing.md) — Manages application state using typed models that enforce structure and provide runtime validation without boilerplate code.
- [Generator-Based Async Flows](https://awesome-repositories.com/f/programming-languages-runtimes/promise-based-flow-control/generator-based-flow-control/generator-based-async-flows.md) — Ships generator-based async flows that yield promises for clean asynchronous state mutations.
- [Runtime Type Validation](https://awesome-repositories.com/f/programming-languages-runtimes/runtime-type-validation.md) — Checks property assignments against defined runtime types, preventing accidental data type mismatches. ([source](https://mobx-state-tree.js.org/))
- [State Tree Node Resolvers by Identifier](https://awesome-repositories.com/f/programming-languages-runtimes/type-name-assignment/type-lookups-by-name-or-index/peer-resolvers-by-identifier/state-tree-node-resolvers-by-identifier.md) — Resolves state tree nodes by their declared identifier, enabling cross-tree lookups and references. ([source](https://mobx-state-tree.js.org/API/))
- [Type Checking](https://awesome-repositories.com/f/programming-languages-runtimes/type-relationship-verification/type-checking.md) — Validates values against runtime type definitions to ensure data conforms to model schemas. ([source](https://mobx-state-tree.js.org/API/))
- [Typed Property Declarations](https://awesome-repositories.com/f/programming-languages-runtimes/user-defined-types/typed-property-declarations.md) — Declares typed properties with defaults for state models, a fundamental part of model definition. ([source](https://mobx-state-tree.js.org/intro/getting-started))
- [Lazy Type Definitions](https://awesome-repositories.com/f/programming-languages-runtimes/function-definitions/recursive-type-definitions/lazy-type-definitions.md) — Defines lazily evaluated types for recursive or circular type definitions. ([source](https://mobx-state-tree.js.org/API/))
- [Static Type Inference](https://awesome-repositories.com/f/programming-languages-runtimes/static-type-inference.md) — Infers TypeScript types from runtime type definitions to gain compile-time type safety automatically. ([source](https://mobx-state-tree.js.org/))
- [Literal Type Definitions](https://awesome-repositories.com/f/programming-languages-runtimes/string-literal-type-manipulations/string-literal-union-type-definitions/literal-type-definitions.md) — Defines types that accept only a single specific value. ([source](https://mobx-state-tree.js.org/API/))

### Software Engineering & Architecture

- [Action Interceptors](https://awesome-repositories.com/f/software-engineering-architecture/action-based-state-transitions/action-interceptors.md) — Provides action interceptors that capture and process action objects before they reach the state reducer. ([source](https://mobx-state-tree.js.org/concepts/actions))
- [Asynchronous Action Handling](https://awesome-repositories.com/f/software-engineering-architecture/action-based-state-transitions/asynchronous-action-handling.md) — Implements patterns for wrapping asynchronous operations to track pending states and manage errors during state transitions. ([source](https://mobx-state-tree.js.org/concepts/async-actions))
- [Generator-Based Async Actions](https://awesome-repositories.com/f/software-engineering-architecture/action-based-state-transitions/asynchronous-action-handling/generator-based-async-actions.md) — Defines asynchronous actions using generator functions that yield promises for clean async state mutations. ([source](https://mobx-state-tree.js.org/API/))
- [Action Dispatch Middleware](https://awesome-repositories.com/f/software-engineering-architecture/action-dispatch-middleware.md) — Provides interceptors that wrap the action dispatch process to handle side effects and logging. ([source](https://mobx-state-tree.js.org/API/))
- [Action Lifecycle Middleware](https://awesome-repositories.com/f/software-engineering-architecture/action-dispatch-middleware/action-lifecycle-middleware.md) — Hooks into action execution to log, modify, or cancel state changes for auditing, validation, or cross-cutting concerns. ([source](https://mobx-state-tree.js.org/API/))
- [Action Interception Patterns](https://awesome-repositories.com/f/software-engineering-architecture/action-interception-patterns.md) — Implements event-driven patterns that intercept and block pending actions before they execute. ([source](https://mobx-state-tree.js.org/concepts/actions))
- [Subtree Action Interceptions](https://awesome-repositories.com/f/software-engineering-architecture/action-interception-patterns/subtree-action-interceptions.md) — Provides middleware hooks to intercept actions on any subtree of the state tree. ([source](https://mobx-state-tree.js.org/concepts/middleware))
- [State Snapshots](https://awesome-repositories.com/f/software-engineering-architecture/architectural-design-patterns/state-management/persistence-and-serialization/state-serialization/state-snapshots.md) — Produces plain JSON snapshots of the entire state tree for time-travel debugging and state persistence. ([source](https://mobx-state-tree.js.org/intro/getting-started))
- [Patch Stream Change Trackings](https://awesome-repositories.com/f/software-engineering-architecture/architectural-design-patterns/state-management/persistence-and-serialization/state-serialization/state-snapshots/patch-stream-change-trackings.md) — Generates immutable snapshots and JSON Patch streams for time-travel debugging, undo/redo, and state persistence.
- [Type-Safe Model Definitions](https://awesome-repositories.com/f/software-engineering-architecture/architectural-design-patterns/state-management/state-logic-and-utilities/type-safe-state-definitions/type-safe-model-definitions.md) — Defines state shape using runtime type annotations that also generate TypeScript types for compile-time safety.
- [Reactive Computed Values](https://awesome-repositories.com/f/software-engineering-architecture/dynamic-value-computations/reactive-computed-values.md) — Declares read-only computed properties that automatically recompute when their observed dependencies change. ([source](https://mobx-state-tree.js.org/intro/getting-started))
- [State Tree Cross-Tree Reference Resolvers](https://awesome-repositories.com/f/software-engineering-architecture/external-content-handlers/external-content-inclusions/external-resource-references/specification-reference-resolvers/state-tree-cross-tree-reference-resolvers.md) — Looks up referenced nodes by identifier type across the entire state tree to link related data. ([source](https://mobx-state-tree.js.org/concepts/references))
- [Action-Driven State Mutations](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/layering-presentation/application-layer-architectures/state-management-architectures/action-reducer-architectures/action-driven-state-mutations.md) — Implements action-driven state mutations where state changes are triggered by processing discrete event objects. ([source](https://mobx-state-tree.js.org/intro/getting-started))
- [Direct Mutation Actions](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/layering-presentation/application-layer-architectures/state-management-architectures/action-reducer-architectures/action-driven-state-mutations/direct-mutation-actions.md) — Replaces reducer dispatch with callable functions that directly mutate state, simplifying state change logic. ([source](https://mobx-state-tree.js.org/compare/context-reducer-vs-mobx-state-tree))
- [State Modeling](https://awesome-repositories.com/f/software-engineering-architecture/state-modeling.md) — Defines reactive, tree-like state models with mutable but protected data for safe state management. ([source](https://mobx-state-tree.js.org/))
- [Model Type Compositions](https://awesome-repositories.com/f/software-engineering-architecture/sum-type-modeling/model-type-compositions.md) — Provides model composition as a core mechanism for building complex state models from simpler ones. ([source](https://mobx-state-tree.js.org/API/))
- [Action Replay Mechanisms](https://awesome-repositories.com/f/software-engineering-architecture/action-based-state-transitions/action-replay-mechanisms.md) — Provides systems for re-dispatching historical sequences of actions to recreate specific state transitions. ([source](https://mobx-state-tree.js.org/API/))
- [Environment Dependency Injections](https://awesome-repositories.com/f/software-engineering-architecture/dependency-injection-providers/functional-environment-injection/environment-dependency-injections.md) — Provides environment dependency injection into the state tree, accessible to all models via getEnv. ([source](https://mobx-state-tree.js.org/concepts/dependency-injection))
- [Multiple Middleware Handlers](https://awesome-repositories.com/f/software-engineering-architecture/handler-middlewares/multiple-middleware-handlers.md) — Supports attaching multiple middleware handlers to a single node for action interception. ([source](https://mobx-state-tree.js.org/concepts/middleware))
- [Immutable Data Storage](https://awesome-repositories.com/f/software-engineering-architecture/immutable-data-patterns/immutable-data-storage.md) — Stores serializable JSON values as immutable data that snapshots as-is and ignores internal changes. ([source](https://mobx-state-tree.js.org/API/))
- [State Tree Node Destructions](https://awesome-repositories.com/f/software-engineering-architecture/node-tree-data-models/state-tree-node-destructions.md) — Provides a destroy function that removes nodes from the state tree and marks them as unusable. ([source](https://mobx-state-tree.js.org/API/))
- [Observable State Management](https://awesome-repositories.com/f/software-engineering-architecture/observable-state-management.md) — Watches state tree changes and automatically re-renders components to keep the user interface in sync. ([source](https://mobx-state-tree.js.org/intro/getting-started))
- [TypeScript Type Synthesis](https://awesome-repositories.com/f/software-engineering-architecture/typescript-type-definitions/static-type-checking/typescript-type-synthesis.md) — Derives TypeScript types from model definitions for auto-completion and static analysis without manual annotations. ([source](https://mobx-state-tree.js.org/compare/context-reducer-vs-mobx-state-tree))

### Web Development

- [Time-Travel Debuggings](https://awesome-repositories.com/f/web-development/history-management/undo-redo-history/time-travel-debuggings.md) — Ships snapshot and patch streams enabling time-travel debugging and state history inspection.
- [MobX Implementations](https://awesome-repositories.com/f/web-development/observable-state-patterns/mobx-implementations.md) — Leverages MobX's observable system to automatically track dependencies and re-render only when observed data changes.
- [Change Observers](https://awesome-repositories.com/f/web-development/change-observers.md) — Triggers re-renders or snapshot listeners automatically when observed model properties are modified. ([source](https://cdn.jsdelivr.net/gh/mobxjs/mobx-state-tree@master/README.md))
- [Runtime](https://awesome-repositories.com/f/web-development/graphql-apis/type-definitions/union-types/runtime.md) — Supports defining union types that are validated at runtime within the state tree. ([source](https://mobx-state-tree.js.org/API/))
- [Side Effect Management Libraries](https://awesome-repositories.com/f/web-development/side-effect-management-libraries.md) — Manages complex asynchronous side effects directly within the state container without separate effect hooks. ([source](https://mobx-state-tree.js.org/))

### System Administration & Monitoring

- [Action Description Recorders](https://awesome-repositories.com/f/system-administration-monitoring/automation-debugging/input-action-recorders/action-description-recorders.md) — Captures all actions invoked on a subtree as serializable action call descriptions for replay. ([source](https://mobx-state-tree.js.org/API/))

### Testing & Quality Assurance

- [Snapshot Serialization Customizations](https://awesome-repositories.com/f/testing-quality-assurance/snapshot-testing/custom-snapshot-strategies/snapshot-serialization-customizations.md) — Applies custom transformations when generating or applying snapshots using a dedicated processor type. ([source](https://mobx-state-tree.js.org/concepts/snapshots))