JSON to MobX-State-Tree Converter
Paste a JSON sample to instantly generate matching MobX-State-Tree types.model definitions, with nested models, arrays, and optional/nullable fields inferred automatically. Free online developer tool.
Paste JSON
MobX-State-Tree Model
MobX-State-Tree model definitions will appear here...
Free JSON to MobX-State-Tree Converter
Paste a JSON sample to instantly generate matching MobX-State-Tree (MST) types.modeldefinitions. Nested objects become their own named models, arrays become types.array, and fields that are missing or null in your sample are wrapped in types.maybe ortypes.maybeNull automatically.
How to Use It
Paste any JSON object or array into the input box, or click "Load Example" to see a sample run. The converter parses your JSON, infers a type shape from the values it finds, and generates onetypes.model per object level — nested objects are pulled out into their own model named after the parent property so the output stays readable even for deeply nested state trees.
Example
Given {"name": "Ann", "age": 30, "tags": ["a","b"], "address": {"city": "NYC", "zip": null}}, the tool generates a RootAddressModel for the nested object plus a RootModelreferencing it, with tags: types.array(types.string) andzip: types.maybeNull(types.string) reflecting exactly what was observed in the sample.
Common Use Cases
- Bootstrapping MST models for a new MobX-State-Tree store from an API response.
- Scaffolding nested models for a React Native or React app that uses MST for state.
- Checking at a glance which fields in a JSON sample should be optional or nullable in the store.
- Saving time hand-writing
types.modelboilerplate for large payloads.
FAQs
What's the difference between types.maybe and types.maybeNull in the output?
types.maybe(T) is used when a property was missing from at least one sample object (it allows undefined), while types.maybeNull(T) is used when a property was ever observed as null. A field that's both optional and nullable gets wrapped in both.
Are nested objects extracted into separate models?
Yes — every nested object becomes its own const XModel = types.model("X", {...})declaration, named after the property path, and is referenced by name from its parent model.
Is my JSON uploaded anywhere?
No — parsing and model generation happen entirely client-side in your browser. Nothing you paste is sent to a server.