What is JSON to MobX State Tree Generator?

This tool converts JSON data into MobX State Tree (MST) model definitions. It automatically maps JSON types to MST types (types.string, types.number, types.boolean, types.array, types.model), generates nested models with correct ordering, and uses types.optional and types.maybeNull for proper default values.

How to Use

Set the root model name for the top-level MST model
Paste your JSON data into the input area
Click "Generate MST Models" and copy the output into your TypeScript project

Why Use This Tool?

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

Generate nested models with correct ordering (children first)

Use types.optional for required fields with sensible defaults

Use types.maybeNull for nullable fields from null JSON values

Generate types.array for JSON arrays with proper item type inference

Tips & Best Practices

Use realistic sample data — type inference depends on actual values
Null values in JSON are converted to types.maybeNull for proper null handling
Integer values use types.integer while floats use types.number
Nested objects become separate MST models that are composed into the parent model

Frequently Asked Questions

How are JSON types mapped to MST types?

JSON strings → types.string, integers → types.integer, floats → types.number, booleans → types.boolean, null → types.maybeNull(types.string), arrays → types.array(T), objects → separate types.model definitions. Required fields use types.optional with sensible defaults.

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.

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.

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.

Is my data sent to a server?

No, all processing happens entirely in your browser. Your JSON data never leaves your device.

JSON to MobX State Tree Generator