# 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](/sync). 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](/test/server) 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`](/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`](/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](https://tanstack.com/table/latest/docs/framework/svelte/guide/migrating) 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`](/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`](/account/login) and [`vela link`](/link) first.