What does JSON flattening do?

Flattening converts nested objects and arrays into a single-level object whose keys describe the path: { a: { b: [1, 2] } } becomes { 'a.b[0]': 1, 'a.b[1]': 2 }. Useful for form data libraries, env-var-style configs, or feeding values into flat key-value stores.

What syntax does the dot notation use?

Object keys use a literal dot ('.'), array indices use square-bracket index ('[0]'). Keys that contain a dot get wrapped in ["..."] so the round trip is unambiguous.

Is the round-trip lossless?

Yes for any value whose keys don't collide with the chosen delimiter syntax. Flatten then Unflatten reconstructs the original structure exactly for typical configs and API payloads.

Why would I need this?

Form libraries (React Hook Form, Formik) often work with flat key paths. Configuration systems (12-factor apps, Helm) use flat env vars. Translation files often use dot keys. Flattening makes nested JSON usable in those flat-key contexts.

Is my data sent to a server?

No. The flatten/unflatten happens entirely in your browser — the input never leaves your device.

Can I customise the delimiter?

Yes. Pick from the Delimiter dropdown: '.' (default), '_' for env-var style (A_B_C), '/' for path style, or Custom… to type any separator (e.g. '__' for double-underscore). The same delimiter is used in both directions.

What if a key contains the delimiter character?

Keys whose name contains the active delimiter get wrapped in ["..."] in flat form so the round-trip is unambiguous. Example: {"a.b": 1} flattens to {'["a.b"]': 1} when '.' is the delimiter, and unflattens back to the original.

Does flatten preserve null and empty arrays?

Yes for null leaves — they become null entries at their path. Empty objects and empty arrays are preserved as a single entry with that path so unflatten can reconstruct them exactly.

JSON Flatten / Unflatten — Free Online

Flatten nested JSON to dot-notation keys, or rebuild a flat object back into nested JSON. Bi-directional, free, browser-based.

Flatten nested JSON into a single-level object with dot-notation keys, or rebuild a flat dot-keyed object back into nested JSON. Bi-directional, browser-based, and round-trip lossless for typical payloads.

Need to inspect the result before flattening? Use JSON Formatter. Want to query specific paths instead? JSONPath Tester extracts values without flattening.

Direction

Delimiter

Input

Output

Input:0 lines · 0 BOutput:empty

How to Flatten / Unflatten JSON

Pick a direction
Flatten turns nested JSON into a single-level object with dot-notation keys; Unflatten does the reverse.
Paste your JSON
Paste a nested JSON for flatten, or a flat dot-keyed object for unflatten.
Convert and copy
Click Convert, then copy the result or use ⇄ Swap to keep working on the output.

When Do You Need to Flatten JSON?

Form libraries: React Hook Form, Formik, and similar libraries use flat key paths for form state. Flattening lets you load nested API data straight into a form.

Translation files: Many i18n libraries (next-intl, react-intl) use dot-notation keys. Flattening converts a nested locale tree into the right shape for useTranslation('user.address.city').

Env-var configs: 12-factor apps, Helm charts, and Kubernetes ConfigMaps store configuration as flat key-value pairs. Flatten a structured config to seed those.

Spreadsheets: Round-trip nested data through CSV by flattening first — every path becomes a column header.

Why Use PDFFlare for JSON Flatten?

Lossless Round-Trip

Flatten then Unflatten reconstructs the original JSON structure exactly — arrays preserve index order, object keys preserve insertion order.

Bi-Directional

One tool, both directions. Flip with a dropdown or use ⇄ Swap to feed the output back as input.

100% Browser-Based

Your data never leaves your device. Safe for production payloads or sensitive configs.

No Signup Required

Open the tool, paste, click. No account, no rate limits.

Frequently Asked Questions About JSON Flatten

JSON Formatter

Format, validate, repair JSON

JSON to TypeScript

Generate TS interfaces from JSON

JSON to CSV

Convert JSON ↔ CSV both ways

JSON to YAML

Convert JSON ↔ YAML both ways

JSON Diff

Compare two JSONs structurally

JSON Generator

Generate dummy JSON from templates