JSON Input

Dart Output

What does the JSON to Dart converter generate?

Every Flutter app that talks to an API ends up with model classes, and writing fromJson by hand for a deeply nested response gets old fast. Paste a sample response here and you get one Dart class per JSON object, with final fields, a named constructor using required this.field, and null safety applied: fields that were null or missing in the sample become nullable (String?) when Nullable Types is on.

With the json_serializable box ticked, the classes are annotated for json_serializable: one import and one part 'root_object.g.dart'; at the top, @JsonSerializable(explicitToJson: true) on each class, and @JsonKey(name: ...) wherever the Dart name differs from the key. Run build_runner to create the .g.dart file. Untick it and you get plain Dart instead: a factory fromJson and a toJson() written out in full, with casts like (json['total'] as num).toDouble() and lists mapped element by element. That version works with nothing but jsonDecode.

Types come from every value in the sample, not just the first array element, so mixed arrays and keys that only some objects have are handled. Integers are int (64-bit on the Dart VM, but only exact up to 2^53 when compiled to JavaScript) and anything bigger becomes num. Keys that are Dart keywords get a trailing underscore (class_), and keys starting with a digit get an n prefix, since a leading underscore would make the field library-private. It all runs in your browser.

How to use it

The output follows your typing, so just paste and look.

1

Paste a response

Paste JSON into the JSON Input panel, Upload a .json or .txt file, or click Sample. Example input:

{"subscriberId":"SUB-1001","plan":"Unlimited 5G","dataUsage":45.2,"status":"active"}

Pick the root class name in Class Name. It also sets the file name (RootObject becomes root_object.dart), which matters because the part directive has to match it. Not sure the JSON is valid? Run it through the JSON Validator first.

2

Choose json_serializable or plain Dart

The Dart Output panel shows the root class first and its nested classes below it. Toggle json_serializable and Nullable Types to see how the code changes.

3

Copy or download

Copy puts the code on your clipboard; Download saves it under the snake_case file name. In json_serializable mode, add json_annotation and json_serializable to your pubspec and run dart run build_runner build.

Where this saves time

Flutter API models

Paste the response from your orders endpoint and get Order, Customer and LineItem classes ready for Order.fromJson(jsonDecode(response.body)).

Skipping build_runner on small projects

For a prototype or a package that shouldn't depend on code generation, untick json_serializable and keep the hand-written fromJson/toJson. The Flutter JSON guide covers both approaches.

Firebase and local JSON fixtures

Export a document from Firestore or a fixture from your tests and turn it into a typed model, so widgets read user.displayName instead of data['displayName'].

Spotting nullable fields

Paste a few real records into one array. Any field that is null or absent in one of them comes out nullable, which shows you where the API isn't as strict as its docs claim.

Common Questions

Do I need json_serializable?

No. With the box unticked the output has complete fromJson and toJson methods and needs no packages. With it ticked you need json_annotation, json_serializable and build_runner, and the methods are generated into root_object.g.dart.

Why is a field called class_ or n2fa?

A JSON key can be anything, but a Dart field can't be a reserved word or start with a digit. The tool renames those fields and, in json_serializable mode, adds @JsonKey(name: 'class') so the original key still maps. In plain mode the original key is used directly in fromJson.

What type do null values get?

A field that was only ever null becomes dynamic. A field that was null in one record and a string in another becomes String? when Nullable Types is on.

How are large integers handled?

They stay int up to 64 bits, which is exact on the Dart VM. Values beyond that become num. If your app is compiled to the web, remember that numbers past 2^53 lose precision there; keep big IDs as strings in the API if you can.

What if my JSON root is an array?

The objects inside it become the root class, and a comment shows the List<RootObject> to decode into. A root that is null, a string or an array of plain values produces a short message instead of code.

Is my JSON sent anywhere?

No. The classes are generated by JavaScript running on this page. Nothing is uploaded, and input is capped at 256 KB.

Other JSON Tools You Might Need

Need the same data in another language, or want to clean it up first?