Open Source · Svelte 5

Spreadsheet imports
for Svelte

A CLI toolkit that generates editable source code directly into your SvelteKit project. CSV, XLS, XLSX — column mapping, validation, and template download included.

pnpm dlx svelte-data-importer add importer
Supports CSVXLSXLSX · Built for Svelte 5 · TypeScript-first

Features

The complete toolkit
for spreadsheet imports

Everything you need to build a great data import experience for your users.

CSV & Excel support

Upload .csv, .xls, and .xlsx files. Automatic parsing and header detection out of the box.

Auto column mapping

Columns are matched to your target fields by name. Manual overrides with a single click.

Built-in validation

Required field checking and per-row error reporting before data reaches your app.

Fully type-safe

TypeScript throughout. Your target field definitions drive types across the entire flow.

You own the code

Files are copied directly into your project. Edit anything — no dependency to maintain.

Template download

Generate an xlsx template with one click so users know exactly what columns to upload.

How it works

Up and running
in three steps

01

Run the CLI

The CLI detects your SvelteKit project and package manager, installs required dependencies, and copies all source files into your project.

02

Code lands in your project

All components and utilities are placed in src/lib/components/data-importer/. You own every file from day one.

03

Customize freely

Modify the UI, add validation logic, connect to any backend. No black boxes, no upgrade risk.

Usage

As simple as this

Drop the component in. Pass your fields and an import handler.

+page.svelte
<script lang="ts">
  import Importer from "$lib/components/data-importer/components/importer.svelte";

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

  function handleImport(payload) {
    // payload.rows     — mapped & validated rows
    // payload.mappings — column mappings used
    console.log(payload.rows);
  }
</script>

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

Import flow

Every step, handled

Upload Parse Select sheet Preview Map columns Validate Import

Spreadsheet imports
without the complexity

Run the CLI, get the files, ship it.

pnpm dlx svelte-data-importer add importer
svelte-data-importer Open Source · MIT License