d-bye

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.

template
| 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

  1. Define the table and its columns (type, NOT NULL, default, FK).
  2. Set foreign keys (e.g. supplier_id → suppliers) to render as combo boxes.
  3. Generate the screens (list, create, edit) from the spec.
  4. Check behavior in the preview (search, create, edit).
  5. Generate the React/TypeScript code and export as a ZIP.
  6. 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).

Generated React code (example, 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)