> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Quick Start

> Create your first Twenty app in minutes.

## Prerequisites

* **Node.js 24+** — [Download](https://nodejs.org/)
* **Yarn 4** — bundled with Node via Corepack. Enable it: `corepack enable`
* **Docker** — [Download](https://www.docker.com/products/docker-desktop/). Needed to run a local Twenty server. Skip if you already have Twenty running elsewhere.

Building a Twenty app has three phases. The scaffolder collapses them into one happy-path command, but each phase is a separate concept — when something fails, knowing which phase you're in tells you what to fix.

| Phase               | What you do                        | Tool                          | Result                        |
| ------------------- | ---------------------------------- | ----------------------------- | ----------------------------- |
| **1. Scaffold**     | Generate the app's source code     | `npx create-twenty-app`       | A TypeScript project on disk  |
| **2. Run a server** | Start a Twenty server to sync into | Docker + `yarn twenty server` | A running Twenty instance     |
| **3. Sync**         | Live-sync your code to the server  | `yarn twenty dev`             | Your changes appear in the UI |

***

## Phase 1 — Scaffold your project

Create a new app from the template:

```bash filename="Terminal" theme={null}
npx create-twenty-app@latest my-twenty-app
```

You'll be prompted for a name and description — press **Enter** for the defaults. This generates a TypeScript project in `my-twenty-app/` with a starter `application-config.ts`, a default role, a CI workflow, and an integration test.

**After this phase:** you have an app's source code on your machine. It isn't running yet — that's Phase 2.

***

## Phase 2 — Run a local Twenty server

Your app needs a Twenty server to sync into. The server is a full Twenty instance — UI, GraphQL API, PostgreSQL — running locally in Docker. Your local code uploads its definitions to that server, which makes them appear in the UI.

The scaffolder offers to start one for you:

> **Would you like to set up a local Twenty instance?**

* **Yes (recommended)** — pulls the `twentycrm/twenty-app-dev` Docker image and starts it on port `2020`. Make sure Docker is running first.
* **No** — choose this if you already have a Twenty server you want to connect to. You can wire it up later with `yarn twenty remote add`.

<div style={{textAlign: 'center'}}>
  <img src="https://mintcdn.com/twenty/q7TCG2vqA_qoAvgz/images/docs/developers/extends/apps/start-instance.png?fit=max&auto=format&n=q7TCG2vqA_qoAvgz&q=85&s=245a3e923a030d5cef16736fa16d225c" alt="Should start local instance?" width="1476" height="410" data-path="images/docs/developers/extends/apps/start-instance.png" />
</div>

Once the server is up, a browser opens for sign-in. Use the pre-seeded demo account:

* **Email:** `tim@apple.dev`
* **Password:** `tim@apple.dev`

<div style={{textAlign: 'center'}}>
  <img src="https://mintcdn.com/twenty/q7TCG2vqA_qoAvgz/images/docs/developers/extends/apps/login.png?fit=max&auto=format&n=q7TCG2vqA_qoAvgz&q=85&s=a0d3e98abf5567d1c3b340f8628dd5d9" alt="Twenty login screen" width="3024" height="1502" data-path="images/docs/developers/extends/apps/login.png" />
</div>

Click **Authorize** on the next screen — this gives the CLI access to your workspace.

<div style={{textAlign: 'center'}}>
  <img src="https://mintcdn.com/twenty/q7TCG2vqA_qoAvgz/images/docs/developers/extends/apps/authorize.png?fit=max&auto=format&n=q7TCG2vqA_qoAvgz&q=85&s=093fb4273fe417875669c419aa1892f6" alt="Twenty CLI authorization screen" width="3024" height="1502" data-path="images/docs/developers/extends/apps/authorize.png" />
</div>

Your terminal will confirm everything is set up.

<div style={{textAlign: 'center'}}>
  <img src="https://mintcdn.com/twenty/q7TCG2vqA_qoAvgz/images/docs/developers/extends/apps/scaffolded.png?fit=max&auto=format&n=q7TCG2vqA_qoAvgz&q=85&s=e16b9263c0632f1b9c0e97de197815dd" alt="App scaffolded successfully" width="1558" height="736" data-path="images/docs/developers/extends/apps/scaffolded.png" />
</div>

**After this phase:** you have a running Twenty server at [http://localhost:2020](http://localhost:2020) with your CLI authorized to sync to it.

<Note>
  If Docker isn't installed or running, the scaffolder will tell you the right start command for your OS. Once Docker is up, you can resume with `yarn twenty server start` — no need to re-scaffold.
</Note>

***

## Phase 3 — Sync your changes

This is the inner loop you'll spend most of your time in.

```bash filename="Terminal" theme={null}
cd my-twenty-app
yarn twenty dev
```

This watches `src/`, rebuilds on every change, and syncs the result to the server. Edit a file, save, and within a second the server reflects the change. You'll see a live status panel in your terminal.

For more detailed output (build logs, sync requests, error traces), add `--verbose`.

<div style={{textAlign: 'center'}}>
  <img src="https://mintcdn.com/twenty/9xnC1ZSwZRaJYzPF/images/docs/developers/extends/apps/dev.png?fit=max&auto=format&n=9xnC1ZSwZRaJYzPF&q=85&s=cdd5b92700689e13988cc00af41cb462" alt="Dev mode terminal output" width="656" height="605" data-path="images/docs/developers/extends/apps/dev.png" />
</div>

Open [http://localhost:2020/settings/applications#developer](http://localhost:2020/settings/applications#developer). You should see your app under **Your Apps**.

<div style={{textAlign: 'center'}}>
  <img src="https://mintcdn.com/twenty/9xnC1ZSwZRaJYzPF/images/docs/developers/extends/apps/app-in-ui-1.png?fit=max&auto=format&n=9xnC1ZSwZRaJYzPF&q=85&s=13b46336a6126fe56ee2f4e28ad9549e" alt="Your Apps list showing My twenty app" width="2143" height="1326" data-path="images/docs/developers/extends/apps/app-in-ui-1.png" />
</div>

Click **My twenty app** to see its **application registration** — a server-level record describing your app (name, identifier, OAuth credentials, source). One registration can be installed across multiple workspaces on the same server.

<div style={{textAlign: 'center'}}>
  <img src="https://mintcdn.com/twenty/9xnC1ZSwZRaJYzPF/images/docs/developers/extends/apps/app-in-ui-2.png?fit=max&auto=format&n=9xnC1ZSwZRaJYzPF&q=85&s=dff8941c6a9656c346b154cd0bc1fd14" alt="Application registration details" width="2057" height="1214" data-path="images/docs/developers/extends/apps/app-in-ui-2.png" />
</div>

Click **View installed app** to see the workspace install. The **About** tab shows version and management options.

<div style={{textAlign: 'center'}}>
  <img src="https://mintcdn.com/twenty/9xnC1ZSwZRaJYzPF/images/docs/developers/extends/apps/app-in-ui-3.png?fit=max&auto=format&n=9xnC1ZSwZRaJYzPF&q=85&s=78f30e7a8cc97fbd1fd21e0e87ebfd2b" alt="Installed app" width="2124" height="1147" data-path="images/docs/developers/extends/apps/app-in-ui-3.png" />
</div>

**After this phase:** you have a live development loop. Edit any file in `src/` and it appears in the UI.

### One-shot sync for CI and scripts

Pass `--once` to run a single build + sync and exit — same pipeline, no watcher:

```bash filename="Terminal" theme={null}
yarn twenty dev --once
```

| Command                  | Behavior                                                      | When to use                                          |
| ------------------------ | ------------------------------------------------------------- | ---------------------------------------------------- |
| `yarn twenty dev`        | Watches and re-syncs on every change. Runs until you stop it. | Interactive local development.                       |
| `yarn twenty dev --once` | Single build + sync, exits `0` on success, `1` on failure.    | CI, pre-commit hooks, AI agents, scripted workflows. |

Both modes need a server in development mode and an authenticated remote.

<Warning>
  Dev mode is only available on Twenty instances running in development (`NODE_ENV=development`). Production instances reject dev sync requests — use `yarn twenty deploy` to deploy to production servers. See [Publishing](/developers/extend/apps/operations/publishing).
</Warning>

***

## Starting from an example

Use `--example` to start with a more complete project (custom objects, fields, logic functions, front components):

```bash filename="Terminal" theme={null}
npx create-twenty-app@latest my-twenty-app --example postcard
```

Examples live in [twenty-apps/examples](https://github.com/twentyhq/twenty/tree/main/packages/twenty-apps/examples). You can also scaffold individual entities into an existing project with `yarn twenty add` — see [Scaffolding](/developers/extend/apps/getting-started/scaffolding).

***

## What you can build

Apps are composed of **entities** — each defined as a TypeScript file with a single `export default`:

| Entity                 | What it does                                                                        |
| ---------------------- | ----------------------------------------------------------------------------------- |
| **Objects & Fields**   | Custom data models (Post Card, Invoice, etc.) with typed fields                     |
| **Logic functions**    | Server-side TypeScript triggered by HTTP routes, cron schedules, or database events |
| **Front components**   | React components that render inside Twenty's UI (side panel, widgets, command menu) |
| **Skills & Agents**    | AI capabilities — reusable instructions and autonomous assistants                   |
| **Views & Navigation** | Pre-configured list views and sidebar menu items                                    |
| **Page layouts**       | Custom record detail pages with tabs and widgets                                    |

Full reference: [Concepts](/developers/extend/apps/getting-started/concepts).

## Next steps

<CardGroup cols={2}>
  <Card title="Config" icon="screwdriver-wrench" href="/developers/extend/apps/config/overview">
    Application identity, default role, install hooks, public assets.
  </Card>

  <Card title="Data" icon="database" href="/developers/extend/apps/data/overview">
    Objects, fields, and bidirectional relations.
  </Card>

  <Card title="Logic" icon="bolt" href="/developers/extend/apps/logic/overview">
    Logic functions, skills, agents, and OAuth connections.
  </Card>

  <Card title="Layout" icon="table-columns" href="/developers/extend/apps/layout/overview">
    Views, navigation, page layouts, front components.
  </Card>

  <Card title="Operations" icon="rocket" href="/developers/extend/apps/operations/overview">
    CLI, testing, remotes, CI, and publishing your app.
  </Card>
</CardGroup>
