{"slug": "svgrid-a-svelte-5-native-data-grid-mit-core-headless-render-component-mcp-ready", "title": "SvGrid: a Svelte 5 native data grid (MIT core, headless + render component, MCP-ready)", "summary": "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.", "body_md": "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:\n\nNone of them felt right for the Svelte 5 era. So we spent the last year building one: **SvGrid**.\n\nIt is MIT-licensed, on npm as `@svgrid/grid`\n\n, and has a sibling package `@svgrid/enterprise`\n\nfor the heavier features (export, pivot, AI helpers). Site, docs, 150+ live demos: [svgrid.com](https://svgrid.com).\n\n```\nnpm create sv-grid@latest\n```\n\nThat scaffolds a working Vite + Svelte 5 app with a sortable, filterable, virtualized grid wired up.\n\nOr drop the package straight into an existing app:\n\n```\nnpm install @svgrid/grid\njs\n<script lang=\"ts\">\n  import { SvGrid, type ColumnDef } from '@svgrid/grid'\n\n  const rows = [\n    { firstName: 'Ada',   age: 36, status: 'active' },\n    { firstName: 'Linus', age: 54, status: 'active' },\n    { firstName: 'Grace', age: 85, status: 'inactive' },\n  ]\n  const columns: ColumnDef<{}, (typeof rows)[number]>[] = [\n    { field: 'firstName', header: 'First name' },\n    { field: 'age',       header: 'Age' },\n    { field: 'status',    header: 'Status' },\n  ]\n</script>\n\n<SvGrid data={rows} columns={columns} />\n```\n\nThat 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`\n\nceremony.\n\nA 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`\n\n, `$derived`\n\n, `$effect`\n\n) give you fine-grained reactivity at exactly that scope.\n\nThree patterns the engine uses that turned out to matter:\n\n**1. $state.raw for large arrays.** Svelte's deep proxy is wonderful for forms and brutal for 100k-row tables. The row backing is\n\n`$state.raw`\n\n; 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\n\n`$effect`\n\nyou get one frame of \"rows render at 0 height, then snap to real height.\" `$effect.pre`\n\nkills the flicker without a `requestAnimationFrame`\n\nhack.**3. Snippets as cell renderers.** Svelte 5 snippets are first-class values. You attach one to a `ColumnDef.cell`\n\nand `{@render cell.cell(...)}`\n\nfrom the body component, and the args (`value`\n\n, `row`\n\n, `getValue`\n\n) typecheck the whole way through. No more named slots, no `<svelte:fragment>`\n\ndance.\n\n`@svgrid/grid`\n\n)\n`editorType`\n\ns (text, number, date, datetime, time, select, rich-select with typeahead, textarea, color, checkbox, list, chips, rating, password) and a `cellEditor`\n\nsnippet slot for anything else.The community core has zero feature gating, no license key, no watermark, no row-count cap.\n\nThis is the part I am most excited about, and the part I think is underappreciated in the component-library space.\n\nSvGrid 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.\n\n```\n{\n  \"mcpServers\": {\n    \"svgrid\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@svgrid/mcp\"]\n    }\n  }\n}\n```\n\nNow 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.\n\nThere is also a published `llms.txt`\n\n/ `llms-full.txt`\n\nfor 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).\n\n`@svgrid/grid`\n\nis MIT-licensed and free for commercial use.\n\n`@svgrid/enterprise`\n\nis 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.\n\nIf everything you need is in the core, you never have to touch the paid package.\n\n`colSpan`\n\non cell context). On the roadmap, large effort.`<SvGrid>`\n\nrender 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).\n\n`npm create sv-grid@latest`\n\nI 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.", "url": "https://wpnews.pro/news/svgrid-a-svelte-5-native-data-grid-mit-core-headless-render-component-mcp-ready", "canonical_source": "https://dev.to/bmarkov/svgrid-a-svelte-5-native-data-grid-mit-core-headless-render-component-mcp-ready-1j8l", "published_at": "2026-06-20 08:17:11+00:00", "updated_at": "2026-06-20 08:36:44.455637+00:00", "lang": "en", "topics": ["developer-tools", "large-language-models", "artificial-intelligence"], "entities": ["SvGrid", "Svelte", "npm", "Claude Desktop", "Cursor", "Zed", "MCP", "Vite"], "alternates": {"html": "https://wpnews.pro/news/svgrid-a-svelte-5-native-data-grid-mit-core-headless-render-component-mcp-ready", "markdown": "https://wpnews.pro/news/svgrid-a-svelte-5-native-data-grid-mit-core-headless-render-component-mcp-ready.md", "text": "https://wpnews.pro/news/svgrid-a-svelte-5-native-data-grid-mit-core-headless-render-component-mcp-ready.txt", "jsonld": "https://wpnews.pro/news/svgrid-a-svelte-5-native-data-grid-mit-core-headless-render-component-mcp-ready.jsonld"}}