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

Initialize a Node.js project and install the Compose SDK.

# Create a new project
mkdir compose && cd compose
npm init -y
npm pkg set type=module # Use ESM module syntax

# Install the Compose SDK
npm install @composehq/sdk

# Optional: install typescript dependencies
npm install --save-dev typescript tsx

python

Initialize a new virtual environment and install the Compose SDK.

mkdir compose && cd compose

# Create a virtual environment
python -m venv venv
source venv/bin/activate

# Install the Compose SDK
pip install compose-sdk

# Optional: install py-mon to enable live reloading on file change.
pip install py-mon

Your First App

Node.js

Python

Node.js

Let's build a simple dashboard that displays a list of users. Create a file called app.js (or app.ts), then paste the following code.

import { Compose } from "@composehq/sdk"

const dbUsers = [
    { id: 1, name: "Lisa Su", isApproved: true },
    { id: 2, name: "Jensen Huang", isApproved: false },
    { id: 3, name: "Brian Chesky", isApproved: true },
]

const usersDashboard = new Compose.App({
    name: "Users Dashboard",
    handler: ({ page, ui }) => {
        const users = [...dbUsers]; // Simulate a database query
        page.add(() => ui.header("Users Dashboard"))
        page.add(() => ui.table("table-id", users))
    }
});

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

client.connect();

Create a free account on Compose to get an API key. Then, run your app:

node --watch app.js # or tsx app.ts

Python

Let's build a simple dashboard that displays a list of users. Create a file called app.py, then paste the following code.

import compose_sdk as c

db_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 },
]

def users_dashboard(page: c.Page, ui: c.UI):
    users = db_users.copy() # Simulate a database query
    page.add(lambda: ui.header("Users Dashboard"))
    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 a free account on Compose to get an API key. Then, run your app:

pymon app.py # or python app.py

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

Extend this app to edit users in 17 lines of code

Let's add a button to each row in our table. When clicked, this button will open a form to edit the user.

Replace your previous code with the following:

Node.js

import { Compose } from "@composehq/sdk"

const dbUsers = [
    { id: 1, name: "Lisa Su", isApproved: true },
    { id: 2, name: "Jensen Huang", isApproved: false },
    { id: 3, name: "Brian Chesky", isApproved: true },
]

const usersDashboard = new Compose.App({
    name: "Users Dashboard",
    handler: ({ page, ui }) => {
        const users = [...dbUsers]; // Simulate a database query

        function editUser(user, idx) {
            page.modal(({ resolve }) => ui.form(
                "edit-user",
                [
                    ui.textInput("name", { initialValue: user.name }),
                    ui.checkbox("isApproved", { initialValue: user.isApproved }),
                ],
                {
                    onSubmit: (formData) => {
                        users[idx] = { ...user, ...formData };
                        page.update();
                        resolve(); // Close modal
                    }
                }
            ))
        }

        page.add(() => ui.header("Users Dashboard"))
        page.add(() => ui.table("table-id", users, {
            actions: [{ label: "Edit", onClick: (user, idx) => editUser(user, idx) }]
        }))
    }
});

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

client.connect();

Save your file, and your app should update! Note: you may need to rerun the script if you're not using a --watch flag.

Python

import compose_sdk as c
from typing import Dict, Any, Callable

db_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 },
]

def users_dashboard(page: c.Page, ui: c.UI):
    users = db_users.copy() # Simulate a database query

    def edit_user(user: Dict[str, Any], idx: int):
        def on_submit(form: Dict[str, Any], resolve: Callable[[], None]):
            users[idx] = { **user, **form }
            page.update()
            resolve() # Close modal

        page.modal(lambda resolve: ui.form(
            "edit-user",
            [
                ui.text_input("name", initial_value=user["name"]),
                ui.checkbox("is_approved", initial_value=user["is_approved"]),
            ],
            on_submit=lambda form: on_submit(form, resolve)
        ))

    page.add(lambda: ui.header("Users Dashboard"))
    page.add(lambda: ui.table("table-id", users, actions=[
        { "label": "Edit", "on_click": edit_user }
    ]))

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

client.connect()

Save your file, and your app should update! Note: you may need to rerun the script if you're not using pymon.

Next Steps

Node.js

• Try replacing dbUsers 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 db_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.