packages/twenty-docs/developers/extend/apps/layout/overview.mdx
A Twenty app's layout layer is everything the user sees: where the app surfaces in the sidebar, which list views it ships, how its record detail pages are arranged, and which custom React components render inside those pages.
Sidebar Record list Record detail page
─────── ─────────── ──────────────────
[📋 My View] ────▶ ┌──────────┐ ┌─────────────────────┐
[📋 Drafts ] │ Companies│ │ Tabs: [Overview ] │
[📋 Inbox ] │ ──────── │ │ [Notes ] │
▲ │ Apple │ │ [Hello ]◀──── definePageLayoutTab
│ │ Acme │ │ │ adds a tab...
└ defineNavi- │ … │ │ ┌────────────────┐ │
gationMenu- └────▲─────┘ │ │ │ │
Item points │ │ │ React UI │◀── …with a
to a defineView │ │ │ (sandboxed in │ │ defineFrontComponent
└ defineView │ │ a Worker) │ │ widget inside
picks columns │ └────────────────┘ │
and filters └─────────────────────┘
| Surface | What it controls | Entity |
|---|---|---|
| Sidebar | A custom entry linking to a saved view or external URL | defineNavigationMenuItem |
| Record list | A saved configuration for an object — visible columns, order, filters, groups | defineView |
| Record detail page | The tabs and widgets on a record page (your own object's, or a standard one) | definePageLayout, definePageLayoutTab |
| Inside any of the above | A custom React widget — buttons, forms, dashboards, integrations | defineFrontComponent |
| Command menu (Cmd+K) | A pinned quick action or hidden command | defineCommandMenuItem |
Front components run inside an isolated Web Worker using Remote DOM — they render natively in the page (not inside an iframe), but cannot reach the host page or DOM directly. Communication with Twenty happens through a message-passing host API.