What does flattening JSON mean?

Flattening collapses a nested JSON structure into a single-level object where each key is the full path to a leaf value. For example, the nested object containing user then name becomes the single flat key user.name. Arrays become indexed paths such as roles[0] and roles[1]. This is handy for diffing, spreadsheets, environment variables, feature-flag stores and form libraries that expect flat keys.

What does unflattening do?

Unflattening is the reverse: it reads flat path keys like address.city or items[0] and rebuilds the full nested objects and arrays. Numeric segments inside brackets (or numeric delimiter segments when you choose that array mode) are treated as array indices, so the original structure is reconstructed.

Is the round-trip lossless?

For standard JSON it round-trips cleanly: flatten then unflatten (with the same options) returns an equivalent structure. The one nuance is empty objects and arrays, which have no leaf path. Keep them as leaf values with the empty-handling option so they survive the round-trip, or drop them if you do not need them.

Can I change the key delimiter?

Yes. The default is a dot, but you can switch to slash, underscore, dash or colon. The same delimiter is used both for flattening and for parsing keys when unflattening, so pick one that does not clash with characters already in your object keys.

How are arrays handled?

You choose. Bracket mode writes array items as items[0], items[1] and so on, which is unambiguous even if your delimiter appears in keys. Delimiter mode writes them as items.0, items.1 using your chosen delimiter, which some config systems prefer. When unflattening, bracket indices and (in delimiter mode) all-digit segments are turned back into arrays.

Is my data sent anywhere?

No. The entire conversion runs locally in your browser using JavaScript. Nothing you paste or upload is transmitted to a server, logged or stored remotely. Your last input and option choices are saved only in your own browser local storage so the tool remembers them next visit.

JSON Flatten / Unflatten

JSON Flatten / Unflatten converts deeply nested JSON into flat dot-notation keys and turns flat path keys back into nested objects and arrays. It is built for developers who need to move data between structured JSON and the many systems that expect a single level of keys: spreadsheets and CSV exports, environment-variable stores, feature-flag platforms, i18n translation files, form libraries, and config formats that index everything by path. Instead of hand-writing recursive traversal code every time, you paste your JSON, pick a direction, and get a clean, copyable result.

The two directions are exact inverses. Flattening walks every branch of your object and emits one key per leaf value, where the key is the full path to that value — user.address.city, roles[0], settings.notifications.email. Unflattening reads those path keys and rebuilds the original tree, deciding at each step whether to create an object or an array based on whether the next segment is a numeric index. Because both directions share the same delimiter and array-style options, you can flatten data, edit or diff it as a simple key/value list, then unflatten it back into the shape your application expects.

How it works

When flattening, the tool recursively descends your parsed JSON. Primitive values (strings, numbers, booleans, null) become leaves keyed by their full path. Object keys are joined with your chosen delimiter; array items are joined either as bracket indices like items[0] or with the delimiter like items.0, depending on the array-mode setting. Empty objects and empty arrays have no leaf inside them, so you can either keep them as explicit {} / [] leaf values (the default, which preserves them across a round-trip) or drop them entirely.

When unflattening, each flat key is tokenised into ordered segments. Bracket groups are split out first, then the remaining text is split on the delimiter. A segment is treated as an array index when it sits inside brackets, or — in delimiter array-mode — when it is all digits. The tool then walks those segments, creating arrays and objects on demand, and finally assigns the leaf value. The whole thing is pure client-side JavaScript: no network calls, no uploads.

Example

Start with a nested object and flatten it:

{ "user": { "name": "Ada", "roles": ["admin", "editor"] } }

becomes

{ "user.name": "Ada", "user.roles[0]": "admin", "user.roles[1]": "editor" }

Now switch to Flat to Nested, paste that flat object back in, and you recover the original structure exactly. Use the Round-trip button to do this in one click — it moves the current output into the input and flips the direction automatically, which makes it easy to verify that your data survives the conversion both ways.

Direction	Input	Output
Flatten	`{"a":{"b":1}}`	`{"a.b":1}`
Flatten (array)	`{"x":[10,20]}`	`{"x[0]":10,"x[1]":20}`
Unflatten	`{"a.b.c":true}`	`{"a":{"b":{"c":true}}}`
Unflatten (array)	`{"x[0]":10,"x[1]":20}`	`{"x":[10,20]}`

Every conversion happens in your browser — nothing is uploaded or stored on a server.