How to Read a CSV File in JavaScript (Browser and Node.js)

Why Not Just Split on Commas?

A naive text.split(",") breaks the moment a field contains a comma inside quotes, a line break inside a description, or an escaped double quote. Real CSV parsing respects quoting rules described in RFC 4180.

Use a small library or the browser’s built-in APIs instead of hand-rolling a parser. Your future self will thank you.

Where You Read the CSV Matters

The right approach depends on where the code runs.

Step-by-Step: Read CSV in the Browser

This works for user-uploaded files and small fetched files.

• Add an <input type="file" accept=".csv"> to the page.
• Read the file as text (respect UTF-8).
• Pass the text to a CSV parser.
• Iterate rows or turn them into objects with headers.
• Preview or upload the parsed rows.

<input id="csv" type="file" accept=".csv" />
<script src="https://unpkg.com/papaparse@5.4.1/papaparse.min.js"></script>
<script>
  document.getElementById("csv").addEventListener("change", (e) => {
    const file = e.target.files[0];
    Papa.parse(file, {
      header: true,
      skipEmptyLines: true,
      encoding: "UTF-8",
      complete: (result) => {
        console.log(result.data);
      },
    });
  });
</script>

const res = await fetch("/data/orders.csv");
const text = await res.text();
const result = Papa.parse(text, { header: true, skipEmptyLines: true });
console.log(result.data.slice(0, 5));

Step-by-Step: Read CSV in Node.js

For anything larger than a small config file, use a streaming parser.

• Install a CSV library (csv-parse, papaparse, fast-csv).
• Read the file as a stream to keep memory low.
• Pipe through the CSV parser.
• Consume rows as they arrive.

import fs from "node:fs";
import { parse } from "csv-parse";

fs.createReadStream("orders.csv")
  .pipe(parse({ columns: true, skip_empty_lines: true }))
  .on("data", (row) => {
    // process one row at a time
  })
  .on("end", () => {
    console.log("done");
  });

import fs from "node:fs";
import { parse } from "csv-parse/sync";

const text = fs.readFileSync("small.csv", "utf8");
const rows = parse(text, { columns: true, skip_empty_lines: true });
console.log(rows[0]);

Handling Encoding

UTF-8 is the default assumption. When you know the file is a legacy encoding (Windows-1252, etc.), decode bytes explicitly instead of relying on the browser default.

const buffer = await file.arrayBuffer();
const text = new TextDecoder("windows-1252").decode(buffer);
const rows = Papa.parse(text, { header: true }).data;

Real-World Examples

These are common patterns from real apps.

Common Mistakes

Skip these to keep parsing robust.

• Using text.split(",") for anything beyond toy inputs.
• Assuming the browser will pick the right encoding.
• Reading a 500 MB CSV into memory instead of streaming.
• Ignoring the BOM at the start of a UTF-8 file.
• Treating every value as a number—keep IDs as strings.

Best Practices

Small habits pay off.

• Prefer a library over a regex.
• Stream large files.
• Preserve string types for IDs.
• Handle encoding explicitly.
• Validate row shape and required columns.
• For quick previews, the Online CSV Editor is faster than writing throwaway code.

Why Use Convert CSV Online?

Sometimes you just want to see the CSV without writing code. Convert CSV Online is free, browser-based, and requires no account for everyday conversions. Preview in the Online CSV Editor, or convert to JSON/Excel/SQL directly. Client-side workflows work on Windows, macOS, and Linux browsers.

Conclusion

Reading CSV in JavaScript is a two-liner with the right library and a lot of pain without one. Choose FileReader + a parser in the browser and streams in Node.js.