Getting started with SvGrid

SvGrid is a modern, production-ready data grid for Svelte 5 - a headless core engine paired with a Svelte render component (<SvGrid>). It scales from a 10-row read-only table to a virtualized 100,000-row × 100-column editing surface with grouping, multi-column filtering, server-side data, and full keyboard and screen-reader support.

This guide is six short pages. Read them in order if you're new; jump straight to the one you need if you're not.

In a hurry? npm create sv-grid@latest scaffolds a working project in one command - see Starters & scaffolding.

#	Page	What it covers
0	Starters & scaffolding	`npm create sv-grid`, the minimal + SvelteKit admin templates, Deploy to Vercel.
1	Install	`pnpm add @svgrid/grid`, requirements, smoke-test.
2	First grid	The minimum runnable example, explained line by line.
3	Data and columns	What goes in `data` and `columns`. Custom cells via `renderSnippet`.
4	Features	Opt into sort, filter, pagination, grouping, selection, editing.
5	Theme and density	`--sg-*` tokens, dark mode, row height, sizing the grid in a flex layout.
6	Going to production	Server-side data, virtualization, a11y, SSR, CSP, TypeScript notes.

Estimated reading time: 15 minutes across all six pages.

Companion reads

Why headless? - the architecture decision behind the createSvGrid core vs. the <SvGrid> render component.
Tailwind integration - how the --sg-* custom properties, Tailwind v4, and dark mode fit together.
Web Components & Custom Elements - use SvGrid as a framework-agnostic <sv-grid> element in React, Vue, Angular, or plain HTML.
Enterprise features - the paid feature pack: data export, data import, AI assistant, and pivot tables.

One-page version

Prefer a single 800-line file? See getting-started-full.md. The content is identical; the split exists for sidebar nav and faster mobile loads.

License

@svgrid/grid is published under the MIT License - permissive for commercial use, redistribution, and modification. The paid companion @svgrid/enterprise ships under a separate commercial license. See LICENSE and packages/enterprise/LICENSE.

Frequently asked questions

How do I add a data grid to a Svelte 5 app?

Install @svgrid/grid, import SvGrid, and pass data and columns. A complete grid is about 15 lines - keyboard navigation and accessibility are on by default, and you opt into sort/filter/edit/group/paging with one boolean shortcut each (sortable, filterable, ...). See First grid and Features.

Does SvGrid work with SvelteKit?

Yes. It renders meaningful HTML before hydration, so it works under SvelteKit SSR and static builds. Drive large datasets with controlled, server-side state.

Is SvGrid free for commercial use?

Yes. @svgrid/grid is MIT-licensed, including commercial use, with no row cap or license key. The optional @svgrid/enterprise pack (export, pivot, import, AI) ships under a separate paid license.

What do I need to run SvGrid?

Svelte 5 (runes) and any Vite-based toolchain. There are no other required dependencies for the Community core; Enterprise export/import features lazy-load their own dependencies only when used.