Skip to main content
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    └─────────────────────┘

​
In this section

Views

defineView — saved list configurations: visible columns, filters, groups.

Navigation Menu Items

defineNavigationMenuItem — sidebar entries pointing at views or external URLs.

Page Layouts

definePageLayout and definePageLayoutTab — tabs and widgets on a record’s detail page.

Front Components

defineFrontComponent — sandboxed React components that render inside Twenty.

Command Menu Items

defineCommandMenuItem — register front components as Cmd+K entries and quick actions.

​
Where the app surfaces

SurfaceWhat it controlsEntity
SidebarA custom entry linking to a saved view or external URLdefineNavigationMenuItem
Record listA saved configuration for an object — visible columns, order, filters, groupsdefineView
Record detail pageThe tabs and widgets on a record page (your own object’s, or a standard one)definePageLayout, definePageLayoutTab
Inside any of the aboveA custom React widget — buttons, forms, dashboards, integrationsdefineFrontComponent
Command menu (Cmd+K)A pinned quick action or hidden commanddefineCommandMenuItem
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.