SVAR Svelte Excel Import

Homepage • Getting Started • Demos

SVAR Svelte Excel Import is a modal import wizard for Svelte and SvelteKit apps. It parses .xlsx, .csv, and .tsv files, lets the end user map source columns to your application fields, transforms rows into keyed objects, and returns the imported data to your app.

The widget comes with automatic column-to-field detection, multi-sheet support, type conversion, custom validation, full TypeScript support, and flexible CSS styling. The PRO Edition adds production-focused capabilities and a commercial license with priority support.

✨ Key Features

• Modal import wizard for .xlsx, .csv, and .tsv files
• Drag-and-drop or click-to-browse file upload
• Automatic column-to-field mapping with header and keyword detection
• Manual mapping via column-header dropdowns or a side field panel
• Multi-sheet workbook support with sheet tabs
• Column type detection and conversion (text, number, date, boolean)
• Required fields and custom validation with inline errors
• Live preview of mapped data before import
• Import summary with imported / skipped counts and per-row errors
• Preloaded data mode (skip upload and start at mapping)
• Localization
• Light and dark themes
• Full TypeScript support

🚀 PRO Edition

SVAR Svelte Excel Import is available in open-source and PRO Editions. The PRO Edition adds production-focused import capabilities together with a commercial license and priority support.

Visit the pricing page for the full feature comparison, licensing details, and free trial.

Or see the live demo.

🛠️ How to Use

To use the widget, import the package and render the component while the import modal should be open:

<script>
	import { ExcelImport } from "@svar-ui/svelte-excel-import";

	let open = $state(false);

	const config = {
		fields: [
			{ id: "name", label: "Name", required: true },
			{ id: "email", label: "Email", required: true },
			{ id: "phone", label: "Phone" },
		],
		onimport: (rows, result) => {
			console.log("Imported rows:", rows, result);
		},
		onclose: () => (open = false),
	};
</script>

<button onclick={() => (open = true)}>Import Excel</button>

{#if open}
	<ExcelImport {...config} />
{/if}

For further instructions, follow the detailed quick start guide.

How to Modify

Typically, you don't need to modify the code. However, if you wish to do so, follow these steps:

1. Install vite-plus (curl -fsSL https://vite.plus | bash on Mac/Linux, irm https://vite.plus/ps1 | iex on Windows). The project uses pnpm workspaces under the hood, so plain npm will not work.
2. Run vp i from the project root to install dependencies.
3. Run vp run build to build all packages.
4. Start the demo app in development mode with vp run start.

Run Tests

To run the tests:

vp test

⭐ Show Your Support

If SVAR Svelte Excel Import helps your project, give us a star! It helps us reach more developers and keeps us motivated to add new features.

:speech_balloon: Need Help?

Post an Issue or use our community forum.