The Svelte ecosystem has matured fast in the last year, but one thing I kept hitting was the data grid problem. If you wanted a real one, your options were:
None of them felt right for the Svelte 5 era. So we spent the last year building one: SvGrid.
It is MIT-licensed, on npm as @svgrid/grid
, and has a sibling package @svgrid/enterprise
for the heavier features (export, pivot, AI helpers). Site, docs, 150+ live demos: svgrid.com.
npm create sv-grid@latest
That scaffolds a working Vite + Svelte 5 app with a sortable, filterable, virtualized grid wired up.
Or drop the package straight into an existing app:
npm install @svgrid/grid
js
<script lang="ts">
import { SvGrid, type ColumnDef } from '@svgrid/grid'
const rows = [
{ firstName: 'Ada', age: 36, status: 'active' },
{ firstName: 'Linus', age: 54, status: 'active' },
{ firstName: 'Grace', age: 85, status: 'inactive' },
]
const columns: ColumnDef<{}, (typeof rows)[number]>[] = [
{ field: 'firstName', header: 'First name' },
{ field: 'age', header: 'Age' },
{ field: 'status', header: 'Status' },
]
</script>
<SvGrid data={rows} columns={columns} />
That is a real, working, accessible grid. Sorting, filtering, cell-range selection, inline editing, virtualization all light up the moment you turn on the matching prop. No provider wrapping, no DOM you have to author yourself, no .subscribe
ceremony.
A data grid is, at its core, a reactivity problem. A hundred thousand cells, any of which can change, and you want to repaint only what actually moved. Svelte 5 runes ($state
, $derived
, $effect
) give you fine-grained reactivity at exactly that scope.
Three patterns the engine uses that turned out to matter:
1. $state.raw for large arrays. Svelte's deep proxy is wonderful for forms and brutal for 100k-row tables. The row backing is
$state.raw
; the array reference is reactive, the contents are not. Sort-and-filter on the dataset I was profiling went from ~80ms to ~6ms.2. $effect.pre for measure-before-paint. Virtualization needs the viewport height before the paint that uses it. With plain
$effect
you get one frame of "rows render at 0 height, then snap to real height." $effect.pre
kills the flicker without a requestAnimationFrame
hack.3. Snippets as cell renderers. Svelte 5 snippets are first-class values. You attach one to a ColumnDef.cell
and {@render cell.cell(...)}
from the body component, and the args (value
, row
, getValue
) typecheck the whole way through. No more named slots, no <svelte:fragment>
dance.
@svgrid/grid
)
editorType
s (text, number, date, datetime, time, select, rich-select with typeahead, textarea, color, checkbox, list, chips, rating, password) and a cellEditor
snippet slot for anything else.The community core has zero feature gating, no license key, no watermark, no row-count cap.
This is the part I am most excited about, and the part I think is underappreciated in the component-library space.
SvGrid ships an MCP (Model Context Protocol) server. Add it to your Claude Desktop, Cursor, or Zed config and the assistant gets accurate, version-pinned answers about every prop, method, and event in the library, plus the source of all 150+ demos as context.
{
"mcpServers": {
"svgrid": {
"command": "npx",
"args": ["-y", "@svgrid/mcp"]
}
}
}
Now when you ask Cursor "give me a grid with row grouping and server-side data," it grounds the answer in actual SvGrid types and emits code that compiles, instead of hallucinating ag-grid props.
There is also a published llms.txt
/ llms-full.txt
for retrieval-augmented setups, and the gallery has live AI demos (a natural-language filter bar that turns "EMEA over 50k active" into a typed filter expression, plus a Smart Paste that turns free-form text into typed rows).
@svgrid/grid
is MIT-licensed and free for commercial use.
@svgrid/enterprise
is a separately-licensed companion that adds export to Excel / PDF / CSV / TSV / HTML with branded headers, footers, and password protection; a paginated printable view; pivot tables with a drag-and-drop Designer + drill-through; and AI helpers. Per-developer pricing, perpetual license with an optional yearly renewal for updates, OSS projects get it for free.
If everything you need is in the core, you never have to touch the paid package.
colSpan
on cell context). On the roadmap, large effort.<SvGrid>
render component. The headless virtualizer does it today.Full public roadmap with effort tags and a "recently shipped" track record: svgrid.com/roadmap.
npm create sv-grid@latest
I would love feedback. What is the first thing that breaks when you try it, and what is the one missing feature that would stop you adopting it? I am reading every reply.