# Migrating from Smart.Grid (Smart Web Components) Smart.Grid (htmlelements.com) and SvGrid come from the **same team**. Smart.Grid is a framework-agnostic custom element - it even works inside Svelte today - while SvGrid is the reactive, Svelte-5-native option. If you are standardising a Svelte app on idiomatic components, this guide maps a Smart.Grid setup onto SvGrid. > Estimated effort: **2-4 hours** per grid. The main shift is from a > custom element bound through properties / attributes to a reactive > Svelte component. > **Facts, checked 12 Sep 2026.** `smart-webcomponents` 27.0.1, ISC, last published 13 Aug 2026, 6,620 npm downloads in the 30 days to 10 Sep 2026. `@svgrid/grid` 3.0.3, MIT, last published 11 Sep 2026, 16,900 npm downloads in the same window. Bundle, minified and gzipped, each package built alone with Svelte external: SvGrid 3.0.27 99.7 KB JS + 11.3 KB CSS (measured 28 Oct 2026). Smart.Grid pricing, as its site states it: htmlelements.com lists the Developer License at $499 (on sale at $399) per developer, perpetual, or $39 per month, and the Team License at $1,499 per five developers; the free Community License covers the core components but not the Grid (https://www.htmlelements.com/license/, read 12 Sep 2026). SvGrid: MIT core; @svgrid/enterprise from $299 per developer per year (Indie, under $1M revenue), $599 for Enterprise. Side by side, with sources: [SvGrid vs Smart.Grid (Smart Web Components)](https://svgrid.com/compare/smart-grid/). ## Vocabulary cheat sheet | Smart.Grid (web component) | sv-grid | | ---------------------------------------- | ----------------------------------------- | | `` element | `` | | `grid.dataSource = new Smart.DataAdapter`| `data` array (or `externalSort/Filter`) | | `{ label: 'Name', dataField: 'name' }` | `{ header: 'Name', field: 'name' }` | | `template` / cell template | `cell: (c) => renderSnippet(...)` | | `editing` + editor | `enableInlineEditing` + `editorType` | | `sorting` / `filtering` | `rowSortingFeature` / `columnFilteringFeature` | | `grouping` | `columnGroupingFeature` + `api.setGroupBy()` | | `paging` + `pager` | `showPagination` | | element events (`change`, ...) | `onCellValueChange`, `onApiReady` | | `theme` attribute | `--sg-*` tokens / Tailwind | ## Before / after The example at the end of this page runs against these rows: ```svelte ``` ```diff - - + + + ``` ## What changes - **Custom element + DataAdapter → reactive `$state`.** Data binding is a prop, not an assigned `dataSource`. - **Element templates → Svelte snippets** via `renderSnippet`. - **`theme` attribute → `--sg-*` tokens.** ## A note on family Smart.Grid is a genuinely good framework-agnostic grid from the same team, and it runs in Svelte as a web component. The reason to pick SvGrid is *idiomatic* Svelte: runes, snippets, and an MIT core. If you need one grid across Angular, React, Vue, Svelte, and vanilla, Smart.Grid is the right call. ## Frequently asked questions ### Is SvGrid from the same team as Smart.Grid? Yes. Smart Web Components (htmlelements.com) and SvGrid are built by the same team. SvGrid is the Svelte-5-native option with an MIT community core. ### Can I keep using Smart.Grid in Svelte instead? Yes - Smart.Grid is a web component and works inside Svelte. Choose SvGrid when you want an idiomatic Svelte component (runes + snippets) rather than a custom element bound through properties. ### How do Smart.Grid columns map to SvGrid? `label` becomes `header`, `dataField` becomes `field`, and element templates become `renderSnippet` cells. Sorting / filtering / grouping move to registered features. ## More examples ### Smart.Chart integration Mounts a web component (htmlelements.com) and pipes the grid's displayed rows into its dataSource. Re-aggregates on every filter / sort. > Live demo: Smart.Chart integration - https://svgrid.com/demos/77-smart-chart/ ## What you end up with Sorting, filtering and editing with a footer summary. ```svelte ``` ## The ported grid, running Sorting, filtering, editing and a totals row - the working set a Smart grid usually carries, as props. ```svelte ``` ## See also - [SvGrid vs Smart.Grid](https://svgrid.com/compare/smart-grid/) - the side-by-side comparison - [About SvGrid](https://svgrid.com/about/) - built by jQWidgets / htmlelements.com - [Cell components](https://svgrid.com/docs/help/cells/cell-components/) - snippet-based custom cells --- SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/migrating-from-smart-grid/ . All docs: https://svgrid.com/llms.txt