What a "page" is now
In the Tadabase builder a page is data: a row in your app's pages table holding a JSON layout of rows, columns, and components, wrapped by a layout for the header, footer, and menu. The server renders it.
In Vibe a page is code: a single React file under src/pages/, one file per route. There is no drag-drop canvas and no page JSON — the agent writes and edits these files for you, and you can read or hand-edit them any time.
| Builder page | Vibe page | |
|---|---|---|
| Stored as | JSON layout in the pages table | A .tsx file in src/pages/ |
| Rendered by | The Tadabase page renderer | React Router in your app |
| Built by | Drag-drop components | The agent (as code) |
| Detail / edit / add | Separate child pages | Routes like /:id and /:id/edit |
Routing and navigation
When Vibe scaffolds from a table it typically generates four routes — a list, a new-record form, a detail view, and an edit form:
/customers → list
/customers/new → create form
/customers/:id → detail
/customers/:id/edit → edit formRoutes are registered in src/App.tsx (one <Route> each). The sidebar is a plain list in tada.config.json — add an entry there to make a route show up in the nav.
Where access control lives
Two layers, and only one of them moves. Data-level security — which records and fields a user can see — stays server-side in Tadabase RLS and is identical for both page types. What changes is page-level gating: the builder's "restrict to logged-in / allow roles" page settings become a <Protected> route wrapper in your React code.