svelte-data-importer

CLI toolkit for generating spreadsheet import workflows in Svelte and SvelteKit.

Inspired by shadcn, this tool generates source code directly into your project — you own every file and can customize anything.

Features

• Upload via drag and drop or click
• Supports CSV, XLS, and XLSX files
• Data preview with pagination
• Auto and manual column mapping
• Built-in validation (required fields, duplicates, empty values)
• Backend agnostic — bring your own submit handler
• Full source code ownership

Quick Start

pnpm dlx svelte-data-importer add importer

Works with npx and bunx too.

Prerequisites

• SvelteKit project
• shadcn-svelte installed (the CLI will offer to install it if missing)

Generated Files

Running add importer copies the following into your project:

src/lib/components/data-importer/
├── components/
│   ├── importer.svelte
│   ├── dropzone.svelte
│   ├── preview-table.svelte
│   ├── column-mapper.svelte
│   ├── validation-panel.svelte
│   └── import-footer.svelte
└── lib/
    ├── parsers/
    │   ├── csv.ts
    │   └── xlsx.ts
    ├── auto-map.ts
    ├── validators.ts
    ├── normalize.ts
    ├── types.ts
    └── index.ts

All files are yours to edit.

Usage

<script lang="ts">
  import { Importer } from '$lib/components/data-importer';

  const fields = [
    { key: 'name', label: 'Name', required: true },
    { key: 'email', label: 'Email', required: true },
    { key: 'phone', label: 'Phone' },
  ];

  function handleImport(payload) {
    // Send payload to your backend
    console.log(payload);
  }
</script>

<Importer {fields} onImport={handleImport} />

How It Works

Upload → Parse → Preview → Column Mapping → Validation → Submit

The onImport callback receives the mapped and validated rows — how you handle the data is entirely up to you.

CLI Commands

| Command | Description | |---|---| | svelte-data-importer add importer | Generate the importer component |

Tech Stack

The generated code uses:

• PapaParse — CSV parsing
• SheetJS — Excel parsing
• shadcn-svelte — UI components
• lucide-svelte — Icons
• Zod — Validation

License

MIT