Utilities

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

  1. Confirm the direction (default CSV→JSON) or click "Swap Direction" (ArrowLeftRight icon) to work JSON→CSV instead.
  2. Set "Delimiter" — Auto-detect, Comma (,), Semicolon (;), or Tab — plus the "First row is header" / "Include header row" checkbox and, for CSV→JSON, "Pretty Print".
  3. Paste data into "CSV Input" / "JSON Input" (placeholders "Paste your CSV data here..." / "Paste your JSON data here..."), or click "Upload CSV" / "Upload JSON".
  4. Conversion runs automatically via useEffect; errors appear in the red Alert box with err.message or the unknown-error fallback.
  5. Copy via the copy icon (title "Copy to clipboard") or download via the download icon (title "Download file") on the output pane.
  6. Look for toasts confirming "Copied to clipboard" or "File downloaded successfully".
  7. 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
ShareTweet
More Utilities

Command Palette

Search for a command to run...