WPMozo: add-ons and tools for WordPress and Elementor
⚡ File · Client-side · No data sent to server

JSON Flatten / Unflatten

Flatten a deeply nested JSON object into dot-notation keys, or unflatten a flat key-value object back into a nested structure. Choose your delimiter, optionally flatten arrays, then copy or download the result. Everything runs in your browser.

Mode
Delimiter
Input
Output
Waiting for input… ✓ Copied!
100% private. This tool flattens and unflattens JSON entirely in your browser using native JavaScript. Nothing is uploaded or logged.

About this tool

JSON Flatten / Unflatten converts deeply nested JSON objects into a single-level key-value map, and back again. A nested object like {"user":{"address":{"city":"New York"}}} becomes the flat key user.address.city with value "New York".

When flattening is useful

  • Environment variables — most platforms accept only flat string keys, so a nested config must be flattened before it can be passed as environment variables (e.g. APP_DB_HOST).
  • Redis and key-value stores — storing each leaf value under its own key makes individual fields readable and writable without deserializing the whole document.
  • Spreadsheet imports — flat rows map cleanly to CSV columns; nested objects do not.
  • Config diffing — comparing two flat maps is far easier than comparing two nested trees.

Choosing a delimiter

  • Dot (.) — the most common convention, used by Lodash _.get, dotenv-expand, and many config libraries. Avoid it if your keys already contain dots (e.g. domain names, semver strings).
  • Slash (/) — natural for file-path or URL-style keys. Common in Kubernetes ConfigMaps and Vault secret paths.
  • Underscore (_) or double underscore (__) — safe for environment variables that cannot contain dots or slashes. Double underscore avoids ambiguity when key segments themselves contain single underscores.

Array flattening

By default, arrays are kept intact as JSON values. When "Flatten arrays" is enabled, each element is given an indexed key using bracket notation: user.tags[0], user.tags[1], and so on. This is useful when every element needs its own key, but makes unflattening harder because the bracket notation must be parsed back into array indices.

Unflattening

Unflattening reverses the process: it splits each flat key on the chosen delimiter and rebuilds the nested structure. If two keys share a prefix, they become siblings under the same parent object. Note that unflatten cannot reconstruct arrays from bracket-notation keys — those become plain objects with numeric string keys.

DiviExtended: premium Divi child themes and plugins