A visual data-app builder that generates SvelteKit source
Every few months I end up building the same thing: an admin screen. A table of The usual fix is a hosted builder (Retool, Appsmith, and friends). They are So I built SvGrid Studio: a visual builder that composes those screens for SvelteKit project you own and host yourself. You start from a schema,

Every few months I end up building the same thing: an admin screen. A table of The usual fix is a hosted builder (Retool, Appsmith, and friends). They are So I built SvGrid Studio: a visual builder that composes those screens for SvelteKit project you own and host yourself. You start from a schema, add screens made of blocks (grid, edit form, chart, Generate app. Out comes real .svelte files, load functions, and form The core idea is that one schema drives everything - the grid columns, the 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 This is the part I care about most. The generated project is ordinary <!-- 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 Every source implements the same ServerDataSource contract, so sort, filter, 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 There is an MCP server too. You can describe the app to an AI assistant It is a real Svelte grid built on runes, not a React grid ported over, so the readable. If a builder is going to 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. 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 If you want to poke at the grid itself first, the examples gallery is at https://svgrid.com/demos.
Key Takeaways
- •Every few months I end up building the same thing: an admin screen
- •This story was reported by Dev.to, covering developments in the dev space.
- •AI advancements continue to reshape industries — read the full article on Dev.to for complete coverage.
📖 Continue reading the full article:
Read Full Article on Dev.to →


