Skip to main content
ComposerAdd(options?: ComposerAddOptions): Component;

interface ComposerAddOptions {
    title?: string;
    property: string;
}
​
property
string
required
The property/slot name this button adds components to. Must match a property defined in your layout component.
​
title
string
Custom label text for the add button. If omitted, a default label is used.

​
Support

​
Usage

​
Basic add button

ComposerAdd({ property: "items" })

​
Add button with custom title

ComposerAdd({
    property: "menuItems",
    title: "Add Menu Item"
})

​
In a list layout

VStack([
    ForEach(items, (item, index) =>
        ItemComponent(item)
    ),
    ComposerAdd({
        property: "items",
        title: "Add New Item"
    })
])

​
With ComposerGroup

ComposerGroup({ group: "sidebar" }, [
    ForEach(sidebarItems, (item) =>
        SidebarItem(item)
    ),
    ComposerAdd({
        property: "sidebarItems",
        title: "Add Sidebar Item"
    })
])

​
Multiple slots

VStack([
    Text("Header").font("headline"),
    ForEach(headerItems, (item) => HeaderItem(item)),
    ComposerAdd({ property: "headerItems", title: "Add Header Item" }),

    Divider(),

    Text("Content").font("headline"),
    ForEach(contentItems, (item) => ContentItem(item)),
    ComposerAdd({ property: "contentItems", title: "Add Content Item" })
])

​
Notes

  • This component is only visible in the Composer editing UI. It renders nothing on native platforms or in published content.
  • The property value must correspond to a property on the layout component. The Composer uses this to determine which component types can be added.
  • Pair with ComposerGroup to define named content slots with fallback empty states.