Overview

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

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`
App settings	A custom configuration section inside the app’s Settings tab, in place of the default variables UI	`defineSettingsFrontComponent`
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.

Apps

API

Self-Host

Contribute

Overview

In this section

Views

Navigation Menu Items

Page Layouts

Front Components

Command Menu Items

Where the app surfaces

​In this section

Views

Navigation Menu Items

Page Layouts

Front Components

Command Menu Items

​Where the app surfaces

In this section

Where the app surfaces