Scaffold a runnable SvGrid Studio data app in one command.

npm create @svgrid/studio@latest
# or into a named directory
npm create @svgrid/studio@latest my-data-app
# pnpm / yarn
pnpm create @svgrid/studio my-data-app
yarn create @svgrid/studio my-data-app

Then:

cd my-data-app
npm install
npm run dev

From your own schema

Point it at an existing Drizzle schema.ts or Prisma schema.prisma (auto-detected) and it scaffolds a screen for every table/model instead of the seeded example - foreign keys become searchable lookups:

npm create @svgrid/studio@latest my-app -- --from ./prisma/schema.prisma
npm create @svgrid/studio@latest my-app -- --from ./src/lib/db/schema.ts

From a designer project

Export a studio.config.json from the visual app designer and generate the exact screens + blocks you arranged:

npm create @svgrid/studio@latest my-app -- --project ./studio.config.json

Pick a theme

Running interactively, you'll be asked to pick a theme (one of @svgrid/grid's 19 built-in presets - shadcn, Tailwind, Material, Excel, Fluent, and more) and whether to start in light or dark mode. Both are also available as flags for scripted use:

npm create @svgrid/studio@latest my-app -- --theme material --dark

Skipped when generating --project ./studio.config.json - that export already carries the theme you chose in the designer.

What you get

A full SvelteKit app - not a snippet - wired end to end:

• Nav shell + theme (plain CSS, light/dark aware, no Tailwind) - your pick from @svgrid/grid's built-in presets.
• Two linked entities - Customers and Orders - where an order references a customer through a searchable lookup field.
• Grid + modal CRUD on every screen: sort, filter, global search, paging, multi-select delete, and a draggable / resizable / pinnable edit modal - all driven by a single EntitySchema per entity.
• Seeded in-memory data, so it runs with no backend to set up.

Everything is schema-driven. Open src/lib/schemas.ts, add a field, and it appears in both the grid and the form.

Going to a real database

The starter's data sources are the only thing tied to in-memory storage. Swap createInMemoryDataSource in src/lib/data.ts for a real adapter - or generate a connected entity from an existing table:

npx @svgrid/studio add public.invoices --db postgres --url "$DATABASE_URL"

The grid, form, sorting, filtering, and paging keep working unchanged.

Requirements

• Node.js >= 18

Links

• Docs: https://svgrid.com/docs/enterprise/studio/
• Grid: @svgrid/grid
• Studio / enterprise: @svgrid/enterprise