JSON Input

MobX State Tree Output (.ts)

What is JSON to MobX State Tree Generator?

MobX State Tree (MST) is a state management library built on top of MobX that combines the reactive power of observables with the structure and type safety of a tree-shaped data model. Every piece of application state lives in a typed tree node, and MST enforces those types at runtime — attempting to assign a string to a types.number field throws an error immediately rather than failing silently. MST models also provide built-in support for snapshots (JSON serialization), patches (incremental updates), and references (cross-node links). This tool reads a JSON sample and generates the corresponding MST model tree with types inferred from actual values: strings become types.string, integers become types.integer, floats become types.number, booleans become types.boolean, null values become types.maybeNull, arrays become types.array, and nested objects become separate composed model definitions.

How to Use

Set the root model name for the top-level MST model in the options above
Paste a representative JSON sample into the input area
Click "Generate MST Models" to produce the typed model definitions
Copy the output into your TypeScript project and install mobx-state-tree and mobx
Use the generated models with types.compose for composition or create instances with RootModel.create(snapshot)

Why Use This Tool?

Automatically map JSON types to MST types — types.string, types.number, types.integer, types.boolean

Generate nested model definitions with children-first ordering for valid TypeScript compilation

Use types.optional with sensible defaults for non-null fields so MST can create instances without requiring every value

Use types.maybeNull for nullable fields from null JSON values, allowing both the type and null

Generate types.array for JSON arrays with proper item type inference from the first element

Export the root model as the default export for easy import into your store configuration

Tips & Best Practices

Use realistic sample data — type inference depends on actual values, not key names
Null values in JSON are converted to types.maybeNull(types.string) — adjust the inner type if the field should hold a different type when not null
Integer values use types.integer while floats use types.number — MST distinguishes between them at runtime
Nested objects become separate MST models that are composed into the parent model via the model name reference
After generating, add actions and views to your models using .actions(self => ({...})) and .views(self => ({...}))

Frequently Asked Questions

How are JSON types mapped to MST types?

JSON strings map to types.string, integers to types.integer, floats to types.number, booleans to types.boolean, null to types.maybeNull(types.string), arrays to types.array(T), and objects to separate types.model definitions. Non-null fields use types.optional with sensible defaults so MST can instantiate the model without providing every value.

When should I NOT use MobX State Tree?

Avoid MST for simple state that does not benefit from type enforcement, snapshots, or patches — plain MobX observables are lighter and faster to set up. MST also adds overhead for very large collections (thousands of nodes) where the tree metadata consumes significant memory. For high-frequency updates to simple counters or flags, use MobX directly.

What is types.optional used for?

types.optional wraps a type with a default value. For example, types.optional(types.string, "") means the field defaults to an empty string if not provided. This is used for non-null fields to ensure MST can create instances without requiring every field to be specified in the snapshot.

What is types.maybeNull?

types.maybeNull(T) allows a field to be either the type T or null. This is used for fields where the JSON value was null, indicating the field can legitimately be null in your application state. The generated code uses types.maybeNull(types.string) by default for null values.

How are nested objects handled?

Nested JSON objects are converted to separate MST model definitions. They are ordered children-first, so nested models appear before the parent model that references them, ensuring valid TypeScript code. The parent model references the child by its variable name.

Is my data sent to a server?

No, all processing happens entirely in your browser. Your JSON data never leaves your device. No data is collected, logged, or transmitted to any server.

Real-world Examples

React application store from API response

Generate MST models from a user API response to create a typed, observable store for a React application.

Input

{
  "id": 1,
  "name": "Alice",
  "email": "alice@example.com",
  "isActive": true,
  "profile": {
    "bio": "Engineer",
    "avatar": "url"
  }
}

Output

import { types } from 'mobx-state-tree';

const ProfileModel = types.model('ProfileModel', {
    bio: types.optional(types.string, ''),
    avatar: types.optional(types.string, ''),
});

const RootModel = types.model('RootModel', {
    id: types.optional(types.integer, 0),
    name: types.optional(types.string, ''),
    email: types.optional(types.string, ''),
    isActive: types.optional(types.boolean, false),
    profile: ProfileModel,
});

export default RootModel;

Nullable fields with types.maybeNull

Handle a JSON payload with null values, producing types.maybeNull for fields that can be absent.