Introducing SvGrid: A Svelte 5-Native Data Grid, From the jQWidgets Team

Today we are releasing SvGrid 1.0 - a data grid built specifically for Svelte 5, from the team behind jQWidgets and Smart UI.

SvGrid 1.0 is a Svelte 5-native data grid from the makers of jQWidgets and Smart UI: a headless core plus a drop-in component, virtualization to 1M rows, Excel-style filtering, pivot, export, and a built-in MCP server for AI tools. MIT core, free for commercial use.

For over fifteen years we have shipped UI components trusted in production by more than 5,000 companies across jQuery, Angular, React, Vue, and standard Web Components. One framework has been missing a truly first-class option from us: Svelte. SvGrid fills that gap - not a React grid wrapped in a Svelte shim, but a grid written on Svelte 5 runes from the first line.

Why another grid, and why Svelte

Svelte 5 introduced a new reactivity model built on runes ($state, $derived, $effect) and snippets. A grid that simply wraps another framework cannot take advantage of it. SvGrid was designed for that model directly, which means smaller bundles, idiomatic APIs, and rendering that feels native to a Svelte app instead of bolted on.

Headless core plus a drop-in component

SvGrid ships two layers in one library:

A headless engine (createSvGrid) that owns sorting, filtering, grouping, pagination, and virtualization with no DOM assumptions - bring your own markup when you need full control.
A render component (<SvGrid>) that gives you a production-ready grid in a single prop pass: virtualization, Excel-style column filters, inline editing, cell-range selection, and keyboard navigation, all working out of the box.

Use the component for speed; drop down to the headless core for custom layouts. You are never boxed in.

Built for real applications

Row and column virtualization - smooth at 100,000 rows and tested to a million.
Grouping with aggregation, tree data, and master-detail rows.
Server-side data: row models, cursor pagination, GraphQL and REST adapters, websocket live updates, optimistic updates.
Inline editing with typed editors, validation, undo/redo, and Excel-style fill.
Integrated charts, conditional formatting, sparklines, and a full theming system via --sg-* CSS variables with first-class Tailwind support.
Accessibility: WAI-ARIA grid semantics, full keyboard support, and a high-contrast mode.
150+ live, editable examples and a complete documentation site.

AI-native by design

SvGrid ships a built-in MCP (Model Context Protocol) server and published llms.txt, so assistants like Claude, Cursor, and Zed answer accurately about the grid instead of hallucinating its API. There are also natural-language filtering and smart-paste demos. This continues the AI-forward direction you have already seen across our component suites.

Free core, optional Enterprise

The core, @svgrid/grid, is MIT-licensed and free for commercial use - no license key, no row cap, no upsell pop-ups. The optional @svgrid/enterprise pack adds Excel/PDF/CSV/HTML export, spreadsheet import, pivot tables, a print view, and AI helpers, with direct support. It is licensed per developer, starting at $599, as a perpetual license with a year of updates and support.

Get started

npm install @svgrid/grid

<script lang="ts">
  import { SvGrid, type ColumnDef } from '@svgrid/grid'
  const rows = [
    { firstName: 'Ada',   age: 36, status: 'active' },
    { firstName: 'Linus', age: 54, status: 'active' },
  ]
  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} />

Explore the live demos, docs, and pricing at svgrid.com. We would love your feedback as we build out the roadmap.

Get started · Browse 150+ demos · Pricing · npm

Blog