Skip to content
Tools Without AI

Prefer toolswithoutai.com in Google Search so our tools and guides show up more often. Google has to confirm it — we cannot set this for you.

Browser engineering · · updated

Client-side JSON to CSV and YAML without a backend ETL job

In-browser ETL is a transformation of structures already in RAM. Nested JSON becomes row vectors by path flattening. Papaparse unparses RFC 4180 CSV. js-yaml dumps maps without Node streams. The records never become an HTTP body. That is the architecture behind JSON to CSV, JSON to YAML, and the CSV editor.

What is a transformation vector here?

A row vector is a flat map from column name to cell. Flattening walks objects and arrays, joining keys with dots or brackets (a.b[0].c). Key collisions happen when one record has a.b as a string and another as an object. Pick a convention and document it; do not silently drop fields. JSON to CSV is this walk plus Papaparse unparse.

The inverse, CSV to JSON, builds objects from a header row. It cannot restore nested structure you flattened away. If you still need a grid, stay in the CSV editor as described in edit CSV locally.

How does Papaparse unparse without Node streams?

Papa.unparse(rows, { quotes: true }) emits RFC 4180: commas, CRLF, doubled quotes inside fields. Delimiter sniffing on parse matters for European semicolons. There is no fs.WriteStream; you build a string or Blob and download it. That Blob is a File API object — same family as large-file slicing.

const rows = records.map(flatten);
const csv = Papa.unparse(rows, { header: true });
const blob = new Blob([csv], { type: "text/csv;charset=utf-8" });

How does js-yaml differ from JSON.stringify?

YAML has anchors, tags, and dates. JSON.stringify has none of those. !!binary and !!js/undefined are footguns. For round-trips that must stay JSON-equivalent, dump with a schema that only has maps, lists, strings, numbers, and bools. JSON to YAML and YAML to JSON should refuse executable tags.

XML is a third tree with attributes. Do not shove XML through Papaparse. Use XML to JSON and the DOMParser article when the source is markup.

Why 50 MB JSON stalls the main thread

Parse, flatten, and unparse are CPU-bound. requestIdleCallback helps UI chrome, not the parse itself. Move Papa and js-yaml into a worker. The structured clone of the result can dwarf the original if you flatten poorly. Bank-scale CSVs belong in the bank statement converter path only as text, still local — see convert a statement without uploading.

When is CSV the wrong target?

Mixed types, nested comments, and JSON arrays of arrays. Excel will also eat leading zeros. Use the JSON formatter and CSV/JSON best practices when you must still ship a spreadsheet. Privacy: a customer list in CSV is personal data; minimization means the converter never receives it.

Tool loop

Pretty-print JSON → flatten to CSV → inspect in the editor → maybe YAML for config. Each hop is a download or a clipboard copy. None of the hops should be a SaaS ETL.

Worked example: API payload to a spreadsheet without Excel eating IDs

You have an array of orders with nested customer.address and string IDs that look like numbers (00123). Pretty-print in JSON formatter to see the shape. Flatten via JSON to CSV. Open the CSV editor and confirm the ID column still has leading zeros in the cell, not in Excel yet.

Export with a UTF-8 BOM if the next human will open Excel on Windows (CSV best practices). Keep a JSON copy as source of truth. If you need YAML for a config repo, JSON to YAML with executable tags disabled.

Bank files: do not run this flatten on a PDF statement by uploading it. Use bank statement to CSV as in the statement guide. Personal data in either path stays in RAM if you audit Network.

When JSON is 50 MB, parse in a worker or you will freeze scrolling. Blob.slice is for reading; JSON.parse still wants a string. NDJSON line-by-line is the escape hatch. Do not “just upload to an ETL.” Minimization applies to customer lists especially.

Frequently asked questions

Can js-yaml execute JavaScript from a document?

Default schemas historically allowed !!js/function. Disable those tags. Treat untrusted YAML like untrusted HTML — see HTML entity encoding.

Why does nested JSON become ugly CSV?

CSV is a rectangle. Nested arrays explode into columns like items.0.sku. If the shape is a tree, keep JSON and use the JSON formatter.

Will 50 MB of JSON freeze the tab?

JSON.parse is synchronous and main-thread. Use a worker, or stream NDJSON. Blob slicing helps you read the file in windows; it does not make parse cheap.