CSVJetty

Get the code
CSV imports for React

Turn messy CSVs into clean records.

Give your users a simple way to upload a CSV, map its columns, and fix errors before importing.

Try the importer

The sample includes an invalid email so you can try correcting it.

Try it yourself

Upload a contacts CSV, or use the sample above.

Import your data

CSV files · up to 1,000 rows · 5 MB

  1. 1. Upload
  2. 2. Map columns
  3. 3. Review
  4. 4. Results

Choose your CSV

The first row should contain column names. Your file stays in your browser.

This demo processes your CSV in your browser. Imported records stay in memory and disappear when you refresh.

Add it to your app

Install the package, define your columns, and handle the clean records in your callback.

1. Install

npm install csvjetty @chakra-ui/react@3 @emotion/react

2. Add the importer

"use client";

import { Importer } from "csvjetty";

const columns = [
  {
    name: "name",
    label: "Full name",
    required: true,
    aliases: ["full name", "full_name"],
  },
  {
    name: "email",
    label: "Email",
    type: "email",
    required: true,
    aliases: ["email address", "email_address"],
  },
  {
    name: "company",
    label: "Company",
  },
];

export default function ImportContacts() {
  return (
    <Importer
      columns={columns}
      onData={async (rows, { fileName, rowNumbers }) => {
        // Create this endpoint in your own application.
        const response = await fetch("/api/contacts/import", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            rows,
            fileName,
            rowNumbers,
          }),
        });

        if (!response.ok) {
          throw new Error("Import failed. Please try again.");
        }

        // Return {} when all records were accepted.
        // Reject individual records with:
        // { errors: [{ row: 2, message: "Email already exists" }] }
        // Use original record numbers from rowNumbers.
        return response.json();
      }}
    />
  );
}

What’s included

CSV upload, automatic column suggestions, manual mapping, required-field checks, editable records, and rejected-record downloads.

Validate text, email, number, date, and select fields. The default limit is 1,000 records per import, with a 5 MB file limit.

The package includes its Chakra UI provider. Connect the callback to your own API to save accepted records and return errors for rejected records.