Installation

yarn

yarn add mobx-keystone

pnpm

pnpm add mobx-keystone

npm

npm install --save mobx-keystone

This library requires a more or less modern JavaScript environment to work, namely one with support for:

• MobX 6, 5, or 4 (with its gotchas)
• Proxies
• Symbols
• WeakMap/WeakSet

In other words, it should work on mostly anything except it won't work in Internet Explorer.

If you are using TypeScript:

• Version 5.0+ is recommended (standard decorators).
• Legacy decorators are also supported (experimentalDecorators: true).

Transpiler configuration

This library uses JavaScript decorators and class properties.

Standard decorators

Use this mode if you are on TypeScript 5+ and want standard decorators. For Babel, ensure class static blocks are transformed (for example via @babel/preset-env targets, or by adding @babel/plugin-transform-class-static-block).

TypeScript

tsconfig.json

{
  "compilerOptions": {
    "experimentalDecorators": false,
    "useDefineForClassFields": true
  }
}

Babel

babel.config.json

{
  "presets": [
    ["@babel/preset-typescript", { "allowDeclareFields": true }], // if using TypeScript
    ["@babel/preset-env"]
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "version": "2023-11" }],
    ["@babel/plugin-proposal-class-properties", { "loose": false }]
  ]
}

SWC

.swcrc

{
  "jsc": {
    "parser": {
      "syntax": "typescript", // or "ecmascript" for JavaScript
      "decorators": true
    },
    "transform": {
      "decoratorVersion": "2022-03",
      "useDefineForClassFields": true
    },
    "loose": false
  }
}

Legacy decorators

Use this mode if your project is on legacy decorators (experimentalDecorators: true).

TypeScript

tsconfig.json

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "useDefineForClassFields": true
  }
}

Babel

babel.config.json

{
  "presets": [
    ["@babel/preset-typescript", { "allowDeclareFields": true }] // if using TypeScript
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "version": "legacy" }],
    ["@babel/plugin-proposal-class-properties", { "loose": false }]
  ]
}

SWC

.swcrc

{
  "jsc": {
    "parser": {
      "syntax": "typescript", // or "ecmascript" for JavaScript
      "decorators": true
    },
    "transform": {
      "legacyDecorator": true // required for JavaScript, optional for TypeScript
    },
    "loose": false
  }
}