Page Action | Update

Easily create reactive apps by updating the UI with page.update(). Compose will diff the previous UI against the new one and intelligently update any components that have changed.

Node.js

import { Compose, Page, UI } from "@composehq/sdk"

function handler({ page, ui }: { page: Page, ui: UI }) {
    let count = 0;

    page.add(() => ui.stack([
        ui.header(`Count: ${count}`),
        ui.button("increment-btn", {
            label: "Increment",
            onClick: () => {
                count += 1
                page.update()
            }
        }),
    ]))
}

const app = new Compose.App({ name: "Counter", handler })

Python

import compose_sdk as c

def handler(page: c.Page, ui: c.UI):
    count = 0

    def on_click():
        nonlocal count
        count += 1
        page.update()

    page.add(lambda: ui.stack([
        ui.header(f"Count: {count}"),
        ui.button("increment-btn", label="Increment", on_click=on_click),
    ]))

counter_app = c.App("Counter", handler)

Note: page.update() was introduced in version 0.21.0 of the SDK.

Common pitfalls

When working with objects, you need to reassign the variable itself rather than just modifying a nested property for page.update() to detect the change.

Node.js

import { Compose, Page, UI } from "@composehq/sdk"

function handler({ page, ui }: { page: Page, ui: UI }) {
    let data = { count: 0 };

    function onClick() {
        // This won't work
        data.count += 1
        // Do this instead
        data = { ...data, count: data.count + 1 }

        page.update()
    }

    page.add(() => ui.stack([
        ui.json(data),
        ui.button("increment-btn", {
            label: "Increment",
            onClick
        }),
    ]))
}

const app = new Compose.App({ name: "Counter", handler })

Python

import compose_sdk as c

def handler(page: c.Page, ui: c.UI):
    data = {"count": 0}

    def on_click():
        nonlocal data

        # This won't work
        data["count"] += 1
        # Do this instead
        data = {**data, "count": data["count"] + 1}

        page.update()

    page.add(lambda: ui.stack([
        ui.json(data),
        ui.button("increment-btn", label="Increment", on_click=on_click),
    ]))

counter_app = c.App("Counter", handler)

API reference

Function signature

Node.js

page.update(): void

Python

page.update() -> None

Parameters

None.

Returns

Node.js

void

Python

None