# Twenty Documentation: English Developers

## Developers

### Overview

- [Developers](https://docs.twenty.com/developers/introduction.md): Build apps, use the API, self-host, or contribute to the codebase.

### Apps

#### Getting Started

- [Quick Start](https://docs.twenty.com/developers/extend/apps/getting-started/quick-start.md): Create your first Twenty app in minutes.
- [Concepts](https://docs.twenty.com/developers/extend/apps/getting-started/concepts.md): How Twenty apps work — entity model, sandboxing, and the install lifecycle.
- [Project Structure](https://docs.twenty.com/developers/extend/apps/getting-started/project-structure.md): What's inside a scaffolded Twenty app — files, folders, and what each one does.
- [Local Server](https://docs.twenty.com/developers/extend/apps/getting-started/local-server.md): Manage the local Twenty Docker server — start, stop, upgrade, parallel test instance, and manual SDK setup.
- [Scaffolding](https://docs.twenty.com/developers/extend/apps/getting-started/scaffolding.md): Generate entity files interactively with yarn twenty dev:add — objects, fields, views, logic functions, and more.
- [Good practices](https://docs.twenty.com/developers/extend/apps/getting-started/good-practices.md): How to develop an app that works and scales well across many workspaces.
- [Troubleshooting](https://docs.twenty.com/developers/extend/apps/getting-started/troubleshooting.md): Common first-run issues — Docker, Node version, Yarn, dependencies.

#### Tutorial

- [Tutorial: Document Generator](https://docs.twenty.com/developers/extend/apps/tutorials/document-generator/overview.md): Build a real Twenty app that generates personalized documents from your CRM data.
- [1. Data model](https://docs.twenty.com/developers/extend/apps/tutorials/document-generator/data-model.md): Model documents and templates with objects, fields, and a relation.
- [2. Generating documents](https://docs.twenty.com/developers/extend/apps/tutorials/document-generator/generating-documents.md): One logic function, exposed as an AI tool and a workflow action.
- [3. HTTP routes](https://docs.twenty.com/developers/extend/apps/tutorials/document-generator/http-routes.md): Trigger the function over HTTP and render documents as web pages.
- [4. Building the UI](https://docs.twenty.com/developers/extend/apps/tutorials/document-generator/building-the-ui.md): Views, sidebar navigation, a command, and front components.
- [5. An AI agent](https://docs.twenty.com/developers/extend/apps/tutorials/document-generator/ai-agent.md): Let an agent generate documents from a chat, using your tool.
- [6. Publishing](https://docs.twenty.com/developers/extend/apps/tutorials/document-generator/publishing.md): Add marketplace metadata and publish your app.

#### Config

- [Overview](https://docs.twenty.com/developers/extend/apps/config/overview.md): Configure the app itself — its identity, default permissions, and what runs at install time.
- [Application Config](https://docs.twenty.com/developers/extend/apps/config/application.md): Declare your app's identity, default role, variables, and marketplace metadata with defineApplication.
- [Roles & Permissions](https://docs.twenty.com/developers/extend/apps/config/roles.md): Declare what objects and fields your app's logic functions and front components can read and write.
- [Install Hooks](https://docs.twenty.com/developers/extend/apps/config/install-hooks.md): Run logic during the install, upgrade, or uninstall lifecycle — seed data, back up records, validate the upgrade, clean up external resources.
- [Public Assets](https://docs.twenty.com/developers/extend/apps/config/public-assets.md): Ship static files — images, icons, fonts — alongside your app via the public/ folder.

#### Data

- [Overview](https://docs.twenty.com/developers/extend/apps/data/overview.md): Shape the data your app adds to a workspace — objects, fields, and relations.
- [Objects](https://docs.twenty.com/developers/extend/apps/data/objects.md): Declare new record types — custom tables with their own fields — using defineObject.
- [Extending Objects](https://docs.twenty.com/developers/extend/apps/data/extending-objects.md): Add fields to standard Twenty objects (Person, Company, …) or to objects from other apps using defineField.
- [Targeting System Metadata](https://docs.twenty.com/developers/extend/apps/data/system-fields.md): Resolve the deterministic universal identifiers of the metadata Twenty provisions automatically on every object, so your app can reference it without hardcoding.
- [Relations](https://docs.twenty.com/developers/extend/apps/data/relations.md): Connect objects together with bidirectional MANY_TO_ONE / ONE_TO_MANY relations.
- [Timeline Activity Types](https://docs.twenty.com/developers/extend/apps/data/timeline-activity-types.md): Define automatic audit events and explicit app events that render in record timelines.

#### Logic

- [Overview](https://docs.twenty.com/developers/extend/apps/logic/overview.md): Server-side TypeScript that runs inside Twenty — triggered by HTTP routes, cron schedules, database events, AI tools, or workflow actions.
- [Logic Functions](https://docs.twenty.com/developers/extend/apps/logic/logic-functions.md): Define server-side TypeScript functions with HTTP, cron, and database event triggers.
- [Key-Value Store](https://docs.twenty.com/developers/extend/apps/logic/key-value-store.md): Persist intermediate results, cache data, and share state across logic function runs with the built-in application key-value store.
- [Background Jobs](https://docs.twenty.com/developers/extend/apps/logic/background-jobs.md): Hand long or rate-limited work to the Twenty workers by enqueuing another logic function run instead of doing everything inline.
- [Skills & Agents](https://docs.twenty.com/developers/extend/apps/logic/skills-and-agents.md): Define AI skills and agents for your app.
- [Workflows](https://docs.twenty.com/developers/extend/apps/logic/workflows.md): Ship ready-made workflows with your app.
- [Connections](https://docs.twenty.com/developers/extend/apps/logic/connections.md): Let your app act on a user's behalf in third-party services via OAuth.
- [Messaging Channels](https://docs.twenty.com/developers/extend/apps/logic/messaging-channels.md): Bring conversations from any provider into Twenty's Message and Message Thread records.
- [Charging Credits](https://docs.twenty.com/developers/extend/apps/logic/credits.md): Declare what your app bills for and charge workspace credits from a logic function.

#### Layout

- [Overview](https://docs.twenty.com/developers/extend/apps/layout/overview.md): Place your app inside Twenty's UI — sidebar entries, saved views, record page tabs, and sandboxed React components.
- [Views](https://docs.twenty.com/developers/extend/apps/layout/views.md): Ship pre-configured saved views — column order, filters, groups — for objects in your app.
- [Navigation Menu Items](https://docs.twenty.com/developers/extend/apps/layout/navigation-menu-items.md): Add custom entries to the workspace sidebar — links to saved views or external URLs.
- [Page Layouts](https://docs.twenty.com/developers/extend/apps/layout/page-layouts.md): Customize record detail pages — tabs, widgets, and where front components render — using definePageLayout, definePageLayoutTab and definePageLayoutWidget.
- [Front Components](https://docs.twenty.com/developers/extend/apps/layout/front-components.md): Build React components that render inside Twenty's UI with sandboxed isolation.
- [Command Menu Items](https://docs.twenty.com/developers/extend/apps/layout/command-menu-items.md): Surface front components as quick actions and command menu (Cmd+K) entries with defineCommandMenuItem.

#### Operations

- [Overview](https://docs.twenty.com/developers/extend/apps/operations/overview.md): Build, test, and ship your app — CLI commands, integration tests, CI, translations, and publishing to a server or to npm.
- [CLI](https://docs.twenty.com/developers/extend/apps/operations/cli.md): yarn twenty commands for executing functions, streaming logs, managing app installations, and switching remotes.
- [Syncing & recovery](https://docs.twenty.com/developers/extend/apps/operations/sync-and-recovery.md): Which command to use when, how to read the sync output, and a recovery ladder for when local metadata drifts — before reaching a full reset.
- [Testing](https://docs.twenty.com/developers/extend/apps/operations/testing.md): Vitest setup, integration tests against a real Twenty server, type checking, and CI with GitHub Actions.
- [Translations](https://docs.twenty.com/developers/extend/apps/operations/translations.md): Ship your app in multiple languages — translate manifest labels and UI strings through one locales catalog.
- [Publishing](https://docs.twenty.com/developers/extend/apps/operations/publishing.md): Distribute your Twenty app to the marketplace or deploy it internally.

### API

- [APIs](https://docs.twenty.com/developers/extend/api.md): REST and GraphQL APIs generated from your workspace schema.
- [Webhooks](https://docs.twenty.com/developers/extend/webhooks.md): Get notified when records change — HTTP POST to your endpoint on every create, update, or delete.
- [OAuth](https://docs.twenty.com/developers/extend/oauth.md): Authorization code flow with PKCE and client credentials for server-to-server access.

### Self-Host

- [Docker Compose](https://docs.twenty.com/developers/self-host/capabilities/docker-compose.md)
- [Setup](https://docs.twenty.com/developers/self-host/capabilities/setup.md)
- [Upgrade guide](https://docs.twenty.com/developers/self-host/capabilities/upgrade-guide.md)
- [Troubleshooting](https://docs.twenty.com/developers/self-host/capabilities/troubleshooting.md)

### Contribute

- [Local Setup](https://docs.twenty.com/developers/contribute/capabilities/local-setup.md): The guide for contributors (or curious developers) who want to run Twenty locally.
- [Commands](https://docs.twenty.com/developers/contribute/commands.md): Useful commands for developing Twenty.
- [Style Guide](https://docs.twenty.com/developers/contribute/style-guide.md): Code conventions and best practices for contributing to Twenty.

### UI Library

#### Guides

- [Getting started](https://docs.twenty.com/ui/getting-started.md): Install Twenty UI in a React application and use its components and themes.
- [Theming](https://docs.twenty.com/ui/theming.md): Use Twenty UI theme tokens and scope theme overrides to part of your application.
- [Design tokens](https://docs.twenty.com/ui/tokens.md): Browse the generated CSS variables and light and dark values used by Twenty UI.
- [Dark mode](https://docs.twenty.com/ui/dark-mode.md): Load both Twenty UI palettes and switch the active color scheme.
- [Server rendering](https://docs.twenty.com/ui/ssr.md): Understand Twenty UI's current server-rendering constraints and theme initialization.
- [Accessibility](https://docs.twenty.com/ui/accessibility.md): Label controls, preserve keyboard behavior, and test accessible Twenty UI interfaces.
- [Icons](https://docs.twenty.com/ui/icons.md): Named icons, dynamic lookup, illustration wrappers, and their supported props.
- [Storybook helpers](https://docs.twenty.com/ui/testing.md): Present component previews and variant catalogs with twenty-ui/testing.

#### Primitives

- [Primitives](https://docs.twenty.com/ui/primitives/overview.md): Foundational controls for building interfaces with Twenty UI.

##### Accessibility

- [VisuallyHidden](https://docs.twenty.com/ui/primitives/accessibility/visually-hidden.md): Keep supporting text available to assistive technology without displaying it visually.

##### Data display

- [Avatar](https://docs.twenty.com/ui/primitives/data-display/avatar.md): Represent a person or record with an image, initial, or icon.
- [Chip](https://docs.twenty.com/ui/primitives/data-display/chip.md): Show compact caller-owned content with optional leading and trailing slots.
- [Tag](https://docs.twenty.com/ui/primitives/data-display/tag.md): Label a category or attribute with a theme color and optional icon.
- [Status](https://docs.twenty.com/ui/primitives/data-display/status.md): Show a named state with a colored indicator and optional loading feedback.
- [ColorSample](https://docs.twenty.com/ui/primitives/data-display/color-sample.md): Display a theme color or a custom color alongside a text label.
- [Badge](https://docs.twenty.com/ui/primitives/data-display/badge.md): Display compact inline information with caller-provided content.

##### Feedback

- [Banner](https://docs.twenty.com/ui/primitives/feedback/banner.md): Feedback content with independent status, appearance, and palette.
- [Loader](https://docs.twenty.com/ui/primitives/feedback/loader.md): Display a compact animated loading indicator beside a status label.
- [Progress](https://docs.twenty.com/ui/primitives/feedback/progress.md): Compose accessible progress with shared range, labeling, and value semantics.
- [ProgressBar](https://docs.twenty.com/ui/primitives/feedback/progress-bar.md): Show measured or indeterminate progress with a horizontal bar.
- [ProgressRing](https://docs.twenty.com/ui/primitives/feedback/progress-ring.md): Show measured or indeterminate progress in a compact circular indicator.
- [Skeleton](https://docs.twenty.com/ui/primitives/feedback/skeleton.md): Show themed placeholder shapes while content loads.

##### Forms

- [Button](https://docs.twenty.com/ui/primitives/input/button.md): Trigger actions or navigate with styled buttons.
- [ButtonGroup](https://docs.twenty.com/ui/primitives/input/button-group.md): Group related buttons with shared appearance and an optional frame.
- [Field](https://docs.twenty.com/ui/primitives/input/field.md): Connect a form control to its label, description, and validation feedback.
- [Input](https://docs.twenty.com/ui/primitives/input/input.md): A text input with native attributes, field integration, and two sizes.
- [InputGroup](https://docs.twenty.com/ui/primitives/input/input-group.md): Add prefixes, suffixes, and actions around a text input.
- [NumberField](https://docs.twenty.com/ui/primitives/input/number-field.md): Compose a numeric field with locale formatting, stepping, native forms, and scrubbing.
- [Textarea](https://docs.twenty.com/ui/primitives/input/textarea.md): Enter multiple lines of text with optional automatic resizing.
- [Checkbox](https://docs.twenty.com/ui/primitives/input/checkbox.md): Select independent options with checked and indeterminate states.
- [Radio](https://docs.twenty.com/ui/primitives/input/radio.md): Render one option in a mutually exclusive radio group.
- [RadioGroup](https://docs.twenty.com/ui/primitives/input/radio-group.md): Manage a single selection across a set of radio options.
- [Select](https://docs.twenty.com/ui/primitives/input/select.md): Choose one or more values from a popup list of options.
- [Slider](https://docs.twenty.com/ui/primitives/input/slider.md): Choose a numeric value or range with draggable, keyboard-accessible thumbs.
- [Switch](https://docs.twenty.com/ui/primitives/input/switch.md): A labeled on or off control with controlled and uncontrolled state.

##### Layout

- [Collapsible](https://docs.twenty.com/ui/primitives/layout/collapsible.md): Compose an accessible trigger and animated panel with controlled or uncontrolled expansion.
- [Separator](https://docs.twenty.com/ui/primitives/layout/separator.md): Separate adjacent content with a horizontal or vertical divider.
- [ResizeHandle](https://docs.twenty.com/ui/primitives/layout/resize-handle.md): Resize a panel with pointer dragging or keyboard controls.
- [DirectionProvider](https://docs.twenty.com/ui/primitives/layout/direction-provider.md): Coordinate directional keyboard and pointer interactions with the document direction.

##### Navigation

- [Breadcrumb](https://docs.twenty.com/ui/primitives/navigation/breadcrumb.md): Show a page's location with a trail of ancestor links.
- [ListItem](https://docs.twenty.com/ui/primitives/navigation/list-item.md): Compose consistent rows with icons, descriptions, indicators, and actions.
- [Tabs](https://docs.twenty.com/ui/primitives/navigation/tabs.md): Switch between related panels with accessible tab navigation.

##### Surfaces

- [AlertDialog](https://docs.twenty.com/ui/primitives/surfaces/alert-dialog.md): Ask for confirmation before an action that needs an explicit decision.
- [Card](https://docs.twenty.com/ui/primitives/surfaces/card.md): Group related information inside a bordered surface.
- [Dialog](https://docs.twenty.com/ui/primitives/surfaces/dialog.md): Present a focused task above the current page.
- [Popover](https://docs.twenty.com/ui/primitives/surfaces/popover.md): Display contextual content anchored to a trigger.
- [Tooltip](https://docs.twenty.com/ui/primitives/surfaces/tooltip.md): Show supplementary information when a trigger is hovered or focused.

##### Typography

- [Heading](https://docs.twenty.com/ui/primitives/typography/heading.md): Render semantic headings with independent visual sizes.
- [Text](https://docs.twenty.com/ui/primitives/typography/text.md): Render text with single-line truncation or a limited number of lines.
- [Shortcut](https://docs.twenty.com/ui/primitives/typography/shortcut.md): Display simultaneous key combinations and sequential shortcuts.
- [OverflowingTextWithTooltip](https://docs.twenty.com/ui/primitives/typography/overflowing-text-with-tooltip.md): Truncate long text and reveal its full value in a tooltip.

#### Components

- [Components](https://docs.twenty.com/ui/components/overview.md): Shared design presets and reusable app building blocks composed from Twenty UI primitives.

##### Data display

- [AvatarGroup](https://docs.twenty.com/ui/components/data-display/avatar-group.md): Overlapping avatars with a derived overflow indicator.
- [CommandBlock](https://docs.twenty.com/ui/components/data-display/command-block.md): Display command lines with an optional action.
- [JsonTree](https://docs.twenty.com/ui/components/data-display/json-tree.md): Explore JSON values with expandable nodes and custom labels.
- [MetricRow](https://docs.twenty.com/ui/components/data-display/metric-row.md): Align a metric label and formatted value with optional progress.
- [StackIcon](https://docs.twenty.com/ui/components/data-display/stack-icon.md): A 16px icon with a smaller item stacked on its bottom-right corner.
- [TintedIconTile](https://docs.twenty.com/ui/components/data-display/tinted-icon-tile.md): An icon on a tinted background derived from a theme color.

##### Feedback

- [Callout](https://docs.twenty.com/ui/components/feedback/callout.md): Feedback with node content, actions, and caller-owned dismissal.
- [InlineBanner](https://docs.twenty.com/ui/components/feedback/inline-banner.md): Inline feedback with node content, icons, and actions.
- [Toast](https://docs.twenty.com/ui/components/feedback/toast.md): Display status messages with optional details, actions, and progress.

##### Input

- [MainButton](https://docs.twenty.com/ui/components/input/main-button.md): Present prominent actions with shared design defaults.
- [LightButton](https://docs.twenty.com/ui/components/input/light-button.md): Present lightweight actions with standard or subtle emphasis.
- [IconButton](https://docs.twenty.com/ui/components/input/icon-button.md): Trigger actions with accessible icon buttons.
- [LightIconButton](https://docs.twenty.com/ui/components/input/light-icon-button.md): Present lightweight icon actions with standard or subtle emphasis.
- [CountrySelect](https://docs.twenty.com/ui/components/input/country-select.md): Search prepared country choices and select a country or an explicit empty value.
- [CurrencyPicker](https://docs.twenty.com/ui/components/input/currency-picker.md): Choose a currency with a complete picker or compose its parts in a dropdown.
- [PhoneCountryPicker](https://docs.twenty.com/ui/components/input/phone-country-picker.md): A complete phone country picker and composable parts sharing country data and selection.
- [ImageInput](https://docs.twenty.com/ui/components/input/image-input.md): Image selection, preview, and caller-owned upload actions.
- [SearchInput](https://docs.twenty.com/ui/components/input/search-input.md): Controlled search text with optional actions, such as a filter popup.
- [NumberStepper](https://docs.twenty.com/ui/components/input/number-stepper.md): Edit a number with optional bounds and increment or decrement buttons.
- [SegmentedControl](https://docs.twenty.com/ui/components/input/segmented-control.md): Choose one value from a compact group of labeled or icon options.

##### Layout

- [Section](https://docs.twenty.com/ui/components/layout/section.md): Group content with a heading, supporting description, and optional action.
- [OverflowingList](https://docs.twenty.com/ui/components/layout/overflowing-list.md): Fit a row of items into the available space and show the complete list in a popup.
- [AnimatedIconCrossfade](https://docs.twenty.com/ui/components/layout/animated-icon-crossfade.md): Crossfade between two icons as application state changes.

##### Navigation

- [ListItemButton](https://docs.twenty.com/ui/components/navigation/list-item-button.md): Native action buttons with the shared list row appearance.
- [Dropdown](https://docs.twenty.com/ui/components/navigation/dropdown.md): Action menus, searchable pickers, and form panels with shared presentation and interaction.
- [Menu rows](https://docs.twenty.com/ui/components/navigation/menu-items.md): MenuItem, MenuItemAvatar, MenuItemDraggable, and MenuItemSuggestion presentation presets.
- [MenuPicker](https://docs.twenty.com/ui/components/navigation/menu-picker.md): A compact icon button with selected styling and an optional tooltip.
- [TabButton](https://docs.twenty.com/ui/components/navigation/tab-button.md): Present route links and actions alongside tabs with consistent styling.

##### Settings

- [SettingsRow](https://docs.twenty.com/ui/components/settings/settings-row.md): A labeled switch row with flat control props and native label composition.

##### Code editor

- [CodeEditor](https://docs.twenty.com/ui/components/code-editor/code-editor.md): Edit and display code in a Monaco editor styled with the Twenty theme.