A React component that handles CSV imports with automatic column mapping and data validation.

Two ways to use it:

• Local Mode: Everything runs in the browser. No backend needed.
• Backend Mode: Adds AI column mapping and natural language transformations with OpenAI.

1. Users upload CSV/Excel files
2. Virtual scrolling handles large files without crashing
3. Built-in validation catches errors (email, phone, date formats)
4. Transformations clean the data (trim, capitalize, normalize)
5. You get clean, validated JSON

1. Same upload experience
2. OpenAI automatically maps columns based on names and sample data
3. Users can fix errors with natural language ("fix all phone numbers")
4. Background processing with Redis Queue for large files
5. Webhook notifications when imports complete

https://screen.studio/share/NUnNRQTg

ImportCSV works in two modes:

Perfect for getting started quickly. Configure everything in your React code.

import { CSVImporter } from "@importcsv/react";

function App() {
  return (
    <CSVImporter
      columns={[
        { id: 'name', label: 'Name', validators: [{ type: 'required' }] },
        { id: 'email', label: 'Email', validators: [{ type: 'email' }] },
        { id: 'phone', label: 'Phone' }
      ]}
      onComplete={(data) => console.log("Import complete!", data)}
    />
  );
}

For production apps with centralized configuration, AI features, and background processing.

import { CSVImporter } from "@importcsv/react";

function App() {
  return (
    <CSVImporter
      importerKey="contacts"
      backendUrl="https://your-api.com"  // Your backend API
      onComplete={(data) => console.log("Import complete!", data)}
    />
  );
}

Which mode should I use? Local mode for quick prototypes and simple needs. Backend mode for production apps with AI features, webhooks, and team collaboration. See detailed comparison

// Your schema
const columns = [
  { id: "email", label: "Email" },
  { id: "name", label: "Name" },
  { id: "phone", label: "Phone" }
];

// CSV has: "Customer Email", "Full Name", "Telephone"
// AI maps them automatically to your schema

const columns = [
  {
    id: "email",
    label: "Email",
    validators: [
      { type: "required" },
      { type: "email" }
    ]
  }
];

npm install @importcsv/react
# or
yarn add @importcsv/react

# Clone and start all services with Docker
git clone https://github.com/abhishekray07/importcsv.git
cd importcsv
docker-compose up -d

# Access services
# Admin Dashboard: http://localhost:3000
# API: http://localhost:8000/docs

To enable AI column mapping and natural language transformations in Backend Mode:

1. Add to your backend .env file:

# Required for AI features
OPENAI_API_KEY=sk-xxxxx

2. Restart the backend service:

docker-compose restart backend

Note: AI features are only available in Backend Mode. In Local Mode, column mapping uses fuzzy string matching.

Frontend:

• Virtual scrolling with @tanstack/react-virtual
• Built-in validators (email, phone, date, regex)
• Transformations (trim, capitalize, normalize)
• TypeScript + React/Preact

Backend (Optional):

• FastAPI + PostgreSQL + Redis
• OpenAI integration via LiteLLM and BAML
• Background jobs with Redis Queue (RQ)
• Webhook notifications

• AI features require OpenAI API key (Backend Mode only)
• Natural language commands are English-only
• No built-in deduplication
• React/Preact only (no Vue/Angular versions)
• No streaming upload (files loaded to memory first)

• Slack Community - Get help and share feedback
• Documentation - Guides and API reference
• GitHub Issues - Bug reports and feature requests

We welcome contributions! See our Contributing Guide for details.

# Quick start for contributors
git clone https://github.com/importcsv/importcsv.git
cd importcsv
docker-compose up -d

• Frontend (/frontend): MIT License - Use freely in your applications
• Backend (/backend): AGPL-3.0 - Modifications must be open sourced
• Admin (/admin): AGPL-3.0 - Modifications must be open sourced

For commercial licensing options, contact us.