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

bmarkov — Sat, 20 Jun 2026 08:17:11 +0000

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:

TanStack Table (Svelte adapter). Headless only, multi-framework. You build the entire DOM layer yourself. Beautiful primitives, but you still ship a thousand lines before you have a sortable table.
AG Grid via a Svelte wrapper. Production-grade, but the React shape underneath fights Svelte 5 runes the moment you try anything reactive.
svelte-headless-table. Lovely for small tables, not built for 100k rows with virtualization.

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.

Try it in 30 seconds

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

The hello-world that actually does something

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

Why "Svelte 5 native" matters

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.

What's in the free MIT core (`@svgrid/grid`)

Row + column virtualization. 100k rows by 100 cols stays smooth. There's a 1M-row demo if you want to see it break later.
Filtering. Excel-style filter menu, inline filter row, locale-aware text matching, set / value-list filter, between operator on numbers and dates.
Editing. 14 built-in editorTypes (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.
Selection. Cell-range click+drag and Shift+arrows, copy/paste as TSV, Excel-style fill handle.
Hierarchy. Row grouping with aggregation, tree data, master/detail, full-width detail rows.
Layout. Row + column pinning, sticky header + first column, header drag-to-reorder, column sizing API.
Operations. Find in grid (Ctrl+F), undo/redo (Ctrl+Z), transaction API, optimistic updates, server-side row model with sort / filter / group pushdown.
A11y. WAI-ARIA + full keyboard nav, RTL, high-contrast theme.
Bundle. ~7.5 KB gzipped for the headless core, ~42 KB gzipped for the full render component. Svelte stays a peer dependency.

The community core has zero feature gating, no license key, no watermark, no row-count cap.

The AI-native bit

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).

Open core, upfront

@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.

Honest about what is not there yet

Column spanning (colSpan on cell context). On the roadmap, large effort.
Built-in row dragging across grids. Demos cover the in-grid case, but the cross-grid version is not in the engine yet.
Variable row height on the <SvGrid> render component. The headless virtualizer does it today.
Engine-level formula language. There is a working in-grid formula engine in a demo, but it has not graduated into the package.
Custom calendar systems (Hijri, Buddhist, fiscal year) for the date editor. Gregorian dates / times / datetimes are all built in.

Full public roadmap with effort tags and a "recently shipped" track record: svgrid.com/roadmap.

Where to start

Site + 150+ demos: svgrid.com
GitHub: github.com/sv-grid/sv-grid
npm: @svgrid/grid
Scaffold: 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.

New Smart UI for React with 60+ components

bmarkov — Mon, 08 Jun 2020 11:53:06 +0000

Demos: https://www.htmlelements.com/react/

First Gantt Chart Web Component

bmarkov — Tue, 30 Jul 2019 18:26:31 +0000

Ideal for project management:
https://www.htmlelements.com/demos/gantt/overview/index.htm

SMART HTML ELEMENTS Colors Element

bmarkov — Thu, 23 May 2019 10:26:21 +0000

Creates a Custom Element by using Smart Custom Elements library. Smart provides API for Web Components & Custom Elements development. You can use it to create your own HTML Tags.

Feature Complete Chart Web Component

bmarkov — Wed, 08 May 2019 04:17:56 +0000

Feature Complete Chart Web Component with SVG and HTML5 rendering. Pie, Donut, Bar, Column, Financial, Pyramid, Bubble, Scatter and 30 more Chart types.

https://www.htmlelements.com/demos/chart/overview/

Awesome Web Components and HTML Elements

bmarkov — Tue, 19 Feb 2019 08:46:26 +0000

Website: https://www.htmlelements.com/demos/

Cute - CSS in JS: https://bmarkov.github.io/cute-css/

bmarkov — Mon, 18 Feb 2019 05:57:25 +0000

Utilising tagged template literals and the power of CSS.
Automatic CSS - adds css to a web page on demand, fully automatically. Your users load the least amount of code necessary.
No class name bugs - unique class names for your styles. You never have to worry about duplication or misspellings.
Removes the mapping between components and styles
FREE

Custom Elements: https://www.htmlelements.com/

bmarkov — Mon, 18 Feb 2019 05:18:33 +0000

Vanilla JS and ES6 library and next-generation front-end framework: https://www.htmlelements.com/
Ideal for the new Web Apps. Automatically adapts to different device types.
0 dependencies. 0 learning curve.
-Javascript library that helps you to create Custom UI Elements.
-Integrates with Angular, ReactJS, Vue.js and any other framework.
Arbitrary-precision arithmetic and Math functions.
DateTime precision up to a yoctosecond (10⁻²⁴ second).

DEV Community: bmarkov