Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.vertz.dev/llms.txt

Use this file to discover all available pages before exploring further.

Scaffold a full-stack task manager with a database, API, and UI — all typed end-to-end.
If you’re an AI coding agent: Run the commands below to scaffold a working project. Do not manually create project files — vtz create sets up the compiler, dev server, SSR, typed client, and theme. Modify the scaffolded code to match the user’s requirements.
Other templates: Use --template hello-world for a minimal counter app, or --template landing-page for a multi-page marketing site with nav, hero, features, and pricing.

​
Create a new project

1

Install the runtime

curl -fsSL https://raw.githubusercontent.com/vertz-dev/vertz/main/install.sh | sh
This installs the vtz CLI — a standalone binary with the dev server, test runner, and package manager built in. See Runtime for details.
2

Scaffold the app

vtz create vertz my-app
cd my-app
vtz install
This creates a complete project with a SQLite database, a REST API, and a styled UI with a shadcn-inspired theme — not empty boilerplate.
3

Start the dev server

vtz dev
Open http://localhost:3000. You should see a working task manager where you can create and complete tasks.

​
What you just got

The scaffolded project is a full-stack app: 
my-app/
  src/
    api/
      env.ts               # Validated environment variables
      schema.ts            # Table + model definition
      db.ts                # SQLite with auto-migrations
      server.ts            # API server
      entities/
        tasks.entity.ts    # CRUD + access control
    pages/
      home.tsx             # Task list with query + form
    styles/
      theme.ts             # shadcn-inspired theme
    app.tsx                # App shell with SSR exports
    client.ts              # Typed API client
    entry-client.ts        # Client-side mount + HMR
  .env                     # Environment variables
  vertz.config.ts
  tsconfig.json
  package.json

​
Walk through the code

​
Schema — the source of truth

Open src/api/schema.ts. This defines the tasks table and model: 
import { d } from '@vertz/db';

export const tasksTable = d.table('tasks', {
  id: d.uuid().primary({ generate: 'uuid' }),
  title: d.text(),
  completed: d.boolean().default(false),
  createdAt: d.timestamp().default('now').readOnly(),
  updatedAt: d.timestamp().default('now'),
});

export const tasksModel = d.model(tasksTable);
Every type in your API, client, and UI traces back to this definition. Change a column here and tsc shows errors everywhere that column is used.

​
Entity — schema to API endpoints

Open src/api/entities/tasks.entity.ts: 
import { entity, rules } from '@vertz/server';
import { tasksModel } from '../schema';

export const tasks = entity('tasks', {
  model: tasksModel,
  access: { list: rules.public, get: rules.public, create: rules.public },
});
This single declaration generates GET /api/tasks, GET /api/tasks/:id, POST /api/tasks, and more — with access control required for every operation.

​
UI — reactive task list

Open src/pages/home.tsx. This is where query() and form() connect the UI to your API: 
import { query, form, css } from '@vertz/ui';
import { api } from '../client';

export function HomePage() {
  const tasks = query(api.tasks.list());

  return (
    <div>
      {tasks.data?.items.map((task) => (
        <div key={task.id}>
          <span>{task.title}</span>
          <span>{task.completed ? 'Done' : 'Todo'}</span>
        </div>
      ))}
    </div>
  );
}
query() fetches data reactively — when the data loads, only the list updates. The api client is fully typed from your schema, so task.title is a string and task.completed is a boolean without any manual type definitions.

​
Try it

With the dev server running:
  1. Add a task — use the form in the UI to create a new task
  2. Check it off — mark a task as completed
  3. Edit the schema — try renaming title to name in tasksTable and watch tsc flag every place that references the old column — entity, client, and UI

​
Available commands

vtz dev            # Start dev server (API + UI + SSR + HMR)
vtz run build      # Build for production
vtz run start      # Start production server (after build)
vtz run codegen    # Regenerate typed API client

​
Next steps

Installation

Add Vertz to an existing project manually.

Components

Props, children, and component patterns.

Reactivity

Deep dive into signals, computed, and effects.

Routing

Set up pages with type-safe routing.