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

Comments

[Mustafa ERBAY]

I like the philosophy here. Owning the generated code instead of being locked into a platform is a huge plus.

One thing I’d be curious about is how well the generated code holds up after months of manual changes. That’s usually where code generators start to struggle. If developers heavily customize the output, can they safely regenerate later, or is it meant to be a one-way export?

Also, thanks for being upfront about the commercial features instead of hiding them behind marketing. That honesty is refreshing.