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.
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
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.
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.
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.
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.
No. The flatten/unflatten happens entirely in your browser — the input never leaves your device.
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.
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.
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.