Get Started

Add Vextro to a Convex + Astro project. You'll have a working, type-safe admin panel in about five minutes.

Install Vextro

Add Vextro to your Convex + Astro project.

npm install vextro

Configure your collections

Define collections using defineVextroCollection and the f.* field builders. Every field automatically produces a Convex validator and an admin UI widget.

import { defineVextroCollection, f } from 'vextro'

export const posts = defineVextroCollection({
  label: 'Posts',
  tableName: 'posts',
  fields: {
    title:  f.text({ required: true }),
    slug:   f.slug({ sourceField: 'title' }),
    body:   f.richText(),
    status: f.select({
      options: ['draft', 'published'],
      defaultValue: 'draft',
    }),
  },
})

Mount the admin routes

Add a catchall page at src/pages/admin/[...vextro].astro. Vextro handles all routing and UI internally — no layout code to write.

// src/pages/admin/[...vextro].astro
---
import VextroCatchallPage from 'vextro/astro/VextroCatchallPage.astro'
import { handleVextroCatchallRequest } from 'vextro/astro/catchall'
import { api } from '../../../convex/_generated/api'
import { adminConfig } from '@/config/admin'
import { getConvexClient } from '@/lib/convex'

const convex = getConvexClient(Astro.locals?.convexAuthToken)

const earlyResponse = await handleVextroCatchallRequest({
  request: Astro.request,
  params: Astro.params,
  basePath: adminConfig.basePath,
  locals: Astro.locals as Record<string, unknown>,
  cookies: Astro.cookies,
  redirect: Astro.redirect,
  convex,
  api,
})

if (earlyResponse) return earlyResponse
---

<VextroCatchallPage convex={convex} api={api} config={adminConfig} title="Admin" />

Register Convex functions

Wire up the Vextro admin module in your Convex directory. createVextroAdminModule registers all the mutations and queries Vextro needs.

// convex/admin.ts
import { query, mutation } from './_generated/server'
import { components } from './_generated/api'
import { createVextroAdminModule } from 'vextro/convex/admin'
import { vextro } from './schema'

const admin = createVextroAdminModule({
  query,
  mutation,
  components,
  collectionDefinitions: vextro.collectionDefinitions,
  globalDefinitions: vextro.globalDefinitions,
})

export const { listCollections, listGlobals, getShellData } = admin
// export all remaining admin handlers...

You're ready

Start your dev server. Navigate to /admin to see the auto-generated panel. All collections, fields, and validation are live from your config.

npx astro dev

Explore the docs

Once you have the basics running, these sections cover the features most teams reach for next.

Key concepts →

Field builders, collections, globals, and the config file in depth.

Hook system →

Run code before saves, after reads, and on deletion — with full Convex context.

Schema diagnostics →

Built-in page that shows fingerprint sync state and stale metadata.

Reliability →

Depth certification tiers, CI gates, and the published contract.

Everything is in the docs

API reference, field type guide, authentication setup, and more.

Read the Docs