DEV Community

Topeka Madacuana
Topeka Madacuana

Posted on

How to flatten deeply nested JSON into CSV purely in the browser (Next.js & Web Workers)

#webdev #javascript #react #nextjs

Converting complex, deeply nested JSON exports or API payloads into CSV is a daily task for many developers. However, most free online converters come with a major privacy flaw: they upload raw data to third-party servers.

When handling confidential API keys, customer database dumps, or internal system logs, uploading raw payloads to an external server isn't just risky—it often violates security compliance policies.

Here is how to solve this using Next.js and in-browser Web Workers to execute 100% client-side parsing with zero data latency and total privacy.

The Problem: Server-Side Processing vs. Main Thread Bottlenecks

Standard browser scripts process JSON on the main JavaScript thread. Parsing a 10MB+ nested JSON file directly on the UI thread freezes the user interface, causes browser lag, or crashes the tab entirely.

Sending the payload to a backend server avoids tab crashes, but introduces:

  1. Data Security Risks: Confidential logs leave your local machine.
  2. Bandwidth Limits: Upload/download bottlenecks on large files.
  3. Server Costs: High memory overhead for backend processing.

The Solution: Multi-Threaded Web Workers

By offloading recursive JSON flattening to an in-browser Web Worker, the parsing computation runs in a background thread. The main thread remains smooth and responsive, and raw data never leaves the user's browser.

Key Principles:

  1. Recursive Unwrapping: Arrays inside JSON objects are recursively unwrapped into flattened dot-notation keys (e.g., user.address.street).
  2. Worker Isolation: The main React component transfers the raw string directly to the Web Worker thread via postMessage().
  3. Streamed CSV Generation: The Worker processes keys line-by-line and returns a generated Blob URL for instant local downloading.

Free Tool Alternative

If you want a ready-to-use utility without building the Web Worker pipeline yourself, I created DataFlex Studio.

It handles nested array unwrapping, custom delimiter formatting, and schema mapping completely client-side in your browser.

  • 🔗 Live Tool: dataflexstudio.vercel.app
  • ⚡ Pre-Launch Pass: To validate initial demand, I am offering a $15 Founders' Lifetime Pass (capped at 25 units) for ad-free, unlimited batch parsing before we switch to a $5/mo tier.

Would love feedback on edge cases, giant file parsing speeds, or features you'd like added!

Top comments (0)