website·Indexed 31 days ago
https://docs.composehq.comAn open-source platform and SDK for rapidly building internal apps. Supports TypeScript, JavaScript, and Python, with integration guides for Node.js, Koa, NestJS, and Django. Features include a library of UI components, page actions like page.add(), page.update(), and page.toast(), and tools for building multipage apps, forms, and file handling.
ui.divider() component is used to visually separate content with a horizontal or vertical line, helping create logical groupings and improving UI scannability. It is commonly used within layout components like stacks or rows.ui.stack([
ui.statistic("Active Users", 1250),
ui.divider(),
ui.statistic("Sign Ups", 320),
ui.divider(),
ui.statistic("Churned Users", 12)
])ui.stack component is a generic container (rendered as a div with flexbox) used to group other components. By default, it arranges its children in a vertical stack. It is primarily used for controlling the layout of children and applying styles to the app's structure.ui.stack(
[
ui.text("Choose an action"),
ui.row([
ui.button("view-btn", { label: "View" }),
ui.button("edit-btn", { label: "Edit", appearance: "outline" }),
ui.button("delete-btn", { label: "Delete", appearance: "danger" })
])
],
{ align: "center" }
)ui.row component is a generic container used to group other components. It renders as a div with a flexbox layout, arranging its children in a horizontal row by default. It serves as a convenience wrapper around ui.stack with the direction property preset to "horizontal". Consequently, all properties available to ui.stack are also available to ui.row.ui.row([
ui.button("view-btn", { label: "View" }),
ui.button("edit-btn", { label: "Edit", appearance: "outline" }),
ui.button("delete-btn", { label: "Delete", appearance: "danger" })
])ui.form component is a generic container used to group other input components. It inherits all functionality from the ui.stack component while providing additional utilities for form validation, submission, and state management.page.add(), page.toast()) and user interactions are serialized into JSON for two-way communication.Compose.Navigation to create a consistent navigation sidebar across multiple pages. This is best for linking between top-level pages. The navigation pane is instantiated once and then assigned to the navigation property of each Compose.App that should display it.import { Compose } from "@composehq/sdk";
// Create a navigation pane with a list of routes and an optional logo
const nav = new Compose.Navigation(
["home-page", "settings"],
{
logoUrl: "https://composehq.com/dark-logo-with-text.svg",
}
);
const homePage = new Compose.App({
route: "home-page",
handler: () => page.add(() => ui.header("Home Page")),
navigation: nav, // show nav pane on home page
});
const settings = new Compose.App({
route: "settings",
handler: () => page.add(() => ui.header("Settings Page")),
navigation: nav, // show nav pane on settings page
});page.toast() for notifications and page.loading() to display a loading spinner. page.loading() can optionally disable user interaction while the process is running.async function refundBilling(userId) {
page.loading(true, { text: "Processing refund...", disableInteraction: true })
try {
await stripe.refundUser(userId)
page.toast("Billing refunded successfully!", { appearance: "success" })
} catch (error) {
page.toast(error.message, { appearance: "error", title: "Error refunding billing" })
} finally {
page.loading(false)
}
}Compose.Navigation component renders a navigation pane that links to other apps within a project. This is used to facilitate navigation in multi-page applications by associating a shared navigation instance with multiple Compose.App instances.import { Compose } from "@composehq/sdk";
// 1. Create a navigation pane with a list of app routes
const nav = new Compose.Navigation(
["home-page", "settings"],
{
logoUrl: "https://composehq.com/dark-logo-with-text.svg",
}
);
// 2. Assign the navigation pane to apps
const homePage = new Compose.App({
route: "home-page",
handler: () => page.add(() => ui.header("Home Page")),
navigation: nav,
});
const settings = new Compose.App({
route: "settings",
handler: () => page.add(() => ui.header("Settings Page")),
navigation: nav,
});validate hook to implement custom business logic. If the validate function returns a string, that string is displayed as an error to the user. Returning undefined (or nothing) indicates the form is valid. Additionally, some components like ui.emailInput and ui.urlInput have built-in format validation.page.add(() =>
ui.form(
"create-user-form",
[
ui.radioGroup("role", ["Admin", "User", "Guest"]),
ui.numberInput("age"),
],
{
validate: (form) => {
if (form.role === "Admin" && form.age < 18) {
return "Admins must be at least 18 years old"
}
return;
},
onSubmit: (form) => createUser(form)
}
)
)
// 1. src/compose/compose.service.ts
import { Injectable, OnModuleInit } from '@nestjs/common';
import { Compose } from '@composehq/sdk';
@Injectable()
export class ComposeService implements OnModuleInit {
onModuleInit() {
const nav = new Compose.Navigation(['view-users', 'create-user']);
const viewUsersApp = new Compose.App({
route: 'view-users',
navigation: nav,
handler: ({ page, ui }) => {
page.add(() => ui.header('View Users', { size: 'lg' }));
const users = []; // Replace with real DB call
page.add(() => ui.table('users-table', users));
},
});
const createUserApp = new Compose.App({
route: 'create-user',
navigation: nav,
handler: ({ page, ui }) => {
page.add(() => ui.header('Create User', { size: 'lg' }));
page.add(() =>
ui.form(
'create-user-form',
[ui.textInput('name'), ui.emailInput('email')],
{
onSubmit: (form) => {
// Handle form submission
page.toast('User created successfully', { appearance: 'success' });
page.link('view-users');
},
},
),
);
},
});
const client = new Compose.Client({
apiKey: 'YOUR_API_KEY',
apps: [viewUsersApp, createUserApp],
});
client.connect();
}
}
// 2. src/compose/compose.module.ts
import { Module } from '@nestjs/common';
import { ComposeService } from './compose.service';
@Module({
providers: [ComposeService],
exports: [ComposeService],
})
export class ComposeModule {}
// 3. src/app.module.ts
import { Module } from '@nestjs/common';
import { ComposeModule } from './compose/compose.module';
@Module({
imports: [ComposeModule],
// ... other controllers and providers
})
export class AppModule {}composeClient into your main application entry point (e.g., index.ts) and call the .connect() method, typically within the server's listen callback.import { composeClient } from "./compose";
// ...
app.listen(3000, () => {
console.log("Server is running on port 3000");
composeClient.connect();
});