Skip to main content
makeComponent(body: (props: Record<string, any>, children: Component[]) => Component):
    (props?: Record<string, any>, children?: Component[]) => Component;
​
body
(props, children) => Component
required
A function that receives props and children and returns a component tree.

​
Returns

A callable component function that can be invoked with optional props and children.

​
Usage

​
Simple component

const Greeting = makeComponent((props) => {
    return Text("Hello, " + props.name + "!")
})

// Usage
Greeting({ name: "World" })

​
Component with children

const Card = makeComponent((props, children) => {
    return VStack([
        Text(props.title).font("headline"),
        ...children
    ])
    .padding(16)
    .background(Color("white"))
    .cornerRadius(8)
})

// Usage
Card({ title: "My Card" }, [
    Text("Card content here"),
    Button("Action", () => {})
])

​
Notes

  • makeComponent is a legacy utility. For new components, use defineComponent instead, which provides support for metadata, property schemas, previews, and thumbnails.
  • Components created with makeComponent can use hooks like useState and access the environment.
  • This function is not exported in metabind.d.ts — it is an internal runtime function used by the rendering engine. It may not be available in all authoring contexts.

​
See Also