Vextro Get Started

Architecture

Vextro is a layered framework. Each layer has a clear responsibility — the schema layer drives the backend, which drives the admin UI, which remains extensible via plugins.

1
Backend

Convex

Database, server functions, file storage, and real-time sync — one service. Queries are reactive subscriptions. Mutations are atomic transactions. Actions handle side effects.

  • → Schema-validated document storage
  • → Atomic mutations as the write primitive
  • → Reactive queries — live updates without polling
  • → Scheduled functions and background jobs built in
2
Schema layer

Field builders (f.*)

The f namespace provides type-safe builders for every field type. Each builder produces a Convex validator, a TypeScript type, and an admin UI configuration — all from one call.

  • → f.text(), f.number(), f.boolean(), f.date()
  • → f.richText() with block-based content
  • → f.select(), f.relationship(), f.blocks()
  • → f.tabs(), f.row(), f.collapsible() for admin layout
3
Config layer

Collection & global definitions

Collections and globals are defined with defineVextroCollection and defineVextroGlobal. Vextro reads these at startup to register schema metadata, generate Convex validators, and configure the admin panel.

  • → defineVextroCollection() for repeating content types
  • → defineVextroGlobal() for singleton documents
  • → Hook registration (beforeChange, afterRead, onDelete)
  • → Access control rules per collection and field
4
Admin layer

Astro + Svelte UI

The admin panel is an Astro application with Svelte islands for interactive components. Mount a single VextroCatchallPage catchall route — all admin views are handled internally, no per-page UI code to write.

  • → VextroCatchallPage — one catchall route for all admin views
  • → handleVextroCatchallRequest for server-side redirect handling
  • → createVextroAdminModule registers all Convex queries and mutations
  • → Svelte islands for real-time reactive editors
5
Extension layer

Plugin system

Custom field types and admin behaviors via the plugin API. Plugins register field definitions that appear alongside built-in fields with full type safety.

  • → VextroPlugin interface for admin behavior extensions
  • → VextroFieldPlugin for custom field types
  • → Custom components with full Convex context access
  • → No monkey-patching — clean registration API

Hooks run inside Convex functions

Collection hooks (beforeChange, afterRead, onDelete) run inside Convex mutations and queries. This means hooks receive the full Convex context — database access, scheduled functions, storage, and more — without any custom runtime setup.

No middleware layer. No custom webhook infrastructure. Your business logic lives in the same TypeScript functions that power the rest of your Convex app.

Hook system documentation →