SVAR Svelte Export Popup

SVAR Svelte Export Popup is a portal-mounted popup that collects export options from the user and emits a structured export request for Svelte and SvelteKit apps. It supports PDF, PNG, and Excel formats, page and layout setup, selectable Excel columns, and consumer-defined custom export tabs.

The widget comes with full TypeScript support, an extensible tabs API, and flexible CSS styling. It builds the export request from the current UI state and hands it to your backend — it never downloads a file by itself.

✨ Key Features

• Built-in PDF, PNG, and Excel (XLSX) export tabs
• Paper setup, Layout modes, Presets
• Excel column selection with drag-to-reorder
• Light and dark themes
• Full TypeScript support

🛠️ How to Use

To use the export popup widget, simply import the package and include the component in your Svelte file:

<script>
	import { ExportPopup } from "@svar-ui/svelte-export-popup";

	let open = $state(false);
	let anchor;

	function onexport(request) {
		// send the request to your export service, then close
		fetch("/api/export", {
			method: "POST",
			headers: { "Content-Type": "application/json" },
			body: JSON.stringify(request),
		});
		open = false;
	}
</script>

<button bind:this={anchor} onclick={() => (open = true)}>Export…</button>

{#if open}
	<ExportPopup
		title="Export"
		parent={anchor}
		{onexport}
		onclose={() => (open = false)}
	/>
{/if}

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 Export Popup 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.