CSV to JSON Converter

Browser-only CSV-to-JSON converter. No backend, no uploads — your data never leaves the browser. Drag-drop, configurable parsing, instant preview.

Stack: Next.js 14 · TypeScript · Tailwind CSS · papaparse

Live Demo →

---

Why this exists

Most online CSV converters upload your file to a remote server. For users handling sensitive tabular data (financial records, customer lists, internal exports), that is a non-starter. This tool runs entirely client-side using the File API and papaparse. The data never leaves your browser.

Features

• Drag-drop file upload — Or click to browse. Visual feedback during drag-over.
• Configurable parse options:
  • First row as headers (toggle)
  • Custom delimiter or auto-detect
  • Skip empty lines
  • Trim whitespace from cells
• 3 output shapes:
  • Array of objects — [{col: val}, ...] (most common)
  • Array of arrays — [[h1, h2], [v1, v2], ...] (for streaming)
  • Keyed object — {key: {col: val}} (lookup-friendly)
• Field name transforms — Snake case, camelCase, kebab-case, or leave as-is.
• Indentation control — Minified, 2 spaces, or 4 spaces.
• Live preview table — First 3 rows shown as you toggle options.
• One-click copy — JSON to clipboard.
• Download as .json — Filename matches the source CSV.
• Handles files up to 50MB — Tested with real-world data sizes.

---

Quick start

npm install
npm run dev

Open http://localhost:3000 and drop a CSV.

No environment variables. No API keys. No backend.

---

How it stays browser-only

1. User drops a CSV file. The browser's File API gives us a File object — no upload occurs.
2. papaparse runs in the browser to parse the CSV. All transformation happens client-side.
3. Output is rendered in a <pre> block. Copy uses navigator.clipboard.writeText(). Download uses a Blob URL + <a download>.
4. The Vercel deployment serves only static HTML/JS/CSS — there is no API route. Nothing ever hits a server.

This makes the tool GDPR-friendly out of the box and suitable for users in regulated industries.

---

Project structure

csv-json-converter/
├── app/
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx              # Renders <Converter />
├── components/
│   ├── converter.tsx         # Main orchestrator
│   ├── file-drop.tsx         # Drag-drop zone with visual states
│   ├── options-panel.tsx     # Parse + output configuration
│   └── preview-table.tsx     # First-3-rows table view
├── lib/
│   ├── csv-parse.ts          # papaparse wrapper + output shape transforms
│   ├── types.ts              # ParseOptions, OutputShape types
│   └── utils.ts              # cn() helper
└── docs/
    └── screenshot.png        # README image

---

Design decisions

• Client-side only — The primary user benefit. Even the deployed Vercel app has no API routes.
• Live preview — Users see the parse result update as they toggle options. Makes the parse behavior tangible without trial-and-error downloads.
• Three output shapes — Different downstream tools want different formats. The keyed-object shape is great for lookup-heavy use cases.
• TypeScript types as documentation — ParseOptions and OutputShape types in lib/types.ts make the option combinations self-documenting.

---

Customization

Add a new output shape

Add a case in lib/csv-parse.ts → transformOutput(). Update the OutputShape type and the radio buttons in components/options-panel.tsx.

Add a new field name transform

Same pattern — transformFieldName() in lib/csv-parse.ts.

Increase file size limit

The 50MB limit is a safeguard against browser memory issues. Adjust MAX_FILE_SIZE in lib/csv-parse.ts. Tested up to 50MB; larger files may hang the browser.

---

Deploy

npm install -g vercel
vercel --prod

No environment variables. Pure static deploy. Live in ~20 seconds.

---

License

MIT — see LICENSE.

---

Built by

@leninug — full-stack developer focused on React, TypeScript, and privacy-first tools. Available for freelance work on Fiverr.