Overview

What the layout layer covers

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, definePageLayoutTab and definePageLayoutWidget — 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`, `definePageLayoutWidget`
Inside any of the above	A custom React widget — buttons, forms, dashboards, integrations	`defineFrontComponent`
App settings	An entry in the app’s settings menu; declare as many as you need	`defineSettingsMenuItem`
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. They are still under active development: the sandbox implements a partial DOM, so advanced usages can fail. See Current limitations.

Developers

Apps

API

Self-Host

Contribute

UI Library

What the layout layer covers

In this section

Where the app surfaces

​What the layout layer covers

​In this section

​Where the app surfaces

What the layout layer covers

In this section

Where the app surfaces