Docs / Guides / React admin dashboard

Feature 08 · Study guide

React admin dashboard

Generate and run a Vite + React admin UI that matches your schema models.

What you will learn
  • How to generate the admin app
  • How the UI discovers models
  • How to refresh after schema changes

1. Setup

$ tpy serve          # API on :8000
$ tpy admin          # writes admin/
$ cd admin
$ npm install
$ npm run dev        # UI on :5173

The wizard asks for the API base URL (default http://127.0.0.1:8000). From v0.1.10, pass --template <name> or place admin-theme.json in the project root to set title, accent color, and landing model.

2. How it works

  1. tpy admin reads schema.tpy.
  2. It generates admin/src/data/models.js (model registry).
  3. Shared pages (list + form) render every model using that registry.
  4. The UI calls your generated CRUD REST endpoints.

3. Important paths

PathRole
admin/src/data/models.jsSchema-driven registry
admin/src/components/Layout, DataTable, RecordForm
admin/src/pages/Generic list/form pages

4. After schema changes

$ tpy crud
$ tpy admin   # refresh UI registry
$ tpy migrate
With tpy auth, only super-admin and developer roles can use the dashboard login gate.