The backend sends a PageContract JSON object. The frontend renders it. No manual wiring needed.
import { ContractPage, registerDefaults } from '@middag-io/react';
import '@middag-io/react/style.css';
// Register all built-in shells, layouts, and blocks
registerDefaults();
// Render a page from a contract
<ContractPage contract={contract} />The rendering pipeline:
Backend (PHP) --> Inertia --> ContractPage --> Shell --> Layout --> Blocks| Layer | Description |
|---|---|
| Shell | Outermost wrapper (sidebar, header, navigation) |
| Layout | Region arrangement inside the shell (stack, sidebar, dashboard, wizard) |
| Block | Atomic rendering unit placed in a layout region |
| Provider | React context bridges for i18n, auth, flash, scope, progress |
# Community — wizard auto-detects your host and scaffolds ui/
npx create-middag-ui
# PRO — source maps, mock SPA, full exports
npx @middag-io/create-middag-ui
# Then:
cd ui && npm install && npm run dev:mockOr install manually: npm install @middag-io/react (see Getting Started for auth setup).
| Command | Description |
|---|---|
npx create-middag-ui | Bootstrap ui/ (Community) |
npx @middag-io/create-middag-ui | Bootstrap ui/ (PRO) |
npx @middag-io/react doctor | Validate consumer project setup |
npx @middag-io/react dev | Start mock dev server |
npx @middag-io/react add-block <type> | Scaffold a new block type |
npx @middag-io/react upgrade | Check for updates and run codemods |
See CLI Reference for details.