DEV Community: bmarkov

The Svelte Data Grid That Ships Its Own MCP Server

bmarkov — Fri, 28 Aug 2026 07:44:42 +0000

Ask a coding model to wire up a Svelte 5 data grid and you usually get code that looks right and does not run. The prop names drift in from a React grid, the reactivity is Svelte 4 stores, and the version it learned from shipped a year and a half ago. You paste the error back, it apologises, it invents a slightly different API.

That failure mode is the thing SvGrid is built around. It is a Svelte 5 native data grid: a headless core plus a <SvGrid> renderer, virtualization, grouping, editing, server-side data, keyboard and screen-reader support. The core package @svgrid/grid is MIT.

The part worth writing about is what sits on top of that. AI shows up twice in this product: once at build time, so your editor writes correct grid code, and once at runtime, so your users can talk to their data. Here are the five pieces that matter.

1. An MCP server, so the model reads the API instead of remembering it

Model Context Protocol is the open standard for exposing tools to LLM clients. SvGrid ships one: @svgrid/mcp, MIT licensed, listed in the official MCP registry as com.svgrid/svgrid.

One command in Claude Code:

claude mcp add svgrid -- npx -y @svgrid/mcp

Or the same server in Cursor, Zed, Claude Desktop, or anything else that speaks MCP over stdio:

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

Eight of the tools cover docs and examples:

Tool	What it returns
`list_examples`	Every demo: id, title, one-line blurb
`get_example_source`	The full `.svelte` source of one demo, verbatim
`list_docs` / `get_doc`	Doc slugs, then the markdown of a page
`search_docs`	Substring search across the docs with excerpts
`get_api_reference`	The curated public API surface, grouped by category
`introspect_source`	A draft entity schema from a Drizzle file or sample rows
`scaffold_entity`	Runnable SvelteKit files for one entity

Two details do most of the work here. First, the corpus is inlined into the package at build time, so answers are pinned to the version you installed rather than to whatever the model absorbed during training. Second, get_example_source returns real working files, all 360+ of them, so "build me a grid that groups by department and shows a sparkline per row" starts from code that already compiles.

It runs locally over stdio. No API key, no telemetry, no outbound call. stdout is JSON-RPC, logs go to stderr.

If you do not want to run a server, the same grounding ships as static files you can paste into a custom GPT, a Claude project, or your own agent's system prompt:

const topicMap = await fetch('https://svgrid.com/llms.txt').then((r) => r.text())
const schemas  = await fetch('https://svgrid.com/schemas/index.json').then((r) => r.json())

llms.txt is the ~10 kB topic map, llms-full.txt is every doc page concatenated, and schemas/index.json gives you JSON Schema for ColumnDef and the <SvGrid> props so a generated config can be machine-validated before you ever run it.

2. Natural-language filtering that cannot invent a column

Now the runtime side. The AI helpers live in @svgrid/grid itself, MIT, no license key and no separate package.

import { aiFilter } from '@svgrid/grid'

const plan = await aiFilter(api, 'accounts losing momentum in EMEA, by NPS')
// {
//   filters: [
//     { field: 'region', operator: 'equals',   value: 'EMEA' },
//     { field: 'nps',    operator: 'lessThan', value: '30' },
//   ],
//   sort: [{ field: 'nps', desc: false }],
//   rationale: 'EMEA region, low NPS, sorted ascending.',
// }

Three things keep this from becoming a party trick:

The prompt is grounded in your columns. Before the call, the grid embeds the live column schema (names, types, sampled values) so the model picks real field names.
A hallucination guard on the way back. If the model still returns a column that does not exist, that clause is dropped rather than handed to setFilter, which would throw. You would rather lose a clause than crash the page.
It returns a plan and does not apply it. That gives you the "here is what I would do, accept?" preview for free. Pass { apply: true } when you want it committed directly.

For an analyst-facing table this replaces a dozen per-column filter operators with one text box.

3. Smart fill, and paste from wherever the data actually came from

Smart fill is the spreadsheet feature. The user types one or two worked examples in a column, and the model proposes the rest:

const result = await aiSmartFill(api, {
  field: 'tier',
  examples: [
    { input: { company: 'Northwind' }, output: 'enterprise' },
    { input: { company: 'Helios' },    output: 'growth' },
  ],
})
// result.predictions: [{ rowIndex, value, confidence }, ...]

You decide what happens next: accept all, accept per cell, or write the prediction to a shadow field and render a confidence pill in the cell.

Smart paste is the one that RevOps users react to. Drop in CSV, TSV, JSON, a vCard, a Markdown table copied out of Slack, an email signature block, or a paragraph of prose, and the parser detects the format and maps it to typed rows. Every parsed row then goes through three normalization passes before the preview renders: email typo correction (gmial.com), phone rewriting to a consistent +CC AAA BBB CCCC shape, and name cleaning that strips Dr. / Jr. and rewrites "Last, First". Duplicate emails collapse into one row with missing fields merged in.

4. One adapter, no bundled model

Every AI call in the grid routes through a single async function you register once at boot:

import { setAIProvider, type AIProvider } from '@svgrid/grid'

const provider: AIProvider = async ({ prompt, responseFormat, signal, task }) => {
  const r = await fetch('/api/ai', {
    method: 'POST',
    headers: { 'content-type': 'application/json' },
    body: JSON.stringify({ prompt, responseFormat, task }),
    signal,
  })
  if (!r.ok) throw new Error(`AI provider returned ${r.status}`)
  return r.text()
}

setAIProvider(provider)

The grid ships no model client at all. Model choice, routing, key handling, and what leaves the browser stay yours. signal is forwarded so you can cancel in flight, and task is tagged ('filter' | 'smart-fill' | 'summarize' | 'classify') so you can route cheap tasks to a small model and summaries to a stronger one.

That one provider powers the whole set:

aiFilter(api, query, opts?)        // NL query -> filter + sort plan
aiSmartFill(api, opts)             // examples -> proposed column values
aiSummarize(api, opts)             // row / selection / group / all -> text + bullets
aiClassify(api, opts)              // free-text cells -> bucketed labels
aiExport(api, query, opts?)        // NL query -> filter + group + format, then export
aiFindAnomalies(api, opts?)        // scan a slice for outliers and bad values
enableAiCharting(api)              // adds an AI button to the chart panel

With enableAiCharting, "revenue by country, stacked by product" becomes a chart config (type, group-by, split-by, measure, aggregate) applied live.

Helpers request responseFormat: 'json' and the grid parses the reply, stripping a single markdown fence first so models that wrap output in a code block still parse. Malformed output gives you a typed error rather than a silent wrong answer.

Nothing is imported until you import it, so if you do not want natural language anywhere, these tree-shake away and cost nothing. A bundled mockAIProvider returns deterministic canned shapes per task, which is how every AI demo on the site runs with no key.

5. The grid is a tool surface

The imperative SvGridApi maps cleanly onto function calling, so an agent can drive the UI rather than just describe it. Each method becomes one tool:

const tools = [
  { type: 'function', function: { name: 'setFilter',  /* columnId, operator, value */ } },
  { type: 'function', function: { name: 'setSort',    /* columnId, direction */ } },
  { type: 'function', function: { name: 'setGroupBy', /* columnIds */ } },
  { type: 'function', function: { name: 'clearAllFilters', parameters: { type: 'object' } } },
]

Point getDisplayedRows() at a read-only summariser and the model sees exactly what the user sees, filters and sorting and grouping already applied, instead of the raw dataset.

The same idea runs one level up. Alongside the docs tools, the MCP server exposes 27 studio_* tools that drive the same validated project model the visual designer uses: add entities, screens, blocks and components, bind a data source, set auth, RBAC, theme, the typed data layer, and the deploy target, then emit a full runnable SvelteKit app. Every edit goes through the model's own functions and validateProject, so an agent that guesses wrong gets a validation error instead of a broken app. Those generators are part of the commercial Studio tier; the docs and example tools are free.

Worth a look if

You are building tables in Svelte 5 and you are tired of correcting your assistant's grid code, or you want natural-language filtering in an app without shipping a model client and a vendor lock-in with it.

npm create @svgrid@latest
claude mcp add svgrid -- npx -y @svgrid/mcp

A visual data-app builder that generates SvelteKit source

bmarkov — Fri, 17 Jul 2026 07:45:00 +0000

Every few months I end up building the same thing: an admin screen. A table of
rows, a form to edit one, some validation, a chart, wire it to an API, add
paging. It is never hard, exactly. It is just hours of boilerplate I have typed
a hundred times.

The usual fix is a hosted builder (Retool, Appsmith, and friends). They are
great until the day you want to leave, and then you find out the app only runs
inside their platform. There is no "eject to code" button that gives you
something real.

So I built SvGrid Studio: a visual builder that composes those screens for
you and then hands you a plain SvelteKit project you own and host yourself.

What it actually does

You start from a schema, add screens made of blocks (grid, edit form, chart,
dashboard, KPI, master-detail), point them at a data source, and click
Generate app. Out comes real .svelte files, load functions, and form
actions. No runtime to phone home to, nothing interpreting a JSON config. If you
uninstall Studio tomorrow, the generated app keeps running.

The core idea is that one schema drives everything - the grid columns, the
edit form, the validation, and the codegen - so they can never drift apart:

const orders = {
  name: 'orders',
  idField: 'id',
  fields: [
    { field: 'id', type: 'text', primaryKey: true, hidden: { form: true } },
    { field: 'ref', type: 'text', label: 'Reference', required: true },
    { field: 'customerId', type: 'relation', label: 'Customer',
      relation: { entity: 'customers', labelField: 'name' } },
    { field: 'amount', type: 'number', label: 'Amount ($)' },
    { field: 'status', type: 'enum', options: [
      { value: 'draft', label: 'Draft' },
      { value: 'paid', label: 'Paid' },
      { value: 'refunded', label: 'Refunded' },
    ] },
  ],
}

That schema alone gives you a typed, sortable, filterable grid and a matching
edit form with the relation rendered as a searchable lookup. Studio just lets
you arrange those pieces on a canvas visually instead of wiring them by hand.

You own the output

This is the part I care about most. The generated project is ordinary
SvelteKit, the kind of code you would have written:

<!-- src/routes/orders/+page.svelte (generated) -->
<script lang="ts">
  import { SvGrid } from '@svgrid/grid'
  import { SvGridEditPanel } from '@svgrid/enterprise'
  import { orders } from '$lib/schema'
  let { data } = $props()
  let editing = $state(null)
</script>

<SvGrid data={data.rows} columns={schemaToColumns(orders)}
        onRowClick={(r) => (editing = r)} />

{#if editing}
  <SvGridEditPanel schema={orders} row={editing}
                   onSubmit={saveOrder} onCancel={() => (editing = null)} />
{/if}

It imports the @svgrid packages the way any app imports a library, but there
is no hosted platform in the loop. You commit it, you deploy it to Vercel or a
Node box or wherever, you change it freely.

One data-source contract, four backends

Every source implements the same ServerDataSource contract, so sort, filter,
paging and CRUD map uniformly onto whatever you have:

REST (any JSON API)
Supabase (PostgREST, with realtime and FK lookups auto-detected)
SQL
in-memory (for prototyping)

There is even a demo that runs real Postgres in the browser via PGlite
(WASM), so you can try the SQL path with no backend at all and watch the actual
query it generates under the toolbar.

Driving it with AI

There is an MCP server too. You can describe the app to an AI assistant
("customers, orders, a revenue dashboard"), get back the schema plus screens,
and then refine them in the visual designer. The AI produces the same schema
objects you would author by hand, so nothing is a black box.

Why Svelte 5

It is a real Svelte grid built on runes, not a React grid ported over, so the
output is small and, more importantly, readable. If a builder is going to
generate code you have to maintain, the code has to look like code a person
wrote. That is a lot easier to promise when the framework has no vdom and the
components compile away.

The honest bits

It is Svelte-only on purpose. I would rather go deep on SvelteKit than be a shallow cross-framework tool.
The free grid is MIT-spirited and standalone. Studio and the enterprise features (Excel/PDF export, pivot, the AI stuff) are paid with a license key - the AG-Grid model. I would rather say that up front than bury it.
The designer is still button-driven; drag-drop is only partly there, and the whole Studio layer is early.

Try it

The visual designer runs in the browser, no signup:
https://svgrid.com/studio

I would love feedback from two camps: Svelte folks on whether the generated code
is something you would actually want to own, and anyone who has been burned by a
hosted internal-tool builder on whether "generate code you keep" is the right
trade or just relocates the pain.

If you want to poke at the grid itself first, the examples gallery is at
https://svgrid.com/demos.

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