Introduction

Vertz is a TypeScript stack that covers database, API, and UI. Define your schema once — get a typed database layer, a typed API with auto-generated OpenAPI, and a compiled UI with fine-grained reactivity. If it builds, it works.

Define your schema

d.table() and d.model() — define columns, constraints, and relations. This is the single source of truth for your data shape. Types flow from here to every other layer.

Create an entity

entity() — turn your schema into API endpoints. Define which operations to expose, who can access them, and add custom actions. One entity = a full REST API for that resource.

Serve the API

createServer() — wire up entities and serve your API. Routes and OpenAPI docs are auto-generated from your entities.

Build the UI

A compiled UI framework with fine-grained reactivity, scoped CSS, type-safe routing, SSR, and built-in data fetching — replacing React, Next.js, and Tailwind in one stack. Use query() and form() to connect to your API with full type safety end-to-end.

See it in action

Schema
API
Server
UI

import { d } from 'vertz/db';

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

export const todosModel = d.model(todosTable);

import { entity } from 'vertz/server';
import { todosModel } from './schema';

export const todos = entity('todos', {
  model: todosModel,
  access: { list: () => true, get: () => true, create: () => true },
});

One entity = full CRUD API. Access control is required, not optional.

import { createDb } from 'vertz/db';
import { createEnv, createServer } from 'vertz/server';
import { s } from 'vertz/schema';
import { todosModel } from './schema';
import { todos } from './entities/todos';

const env = createEnv({
  schema: s.object({
    PORT: s.coerce.number().default(3000),
    DATABASE_URL: s.string(),
  }),
});

const db = createDb({
  url: env.DATABASE_URL,
  models: { todos: todosModel },
});

createServer({ entities: [todos], db }).listen(env.PORT);
// POST /api/todos, GET /api/todos, GET /api/todos/:id — done.

import { query } from 'vertz/ui';
import { api } from './generated/client';

export function TodoApp() {
  const todos = query(api.todos.list());

  return (
    <ul>
      {todos.data?.items.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
}

Fully typed from schema to UI. Change a column type — tsc lights up red across every layer.

Key ideas

Types flow everywhere

One schema definition drives your database, API, and UI types. Change a column — the type error shows up in your component, not at runtime.

Compiler-driven reactivity

Write plain let and const in your UI. The compiler handles signals, computed values, and reactive props — you never call signal() directly.

Production-ready by default

OpenAPI generation, access control, environment validation, SSR — built in from day one, not bolted on later.

One way to do things

Strong conventions mean less guessing for your team and your LLM. If there’s a Vertz way, that’s the only way.

The stack

Layer	What	Package
Schema	40+ column types, runtime validation, JSON Schema output	`vertz/schema`
Database	Typed queries, migrations, PostgreSQL + SQLite + D1	`vertz/db`
Server	Entity CRUD, services, access control, CORS, `createEnv()`	`vertz/server`
UI	Compiled signals, JSX, router, `query()`, `form()`, scoped CSS, SSR	`vertz/ui`
Primitives	Headless a11y components — Dialog, Select, Tabs, Menu	`vertz/ui-primitives`
Tooling	Dev server, build, codegen, static analysis	`vertz` (CLI)
Deploy	Cloudflare Workers adapter	`vertz/cloudflare`
Testing	`createTestApp()` with service mocking	`vertz/testing`
HTTP	Type-safe client with retries, streaming, auth strategies	`vertz/fetch`

Install everything with one dependency:

bun add vertz

Then import what you need: vertz/server, vertz/db, vertz/ui, vertz/schema, vertz/testing.

Next steps

Quickstart

Build your first Vertz app in 5 minutes.

Installation

Add Vertz to an existing project.

UI Components

Write components with JSX and the compiler.

Reactivity

Understand signals, computed values, and effects.

Getting Started

vertz/ui

vertz/ui-compiler

vertz/icons

vertz/schema

vertz/errors

vertz/server

vertz/db

vertz/fetch

Deployment

Testing

Introduction

See it in action

Key ideas

Types flow everywhere

Compiler-driven reactivity

Production-ready by default

One way to do things

The stack

Next steps

Quickstart

Installation

UI Components

Reactivity

Getting Started

vertz/ui

vertz/ui-compiler

vertz/icons

vertz/schema

vertz/errors

vertz/server

vertz/db

vertz/fetch

Deployment

Testing

​See it in action

​Key ideas

Types flow everywhere

Compiler-driven reactivity

Production-ready by default

One way to do things

​The stack

​Next steps

Quickstart

Installation

UI Components

Reactivity

See it in action

Key ideas

The stack

Next steps