SvGrid: a Svelte 5 native data grid (MIT core, headless + render component, MCP-ready)

A developer has released SvGrid, a native data grid for Svelte 5 that is MIT-licensed and available on npm as @svgrid/grid. The grid features fine-grained reactivity using Svelte 5 runes, supports virtualization, sorting, filtering, inline editing, and includes an MCP server for AI-assisted development. The project also offers an enterprise package with advanced features like export, pivot, and AI helpers.

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 https://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 https://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.