Scaffold

A scaffold is a full CRUD interface for a resource. It includes the index, view, create and edit pages, a schema definition and a database collection. If fields isn’t provided, the scaffold will be generated based on the existing database schema.

Syntax

$ vela generate scaffold [model] [fields...]
$ vela generate scaffold pets name:text age:number

This will create a full CRUD interface for the pets resource at /pets, the database collection and the Zod schema definition. The files created are:

src/lib/schemas/pet.ts
src/routes/(public)/pets/+page.svelte
src/routes/(public)/pets/+page.server.ts
src/routes/(public)/pets/new/+page.svelte
src/routes/(public)/pets/new/+page.server.ts
src/routes/(public)/pets/[id]/+page.svelte
src/routes/(public)/pets/[id]/+page.server.ts
src/routes/(public)/pets/[id]/edit/+page.svelte
src/routes/(public)/pets/[id]/edit/+page.server.ts
src/routes/(public)/pets/server.test.ts

The pets collection is created in the database and the TypeScript definitions are synced. The data table, form and dialog components it needs are installed automatically, and so are sveltekit-superforms and zod if the project doesn’t have them. The server test is only written when the project has the vela test:server harness (supertest installed).

The index page is a data table built on TanStack Table v9: sortable columns, a search box on the first text field, a filter for each select field, pagination and row selection. In a project without shadcn-svelte the pages are plain HTML instead (see below).

Options

  • --remote - Generate the create and update forms with SvelteKit remote functions instead of superforms. Needs shadcn-svelte.
  • --route <route> - Place the scaffold at a custom route. Defaults to the pluralized model name under (app) when auth is enabled, or (public) when it isn’t. A project with neither group gets it directly under src/routes.
  • --ui <shadcn|plain> - Generate shadcn-svelte components or plain HTML elements. Defaults to shadcn when the project has shadcn-svelte, plain otherwise.
  • --ai <description> - Design the scaffold with AI from a natural-language description

Plain HTML

--ui defaults to shadcn when the project has a components.json and the shadcn-svelte or bits-ui package. Otherwise the pages use plain HTML elements with no classes, and no components are installed: the index page is a <table> of every record, each with links to view and edit it and a button to delete it; the detail page is a <dl>; the create and edit forms are the same plain forms vela generate form writes. There is no sorting, filtering or pagination.

--ui plain does the same in a project that has shadcn-svelte; --ui shadcn in a project without it is an error — set it up with npx sv add tailwindcss, then npx shadcn-svelte@latest init, or run vela bless for the full upgrade. --remote has no plain version: without shadcn-svelte it is refused before the collection or any file is created, and with --ai, before the AI stages run.

Upgrading from TanStack Table v8

Projects set up before the data table moved to TanStack Table v9 have @tanstack/table-core 8 and the v8 table components. A v9 index page doesn’t compile against them, and upgrading them in place would break the index pages already generated, so the command refuses such a project before the collection or any file is created. To upgrade:

$ npm install @tanstack/table-core@^9.2.4
$ vela ui add data-table column-header faceted-filter pagination --overwrite

Then move the existing index pages to the v9 API (createTable with tableFeatures): TanStack’s migration guide covers it, and a freshly generated scaffold is a working example to compare against.

Route

$ vela generate scaffold projects name:text! --route "(app)/[team_id]/projects"

Keep the route you used — vela destroy scaffold needs the same --route to find the files again.

AI

Pro

--ai designs the scaffold from a natural-language description, in two stages: first the schema, then the layout. Pass a description instead of a model name and fields — passing both is an error.

$ vela generate scaffold --ai "listing info for hotels"

Requires an account and a linked project — run vela login and vela link first.