Quickstart

Compose enables developers to turn backend functions into shareable internal tools with just a few lines of code. Build the tools you need to power your business in minutes instead of days.

How Compose Works

The platform has two parts:

• A lightweight SDK that installs into your backend and lets you write apps using familiar async functions.
• A hosted dashboard (https://composehq.com) where you run and share the apps you build.

Compose "apps" are just plain async functions within your backend codebase. Write your logic as usual, then add SDK calls to render user interfaces and collect user input. The SDK connects automatically to the Compose dashboard, where Compose manages the API calls, UI rendering, authentication, and more to turn your logic into polished, shareable apps.

The platform includes an extensive library of 40+ components, tested to be performant at enterprise scale, and designed with developer experience at the core.

Let's install the SDK and build our first app in less than 5 minutes.

Installation

Node.js

Python

node

Automatic Installation

Setup Compose with a single npx command in your terminal.

# TypeScript
npx @composehq/create@latest

# JavaScript
npx @composehq/create@latest --lang=javascript

Manual Installation

Create a project directory

mkdir compose && cd compose

Initialize the project, and set the project type to module to enable modern JavaScript import/export syntax.

npm init -y && npm pkg set type=module

Install the Compose SDK

npm install @composehq/sdk

If you're using TypeScript, install the TypeScript compiler and tsx, which we'll use to run our app during development.

npm install --save-dev typescript tsx

python

Automatic Installation

Setup Compose with a single npx command in your terminal.

npx @composehq/create@latest --lang=python

If you don't have npx on your machine, you can use the manual installation instructions below.

Manual Installation

First, create a new project directory and virtual environment.

mkdir compose && cd compose
python -m venv .venv

Activate the virtual environment.

# macOS/Linux
source .venv/bin/activate

# Windows command prompt
.venv\Scripts\Activate.bat

# Windows PowerShell
.venv\Scripts\Activate.ps1

Finally, install the Compose SDK.

pip install compose-sdk

Optionally, install py-mon, a lightweight file watcher that will automatically restart your app when you make code changes.

pip install py-mon

Your First App

Node.js

Python

Node.js

Let's build a simple dashboard that displays a list of users. In your project directory, create a file called app.js (or app.ts), then paste the following starter code.

import { Compose } from "@composehq/sdk"

const DOCS_URL = "https://docs.composehq.com/get-started/concepts#app-structure";

const usersDashboard = new Compose.App({
    name: "Users Dashboard",
    route: "users-dashboard",
    handler: ({ page, ui }) => {
        const users = [
            { id: 1, name: "Lisa Su", isApproved: true },
            { id: 2, name: "Jensen Huang", isApproved: false },
            { id: 3, name: "Brian Chesky", isApproved: true },
        ];

        page.add(() =>
            ui.distributedRow([
                ui.header("Users Dashboard"),
                ui.button("See what's possible", {
                    onClick: () => page.link(DOCS_URL, { newTab: true }),
                }),
            ])
        );
        page.add(() => ui.table("table-id", users));
    },
});

const client = new Compose.Client({
    apiKey: "API_KEY_HERE",
    apps: [usersDashboard]
});

client.connect();

Create an account on Compose to get an API key (it's free). Then, run your app:

# TypeScript
npx tsx --watch app.ts

# JavaScript
node --watch app.js

Python

Let's build a simple dashboard that displays a list of users. In your project directory, create a file called app.py, then paste the following starter code.

import compose_sdk as c

DOCS_URL = "https://docs.composehq.com/get-started/concepts#app-structure"

def users_dashboard(page: c.Page, ui: c.UI):
    users = [
        {"id": 1, "name": "Lisa Su", "is_approved": True},
        {"id": 2, "name": "Jensen Huang", "is_approved": False},
        {"id": 3, "name": "Brian Chesky", "is_approved": True},
    ]

    page.add(
        lambda: ui.distributed_row(
            [
                ui.header("Users Dashboard"),
                ui.button(
                    "See what's possible",
                    on_click=lambda: page.link(DOCS_URL, new_tab=True),
                ),
            ]
        )
    )
    page.add(lambda: ui.table("table-id", users))

client = c.Client(
    api_key="API_KEY_HERE",
    apps=[
        c.App("Users Dashboard", users_dashboard)
    ],
)

client.connect()

Create an account on Compose to get an API key (it's free). Then, run your app:

pymon app.py # or python app.py

Go back to the Compose dashboard and your app should appear!

Next Steps

Node.js

• Try replacing users with real data from your own database!
• Go over Compose's core concepts to quickly become productive with the SDK.
• Join the Discord community to ask questions and talk to the core team.

Python

• Try replacing users with real data from your own database!
• Go over Compose's core concepts to quickly become productive with the SDK.
• Join the Discord community to ask questions and talk to the core team.