JSON Flatten / Unflatten

About this tool

JSON Flatten / Unflatten is a bidirectional converter between two representations of the same data: a nested JSON object, and a flat object whose keys encode the path to each leaf value using dot notation. Flattening turns {user: {address: {city: 'Paris'}}} into {"user.address.city": "Paris"} — useful for feature flag stores, environment variable templates, or i18n translation tables that only accept key-value maps. Unflattening reverses the process for reading dot-notation config back into application objects. The tool supports custom delimiters (for keys that contain dots), two strategies for array indexes ([n] bracket notation or n delimiter), and quoted segments for keys that contain the delimiter character. All processing runs in your browser, so secret config values stay local.

Why use it

• Bidirectional Conversion: Flatten nested JSON for systems that only accept key-value maps, then unflatten back when consuming the data — in the default bracket mode the round-trip rebuilds the original object exactly.

• Custom Delimiter: Default is dot but any single character works. Use / for path-style keys or _ when keys contain dots already, avoiding ambiguity in naming conventions.

• Array Index Strategies: Choose [n] bracket notation (a[0].b), which unflattens back to arrays, or pure delimiter style (a.0.b) for tools that strip brackets — that style is one-way, because unflatten rebuilds a.0.b as nested objects.

• Quoted Segment Support: Keys containing the delimiter character are emitted with double quotes around the segment, so flattening is reversible even with awkward source key names.

• i18n Translation Friendly: The flat dot-notation output matches the format expected by i18next, react-intl, and most translation management systems — no manual reshaping required.

• Browser-Local: Configuration values, feature flags, and translation strings stay in your browser. Nothing is uploaded, logged, or transmitted.

How to use

1. Pick a delimiter character — the default is . (dot) but you can use / for path-style or any single character.
2. Paste a nested JSON object into the input panel.
3. Click Flatten → to produce a flat key-value map where keys encode paths through the original structure.
4. Toggle Use delimiter for array indexes if you prefer a.0.b output instead of a[0].b for arrays.
5. Click ← Unflatten to reverse the process: paste a flat map and recover the nested structure.
6. Copy the result and use it directly in feature flag UIs, env files, or i18n translation pipelines.

When it helps

• Preparing nested config for a feature-flag platform like LaunchDarkly that only accepts flat key-value maps.
• Building i18n translation tables in dot notation (en.dashboard.title) from a nested locale file.
• Converting a deeply nested API response into a flat row for CSV export or analytics warehouses.
• Comparing two JSON values by key path: flatten both sides and diff the flat maps.
• Templating environment variables (DB.HOST, DB.PORT) from a nested config object.
• Restoring a nested application config from a flat .env or .properties file.

Examples

{"user":{"name":"Alice","address":{"city":"Paris","zip":"75001"}}}

{
  "user.name": "Alice",
  "user.address.city": "Paris",
  "user.address.zip": "75001"
}

{"items":[{"id":1,"qty":2},{"id":2,"qty":5}]}

{
  "items[0].id": 1,
  "items[0].qty": 2,
  "items[1].id": 2,
  "items[1].qty": 5
}

{"user.name":"Alice","user.age":30}

{
  "user": {
    "name": "Alice",
    "age": 30
  }
}

Tips

• When keys contain dots (e.g. version numbers like "1.0.0"), switch to a different delimiter like / to avoid ambiguity in flat output.
• Bracket notation a[0] is human-friendly and matches JavaScript; dot notation a.0 is friendlier for tools that strip square brackets in URLs.
• Empty objects {} and empty arrays [] flatten to themselves at the leaf — they are not lost in conversion.
• Keys that contain the delimiter are wrapped in double quotes in the flat output, so unflatten can reconstruct them correctly.
• For very deep structures, prefer flatten + diff over JSON.stringify diff — flat key paths make changes far easier to read.

Frequently Asked Questions

Glossary

Dot notation

A flat key syntax where path segments are joined by dots, e.g. user.address.city. The default flatten output format and the convention used by i18next, lodash.get, and most config systems.

Bracket notation

A path syntax that uses square brackets for array indexes, e.g. items[0].name. Preserves the visual distinction between object keys and array indexes — easier to read for mixed structures.

Path

The sequence of keys and indexes from the root of a JSON value to a leaf. Flattening converts every leaf into a key-value pair where the key is the stringified path.

Delimiter

The character used to separate path segments in flat keys. Dot is conventional but any character works as long as it does not collide with characters in the source keys.

Round-trip

The property that flatten followed by unflatten produces the original value (and vice versa) without data loss. Achieved here through quoted segments and bracket-notation arrays.

Leaf

A value in the JSON tree that is not itself an object or array — strings, numbers, booleans, and null. Flattening produces one flat key per leaf.