Skip to main content

Page Action | Set Config

Use page.set() to edit the default configuration of the page, such as the width, padding, and spacing between components.

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

function handler({ page, ui }: { page: Page, ui: UI }) {
    page.set({
        width: "600px",
        spacingY: "3rem",
    })

    page.add(() => ui.stack([
        ui.header("Section 1"),
        ui.text("This is a section of text"),
    ]))
}

Since page.set() is just a regular function, it can be called multiple times to update the page configuration throughout the lifetime of the app. Passed values will be merged with the existing default config.

Available properties​

NameDefaultDescription
width72remThe width of the page.
paddingX1remThe padding at the left and right of the page.
paddingY4remThe padding at the top and bottom of the page.
spacingY2remVertical spacing between page.add() renders.
paddingTop4remThe padding at the top of the page. Supersedes paddingY.
paddingBottom4remThe padding at the bottom of the page. Supersedes paddingY. Must be at least 4rem to account for the floating Compose menu.
paddingLeft1remThe padding at the left of the page. Supersedes paddingX.
paddingRight1remThe padding at the right of the page. Supersedes paddingX.

Note that 1rem is equal to 16px in CSS. Prefer using rem over px for better readability and consistency - rem automatically scales with the user's system font size, whereas px does not.

API reference​

Function signature​

interface Config {
    width?: string;
    paddingX?: string;
    paddingY?: string;
    spacingY?: string;
    paddingTop?: string;
    paddingBottom?: string;
    paddingLeft?: string;
    paddingRight?: string;
}

page.set(config: Config): void

Parameters​

config

required Config
The configuration to set for the page. Will be merged with the existing default config.

Returns​

void