SvGrid MCP Server

<p align="center"> <img src="https://svgrid.com/brand/svgrid-logo-icon-1200.png" alt="SvGrid" width="100" height="100" /> </p>

SvGrid

The Svelte 5 native data grid. Headless-first. Render-ready.

SvGrid is a Svelte 5 data grid and data table built from the first line for runes, not a React grid wrapped in a Svelte shim. It does virtual scrolling over 100k+ rows, Excel-style filtering, inline editing, row grouping, tree data, pivot, and server-side data, and it ships both a headless engine you compose yourself and a drop-in <SvGrid /> component. Open source under MIT, TypeScript-first, and usable in SvelteKit with SSR.

<p align="center"> <img src="https://svgrid.com/brand/svgrid-hero.png" alt="A SvGrid trading desk: KPI cards, sector filter chips, and a virtualized data table with sparkline trend columns, conditional colour, and pinned columns." width="100%" /> </p>

Quick links: Website · Docs · 370+ Demos · Pricing · Roadmap · Blog · npm

---

Install

Scaffold a working Vite + Svelte 5 app with SvGrid wired up in one command:

npm create @svgrid@latest

Or add it to an existing app:

npm install @svgrid/grid

The 30-second example

<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 table. Sorting, filtering, virtualization, cell selection, and inline editing all wire up the moment you turn on the matching prop.

Quick facts

Package	@svgrid/grid
License	MIT, free for commercial use
Requires	svelte@^5 (peer dependency), Node 16+
Bundle (gzip)	~2 KB headless core, ~80 KB full <SvGrid> + ~9 KB CSS
Types	Bundled, no @types/ package needed
SSR	Works under SvelteKit SSR and static builds
Demos	370+ at svgrid.com/demos
AI grounding	MCP server, llms.txt, Agent Skill

Re-derive the numbers yourself: pnpm size and pnpm demos:count.

What's in the box

• Virtual scrolling. Row + column windowing; 100k x 100 stays smooth, and there's a 1M-row demo.
• Filtering. Excel-style filter menu, inline filter row, locale-aware text matching, set / value-list filter, between operator on numbers and dates.
• Editing. 15 built-in editorTypes (text, number, date, datetime, time, select, rich-select with typeahead, autocomplete, textarea, color, checkbox, list, chips, rating, password), plus date-native / datetime-native / time-native to opt out of the rich pickers, and a cellEditor snippet slot for anything else.
• Selection. Cell-range click+drag and Shift+arrows, copy/paste as TSV, Excel-style fill handle, row selection.
• Views. Row grouping with aggregation, tree data, master/detail, full-width detail rows, spreadsheet mode with formulas, plus Kanban board and scheduler/calendar views.
• Layout. Row + column pinning, sticky header + first column, header drag-to-reorder, keyboard-accessible column sizing, responsive mode for mobile.
• Operations. Find in grid (Ctrl+F), undo / redo (Ctrl+Z), transaction API, optimistic updates, server-side row model with sort / filter / group pushdown.
• AI helpers, free. Natural-language filter, smart fill, summarize, classify, anomaly detection, and "chart this". Model-agnostic: you register one provider, nothing is bundled.
• UI components. A Svelte 5 component suite ships in the same package (inputs, selection, date/time, overlays, layout, feedback), usable standalone or as grid cell editors.
• Accessibility. WAI-ARIA grid roles, full keyboard navigation, RTL, high-contrast theme.
• Production concerns. TypeScript types, CSP / Trusted-Types safe rendering, SSR-friendly, themeable via --sg-* CSS custom properties.

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

Which package do I need?

You want to	Install	License
A data grid in a Svelte 5 / SvelteKit app	@svgrid/grid	MIT
Excel / PDF export, import, pivot tables, print, Kanban + scheduler renderers	+ @svgrid/enterprise	Commercial
The grid in React, Vue, Angular, or plain HTML	@svgrid/grid-wc	MIT
Standalone Svelte 5 UI components (no grid)	@svgrid/ui	MIT
Accurate SvGrid answers from Claude / Cursor / Zed	@svgrid/mcp	Free to run; Studio codegen tools are Commercial
A generated CRUD app from your database schema	@svgrid/studio	Commercial

OSS projects under an OSI-approved license get the Enterprise pack free. See Pricing.

Coming from another grid?

	SvGrid	AG Grid Community	TanStack Table
Svelte 5 runes native	Yes	No, JS core + wrapper	Adapter only
Ships a renderer	Yes, plus headless	Yes	No, headless only
Bundle (gzip)	~2 KB headless / ~80 KB full	~340 KB	~12-14 KB
Virtualization built in	Yes	Yes	Bring your own
Master/detail, tree, range selection	Free	Enterprise only	Build it yourself
License	MIT core, commercial pack	MIT core, commercial pack	MIT

Multi-framework teams are better served by AG Grid or TanStack Table; SvGrid is deliberately Svelte-first. Full detail and migration guides: SvGrid vs AG Grid vs TanStack Table · Migrating from AG Grid · Migrating from Handsontable

AI-native

SvGrid is built to be written by AI as well as used with it. Three grounding surfaces ship with the project so assistants cite real props, methods, and events instead of inventing them.

MCP server for Claude Desktop, Cursor, and Zed:

{
  "mcpServers": {
    "svgrid": {
      "command": "npx",
      "args": ["-y", "@svgrid/mcp"]
    }
  }
}

Claude Code users can skip the config file:

claude mcp add svgrid -- npx -y @svgrid/mcp
npx skills add sv-grid/sv-grid    # always-on house-style rules

Retrieval files for RAG and custom agents: llms.txt (index) and llms-full.txt (every doc page concatenated). See Use sv-grid docs as LLM context.

Frequently asked questions

Does SvGrid work with SvelteKit and SSR?

Yes. The render component emits meaningful HTML before hydration, so it works under SvelteKit SSR and static builds. See going to production.

Is SvGrid free for commercial use?

Yes. @svgrid/grid is MIT, with no license key, no watermark, and no row-count cap. Only the optional @svgrid/enterprise pack (export, import, pivot, print) is paid.

Does it support Svelte 4?

No. SvGrid is Svelte 5 only by design. It uses runes and snippets rather than Svelte 4 stores, which is what lets it skip the abstraction layer a cross-version grid would need.

How many rows can it handle?

100k rows x 100 columns scroll smoothly on the client thanks to row and column virtualization, and only the visible window is ever in the DOM. Past that, use the server-side row model, which pushes sorting, filtering, and grouping to your backend.

How big is the bundle?

About 2 KB gzipped for the headless core and about 80 KB for the full <SvGrid> render component, plus 9 KB of CSS, with Svelte excluded as a peer dependency. Charts, date/time editors, menus, and export add another ~64 KB that loads on demand rather than up front. Run pnpm size to re-measure.

Do I need Tailwind?

No. The render component ships its own scoped styles and re-themes through --sg-* CSS custom properties. Tailwind is supported if you use it; see the Tailwind guide.

Can I use it from React, Vue, or Angular?

Yes, through @svgrid/grid-wc, which wraps the grid as a <sv-grid> custom element with no build step required.

Is it accessible?

It implements the WAI-ARIA 1.2 grid pattern with full keyboard navigation, a screen-reader announcement layer, RTL support, and a high-contrast theme. See accessibility for exactly where the responsibility line sits.

How do I get AI assistants to write correct SvGrid code?

Point them at the MCP server, or feed them llms.txt. Both are covered in the AI-native section above.

Who's behind it

SvGrid is built by jQWidgets, the team behind jqwidgets.com and htmlelements.com. We've been shipping UI components since 2011 to 5,000+ companies including Samsung, Boeing, NVIDIA, Microsoft, Nokia, and Intel. SvGrid is our Svelte 5 native effort.

Support

SvGrid is open core: the MIT @svgrid/grid is free for any use, and the project is funded by Enterprise licenses, not donations.

• Found a bug or have a question? Open an issue.
• Want to contribute? See CONTRIBUTING.md.
• Security issue? See SECURITY.md.
• Need commercial or priority support? It is included with Enterprise.

What's not built yet

Honest list:

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

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

---

Repository layout

This is a pnpm workspace monorepo:

packages/grid/            @svgrid/grid          - MIT data grid + UI component suite
packages/enterprise/      @svgrid/enterprise    - paid feature pack + Studio codegen
packages/studio/          @svgrid/studio        - Studio CLI + visual designer
packages/mcp/             @svgrid/mcp           - MCP server
packages/grid-wc/         @svgrid/grid-wc       - <sv-grid> web component
packages/svgrid-ui/       @svgrid/ui            - UI component CLI
packages/create-sv-grid/  @svgrid/create        - grid scaffolder
packages/create-studio/   @svgrid/create-studio - Studio app scaffolder
examples/                                       - 370+ live demos
website/                                        - svgrid.com source
docs/                                           - markdown docs

Requirements

• Node.js >= 18
• pnpm (the workspace pins pnpm@10.33.2 via packageManager; corepack enable will pick it up)

Develop

pnpm install            # install workspace deps
pnpm dev                # run the demo gallery at http://localhost:5174
pnpm build              # build packages/grid/dist
pnpm build:example      # build the demo gallery
pnpm dev:site           # run the website at http://localhost:5180
pnpm build:site         # build the website (writes website/dist)
pnpm test               # run the grid test suite
pnpm test:types         # type-check every package
pnpm size               # re-measure the gzipped bundle
pnpm demos:count        # re-count the live demos

pnpm dev proxies to pnpm --filter @svgrid/grid-example-gallery dev. Inside the example, the library is linked via the workspace ("@svgrid/grid": "workspace:*"), so edits in packages/grid/src/** are picked up by Vite HMR with no rebuild.

Library entry points

import {
  SvGrid,
  FlexRender,
  // headless core + row-model factories
  createSvGrid,
  createCoreRowModel,
  createFilteredRowModel,
  createSortedRowModel,
  createGroupedRowModel,
  createExpandedRowModel,
  createPaginatedRowModel,
  // features
  tableFeatures,
  rowSortingFeature,
  columnFilteringFeature,
  columnGroupingFeature,
  rowExpandingFeature,
  rowPaginationFeature,
  rowSelectionFeature,
  // cell renderers
  renderSnippet,
  renderComponent,
} from '@svgrid/grid'

Documentation

• Getting started - end-to-end walkthrough.
• Why headless? - what the headless core gives you and when to reach for it.
• Tailwind integration - re-theming via --sg-* tokens, dark-mode wiring.
• Bundle size - measured numbers and how to reproduce them.
• Help index - topic pages for columns, rows, cells, filtering, editing.
• Missing features - honest gap list.

Website

website/ contains the public marketing + docs site (Vite + Svelte 5). Published to GitHub Pages via .github/workflows/deploy-website.yml on every push to main. See website/README.md for routes, base-path config, and the one-time Pages setup.

License

This repository ships under mixed licensing. The grid, the web component, the UI CLI, and the two scaffolders are open source; the Enterprise pack, Studio, the MCP server, and the website are commercial.

Package	License	LICENSE file
packages/grid	MIT	LICENSE
packages/grid-wc	MIT	LICENSE
packages/svgrid-ui	MIT	LICENSE
packages/create-sv-grid	MIT	LICENSE
packages/create-studio	MIT	LICENSE
packages/enterprise	Commercial	LICENSE
packages/mcp	Commercial	LICENSE
packages/studio	Commercial	LICENSE
website	Proprietary	LICENSE

The MIT packages can be used freely, including for commercial work. The Enterprise feature pack, Studio, the MCP server, and the marketing + docs website are proprietary: source is visible for evaluation and for paying customers, but visibility does not grant a license. See the SvGrid pricing page for Enterprise purchases.

Trademark

SvGrid™ and sv-grid™ are trademarks of jQWidgets Ltd. The licenses above apply to the source code only; they grant no rights to the SvGrid / sv-grid names or logos. You may build on and redistribute the MIT-licensed code, but you may not reuse the project's name or branding in a way that implies endorsement by, or affiliation with, jQWidgets Ltd, nor redistribute it under a confusingly similar name.