SvGrid Studio

Studio is the grid-centric data-app layer in @svgrid/enterprise: turn a database or schema into a production-ready CRUD screen - grid, edit form, and SvelteKit API route - in seconds. One EntitySchema drives the grid columns, the edit form, validation, and the generated code.

It is part of the Enterprise license and is soft-gate only - everything runs unlicensed, it just nudges. See licensing.

New to Studio? Follow the step-by-step Getting started guide - from an empty app to a working Customers screen, no prior SvGrid experience assumed.

Prefer not to write code? Build the same app visually - point, click, preview, then press one button to generate it. Start with Build it visually, or open a one-click sample app.

Live demos: Data-app Studio (the whole stack: grid + edit modal + schema designer) · Live SQL (real Postgres in the browser via PGlite) · Supabase (your own hosted Postgres, straight from the browser) · Chart (a live chart panel beside the grid; click to filter).

A CRUD app in under a minute

npm i @svgrid/grid @svgrid/enterprise
npx @svgrid/studio add customers --db postgres --url "$DATABASE_URL"
npm run dev            # open /customers

You get three files - the entity schema, a SvelteKit +server.ts API route, and a +page.svelte screen - and a working /customers page with search, sort, pagination, multi-select delete, and create/edit. Re-running add is safe: only the svgrid:managed regions are regenerated.

How it fits together

One EntitySchema is the single source of truth. The grid columns, the edit form, the dashboard, the generated SvelteKit code, and the data layer all derive from it - so a change to the schema flows everywhere at once.

Data binding options

Studio binds a screen to data through one small contract - ServerDataSource (read + create + update + delete). Every option below implements it, so the grid, form, sorting, filtering, and pagination work identically no matter where the data lives. Pick your source:

New to how binding works? Start with Data binding - the ServerDataSource contract and how sort / filter / page / CRUD flow.

Three ways to build

All three produce the same output, because they share one scaffold() core.

1. CLI - npx @svgrid/studio add ... (deterministic, no AI required).

2. AI / MCP - with @svgrid/mcp configured, ask your agent (Claude Code, Cursor, ...) to build a screen for a table; it calls introspect_source -> scaffold_entity, and the output is compile-verified before it's written.

3. Visual designer - <SvSchemaDesigner>: author the schema, preview the grid + form live, and click Generate code. For a whole multi-screen app, the visual app designer composes grids, charts, dashboards, and master-detail across many entities.

Here a ready-made CRM sample is open in the app designer - KPI tiles and a deal-pipeline chart, all built by pointing and clicking, no code:

What you get in a generated screen

A shippable data screen, not a stub:

• Grid with server-side sort, filter, global search, and columns that fit the width.
• Native pagination footer driven by the server row count.
• Create / edit in a themed modal or slide-over panel with built-in validation (required, email/URL, min/max, length, regex, plus any Zod / Standard Schema validator you add).
• Multi-select delete with optimistic updates (rows change instantly, roll back on error).
• Loading, error, and empty states, light/dark theming via the grid tokens.

The building blocks (use them directly)

The grid renders its own sort, filter, and pagination UI in server mode via externalSort / externalFilter / externalPagination - you pass rowCount and pageIndex, it emits change events, you fetch the page.

Production & enterprise ready

• Real code, no lock-in - Studio generates plain SvelteKit files you own and can edit. There is no runtime, no proprietary host.
• No telemetry, no network calls - licensing is validated locally (details); nothing phones home.
• Parameterized SQL - every value is bound, and identifiers come from the schema-whitelisted plan, so there is no injection surface in the data layer.
• SvelteKit-native - server load / actions, $lib, SSR-safe, idiomatic Svelte 5 runes.
• Bring your own key - the AI generator uses your own model API key; your data and schema never touch our servers.
• One license - Studio is part of the Enterprise license; no separate SKU.

All Studio topics

Start here

• Getting started - zero to a working CRUD screen, step by step

Data binding

• Data binding - the ServerDataSource contract
• Databases - PostgreSQL, Supabase, MySQL, SQL Server, SQLite
• Supabase - hosted Postgres, from the browser or the server
• Real-time - live grid over Supabase change streams
• Drizzle schema - scaffold from a schema.ts file
• REST & custom APIs - any HTTP / bespoke backend
• OData & GraphQL - map the request to OData / GraphQL
• In-memory - static / prototype data

Build

• The Studio CLI - the add command + all flags
• Visual designer - author schemas in a UI
• AI generation - the MCP server + agents

Reference

• The EntitySchema - the model everything derives from
• Sorting, filtering & paging - the grid's server-mode UI
• Edit forms & validation - SvGridEditPanel
• Relations & master-detail - related entities from the schema
• Master-detail - the SvGridMasterDetail component
• Auth & secured screens - Supabase Auth + RLS per user
• Code generation - what's emitted + safe regeneration

Tutorials

• Supabase CRUD grid - a grid wired to Supabase with full create / edit / delete, in one page
• Build a CRM - companies, contacts, deals - end to end

Deploy & style

• Deploying a Studio app - production checklist
• Themes & styling - --sg-* tokens, light / dark, your design system

Help

• Troubleshooting & FAQ - common issues + answers

Enterprise

• Licensing · MCP server · Evaluation