CSV ↔ JSON Converter
Convert CSV spreadsheets into JSON arrays (and vice versa) instantly.
The CSV ↔ JSON Converter moves data between spreadsheet rows and JSON arrays in both directions, entirely in the browser. In CSV→JSON mode you control the Delimiter (Auto-detect, Comma, Semicolon, or Tab), whether the first row is a header, and a Pretty Print toggle for 2-space indented output. Click "Swap Direction" and the same panes become JSON→CSV, with "Include header row" replacing the header checkbox and Pretty Print dropping away — only CSV→JSON uses it.
Paste or upload (.csv or .json via the accept-filtered picker), and conversion runs automatically through a useEffect on input, mode, delimiter, header, and pretty settings. Copy and download icons sit on the output pane (toasts: "Copied to clipboard" / "File downloaded successfully") and save as converted.json or converted.csv. Failures show the exact err.message in a red box, or "An unknown error occurred during conversion." Everything uses Papa Parse locally — nothing is uploaded.
How it works
CSV→JSON calls Papa.parse(input, {header: hasHeader, skipEmptyLines: true, delimiter?}) then JSON.stringify(result.data, null, prettyPrint ? 2 : undefined). JSON→CSV does JSON.parse first, wraps non-array values as [obj] so a single object still unparse cleanly, then Papa.unparse(data, {delimiter, header}). The delimiter option "Auto-detect" leaves inference to Papa; the other three force the separator.
A useEffect re-runs conversion whenever input, mode, delimiter, header, or pretty changes — there is no Convert button. File upload reads text with FileReader (accept is .csv,text/csv or .json,application/json depending on mode), and the hidden file input resets after upload so the same file can be re-selected. "Swap Direction" moves the output back into the input for round-trips.
How to use
- Confirm the direction (default CSV→JSON) or click "Swap Direction" (ArrowLeftRight icon) to work JSON→CSV instead.
- Set "Delimiter" — Auto-detect, Comma (,), Semicolon (;), or Tab — plus the "First row is header" / "Include header row" checkbox and, for CSV→JSON, "Pretty Print".
- Paste data into "CSV Input" / "JSON Input" (placeholders "Paste your CSV data here..." / "Paste your JSON data here..."), or click "Upload CSV" / "Upload JSON".
- Conversion runs automatically via useEffect; errors appear in the red Alert box with err.message or the unknown-error fallback.
- Copy via the copy icon (title "Copy to clipboard") or download via the download icon (title "Download file") on the output pane.
- Look for toasts confirming "Copied to clipboard" or "File downloaded successfully".
- Swap again to round-trip the output back through the opposite direction.
Tips
- Pretty Print only applies to CSV→JSON (it indents with 2 spaces) — JSON→CSV ignores it entirely.
- JSON→CSV accepts a single object: it is wrapped into an array before Papa.unparse, so one record still produces a valid CSV.
- "Auto-detect" delegates delimiter inference to Papa Parse; pick Comma/Semicolon/Tab explicitly when a header row misleads detection.
- Upload resets the hidden file input afterward, so you can re-select the same file after edits.
CSV ↔ JSON Converter FAQ
Which library parses CSV?
Papa Parse — Papa.parse and Papa.unparse — used for both directions in CsvJsonConverterPage.tsx.
Does pretty print affect CSV output?
No — only CSV→JSON uses JSON.stringify(..., prettyPrint ? 2 : undefined); JSON→CSV output is plain CSV text.
What files can I upload?
accept is .csv,text/csv in CSV mode and .json,application/json in JSON mode, matching the current direction.
Why did conversion fail?
JSON→CSV throws on invalid JSON; the catch displays err.message, or "An unknown error occurred during conversion." when there is no message.
Credits
- Papa Parse — CSV parsing/unparsing for both directions in CsvJsonConverterPage.tsx