Generate a React admin panel (CRUD) from your schema
Define your table’s columns and d-bye generates list, create, edit, and search CRUD screens in React/TypeScript — with combo boxes for foreign keys and typed validation. And not just the UI: from the same spec it generates the back end (Rust actix / Node.js) and PostgreSQL DDL, consistent across the stack and exported as a ZIP you own.
What is a React admin panel generator?
An admin panel (admin/CRUD) lists business data and lets you create, edit, delete, and search it. Because every table ends up as roughly the same “list + form + search,” it’s a great fit for generating from a schema.
d-bye treats the design spec as the single source of truth: define tables, columns, constraints, and foreign keys, and it generates the React admin from them. The AI drafts the spec, not raw code, then passes type checks and a compile check — so it never ships broken screen code.
If you want to start from the DB schema, see our table definition template and how-to. What you define becomes the screens, API, and DDL.
What the generated admin includes
Per table, at least these are generated together.
- List
- A paginated, sortable list table. Columns are built from your defined fields.
- Create / edit form
- Typed inputs (text, number, date, boolean) with validation.
- Foreign keys (FK)
- FKs like supplier_id render as a combo box that looks up the referenced table.
- Search / filter
- Type-aware search (partial, range, exact).
- API wiring
- Wired to the generated back end’s (actix/Node) CRUD endpoints.
- Routing
- List → new → edit navigation.
Start by defining the schema (copy-paste template)
Below is a products table example. Copy it, adapt it to your table, and build the same in d-bye visually — that definition generates a React admin like the code below.
| Logical name | Physical name | Type | PK | NOT NULL | Description | |--------------|---------------|------|:--:|:--------:|-------------| | ID | id | uuid | x | x | Primary key | | Name | name | varchar(120) | | x | Shown in list & form | | SKU | sku | varchar(40) | | x | Unique | | Price | price | numeric(10,2) | | x | Money-formatted | | Supplier | supplier_id | uuid (FK) | | x | References suppliers (combo box) |
How to generate a React admin panel
- Define the table and its columns (type, NOT NULL, default, FK).
- Set foreign keys (e.g. supplier_id → suppliers) to render as combo boxes.
- Generate the screens (list, create, edit) from the spec.
- Check behavior in the preview (search, create, edit).
- Generate the React/TypeScript code and export as a ZIP.
- Drop it into your repo, extend it by hand, and deploy.
With d-bye: the definition becomes a working React admin
Build the products definition above visually and the list screen is generated as roughly this React/TypeScript code (excerpt).
// ProductsList.tsx — generated by d-bye (excerpt)
export function ProductsList() {
const { data, loading } = useList<Product>("/api/products");
if (loading) return <Spinner />;
return (
<DataTable
rows={data}
columns={[
{ key: "name", label: "Name" },
{ key: "sku", label: "SKU" },
{ key: "price", label: "Price", format: money },
{ key: "supplier_id", label: "Supplier", lookup: "suppliers" },
]}
onCreate={() => navigate("/products/new")}
onEdit={(row) => navigate(`/products/${row.id}/edit`)}
/>
);
}- ✓Not just the screens — also the back end (Rust actix / Node.js) CRUD API and PostgreSQL DDL.
- ✓All derived from one spec, so UI, API, and DB agree across the stack.
- ✓Every generation passes type checks and a compile check, so it never ships broken code.
- ✓Export everything as a ZIP and run it on your own infrastructure — no lock-in.
FAQ
- Can I generate a React admin panel from a database schema?
- Yes. Define tables and columns (types, constraints, foreign keys), and it generates list, create, edit, and search CRUD screens in React/TypeScript. The same spec also generates the back end and PostgreSQL DDL.
- Can I edit the code by hand afterward?
- The output is plain React/TypeScript, exported as a ZIP. You can read, modify, add tests, and deploy it anywhere. To change the design, edit the spec and regenerate.
- Does it generate the back end and DB too?
- Yes. d-bye generates the screens (React), the API (actix or Node), and PostgreSQL DDL as one set — the whole business app, not just the admin UI.
- Will the AI-generated screen code break?
- d-bye has the AI draft a spec rather than raw code, then runs type checks and a compile check as a gate. See the Learn guide “an AI code generator that actually works” for how it works.
Next step
- →Try a template’s admin as a working preview in the free Sandbox
- →Start from working templates: inventory, attendance, approvals, contacts
- →Full download requires Personal or higher (design and preview are free, no credit card)