Right now we’re releasing SvGrid 1.0 – an information grid constructed particularly for Svelte 5, from the workforce behind jQWidgets and Good UI.
For over fifteen years we’ve shipped UI parts trusted in manufacturing by greater than 5,000 firms throughout jQuery, Angular, React, Vue, and customary Internet Elements. One framework has been lacking a very first-class choice from us: Svelte. SvGrid fills that hole – not a React grid wrapped in a Svelte shim, however a grid written on Svelte 5 runes from the primary line.
Why one other grid, and why Svelte
Svelte 5 launched a brand new reactivity mannequin constructed on runes ($state, $derived, $impact) and snippets. A grid that merely wraps one other framework can not reap the benefits of it. SvGrid was designed for that mannequin immediately, which suggests smaller bundles, idiomatic APIs, and rendering that feels native to a Svelte app as a substitute of bolted on.
Headless core plus a drop-in part
SvGrid ships two layers in a single library:
- A headless engine (
createSvGrid) that owns sorting, filtering, grouping, pagination, and virtualization with no DOM assumptions – carry your personal markup if you want full management. - A render part (
<SvGrid>) that provides you a production-ready grid in a single prop go: virtualization, Excel-style column filters, inline modifying, cell-range choice, and keyboard navigation, all understanding of the field.
Use the part for pace; drop all the way down to the headless core for customized layouts. You might be by no means boxed in.
Constructed for actual purposes
- Row and column virtualization – easy at 100,000 rows and examined to 1,000,000.
- Grouping with aggregation, tree knowledge, and master-detail rows.
- Server-side knowledge: row fashions, cursor pagination, GraphQL and REST adapters, websocket reside updates, optimistic updates.
- Inline modifying with typed editors, validation, undo/redo, and Excel-style fill.
- Built-in charts, conditional formatting, sparklines, and a full theming system by way of
--sg-*CSS variables with first-class Tailwind assist. - Accessibility: WAI-ARIA grid semantics, full keyboard assist, and a high-contrast mode.
- 150+ reside, editable examples and an entire documentation web site.
AI-native by design
SvGrid ships a built-in MCP (Mannequin Context Protocol) server and printed llms.txt, so assistants like Claude, Cursor, and Zed reply precisely concerning the grid as a substitute of hallucinating its API. There are additionally natural-language filtering and smart-paste demos. This continues the AI-forward route you might have already seen throughout our part suites.
Free core, elective Enterprise
The core, @svgrid/grid, is MIT-licensed and free for business use – no license key, no row cap, no upsell pop-ups. The elective @svgrid/enterprise pack provides Excel/PDF/CSV/HTML export, spreadsheet import, pivot tables, a print view, and AI helpers, with direct assist. It’s licensed per developer, beginning at $599, as a perpetual license with a 12 months of updates and assist.
Get began
npm set up @svgrid/grid
<script lang="ts">
import { SvGrid, sort 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 knowledge={rows} columns={columns} />
Discover the reside demos, docs, and pricing at svgrid.com. We’d love your suggestions as we construct out the roadmap.
Get began ·
Browse 150+ demos ·
Pricing ·
npm
