ImportCSV

React & JS Embeddable CSV importer with validation and large dataset support

A production-ready React component for importing CSV, XLS, and XLSX files with intelligent column mapping, validation, and support for large datasets.

Why ImportCSV?

⚡ High Performance

Handle 10,000+ rows with virtual scrolling and progressive validation

📦 Lightweight

~100KB gzipped bundle, optimized with Preact

🎨 Zero Config

CSS auto-injected, no separate imports needed

🛠️ Production Ready

Built-in validation, transformations, and error handling

Installation

npm install @importcsv/react zod
import { CSVImporter } from '@importcsv/react';
import { z } from 'zod';

const schema = z.object({
  name: z.string().min(1),
  email: z.string().email()
});

<CSVImporter
  schema={schema}
  onComplete={(data) => {
    // data is typed: { name: string; email: string }[]
    console.log(`Imported ${data.length} rows`);
  }}
/>

Try It Now

🎮
Interactive Playground

Configure your importer visually, test with sample data, and generate production-ready Zod schema code

✓ Visual Configuration✓ Live Testing✓ Code Generation
→

Key Features

🎨 Headless Components

Build custom CSV importers with unstyled primitives

🛡️ Type-Safe with Zod

Define your schema once, get full TypeScript types automatically

⚡ 10k+ Rows Support

Virtual scrolling and progressive validation

🤖 AI-Powered Features

Smart mapping and natural language transforms

Get Started in 5 Minutes

Quick Start

Install and integrate in 5 minutes

Playground

Try it live, generate code

Next.js

Complete Next.js integration

React

Vite, CRA, or any React setup

Schema Guide

Define validation with Zod

API Reference

Complete API documentation

Next Steps

What is ImportCSV?

Get started with ImportCSV - a type-safe CSV importer for React