"

A data grid is usually the center of an internal tool, but it is never the whole app. Around it you need forms, detail views, authentication, a real database, and a way to ship the thing. SvGrid is the grid at the middle of that picture. SvGrid Studio is how you build the rest of the app around it, in SvelteKit, from a schema.

What SvGrid Studio is

SvGrid Studio is a data-app layer for SvelteKit. You describe your entities, pick a data source, and it generates a running application: grid screens with sorting, filtering, and inline editing, edit panels, master and detail views, dashboards, and navigation, all built on the same grid you already know. It is part visual designer, part code generator, and the output is a real SvelteKit project you own, not a black box on someone else's platform.

Learn more: https://svgrid.com/

Schema first

You start by describing your data. Conceptually, an entity looks like this:

const product = {
  name: 'product',
  fields: {
    name:    { type: 'string',  required: true },
    price:   { type: 'number' },
    category:{ type: 'string' },
    inStock: { type: 'boolean' },
  },
}

From that, Studio scaffolds a full CRUD screen: a grid to browse and edit rows, a form to create and update them, and the routing to tie it together. Add more entities and you get a navigable app, not a pile of disconnected pages.

Real data, not a demo sandbox

Studio is built to connect to the data you actually have. Out of the box it supports:

• In-memory data, for prototyping and demos.
• SQL databases through a typed data layer with migrations: PostgreSQL, MySQL, SQLite, and Turso.
• Supabase and REST APIs, for apps backed by an existing service.
• PGlite, for a local Postgres that runs in the browser.

You can start in memory to shape the app, then point the same schema at a real database when you are ready.

You own the generated code

This is the part that matters most. Studio does not lock you in. It emits a standard SvelteKit application: routes, components, a typed data layer, and configuration you can read, edit, and commit to your own repository. If you outgrow the designer, you keep the code and keep going. The grid screens are just SvGrid, so everything you can do with the grid by hand, you can do in a generated app.

An AI can build it for you

SvGrid ships an MCP (Model Context Protocol) server, and Studio exposes its project model through it. That means an AI assistant like Claude or Cursor can build and edit the same validated app model the visual designer uses: add entities, wire a data source, set up auth, and generate the app, with every change validated so it cannot produce a broken project. You describe the app you want, and the agent assembles it against real, version-pinned APIs.

Production concerns, handled

An internal tool is only useful once it is deployed and locked down. Studio includes:

• Authentication with email, OAuth, and two-factor sign-in.
• Role-based access control, so screens and actions respect who is signed in.
• A typed data layer and migrations, generated from your schema.
• A deploy pipeline, so the generated app ships to a real environment.

Try it

Scaffold a Studio app with a single command:

npm create @svgrid/studio@latest

Read the SvGrid Studio documentation for the full walkthrough, or browse the live demos to see the grid and the app screens it powers. If you already build internal tools on a data grid, Studio turns that grid into a full SvelteKit app without leaving the stack you own.