Skip to content

Composition

A Composition is a named, authored unit of composed content. The top-level anatomy + elements + layout triplet is the primary content — there is no wrapper and no reserved main key. An optional slotContent map bundles named slot fills alongside that primary content for authoring convenience.

interface Composition {
  title?: string;
  description?: string;
  anatomy: Anatomy;
  elements: Elements;
  layout: Layout;
  slotContent?: Record<string, SlotContent>;
}

type Compositions = Record<string, Composition>;

Properties

Property	Type	Required	Description
`title`	`string`	No	Human-readable label for the composition
`description`	`string`	No	Purpose and usage notes for documentation tooling
`anatomy`	`Anatomy`	Yes	Element type map for the primary content
`elements`	`Elements`	Yes	Element-level content, styles, and prop configurations
`layout`	`Layout`	Yes	Tree ordering of the primary content
`slotContent`	`Record<string,` `SlotContent>`	No	Named slot fills bundled with this composition

slotContent is an authoring convenience, not a scope boundary — fills there may reference entries in other compositions via SlotContentRef.

Registry and references

Compositions (Record<string, Composition>) is the registry shape used by external composition files, keyed compositions: (system-scoped).

A SlotContentRef pointing at a composition resolves as follows:

Pointer	Resolves to
`#/compositions/pageGrid`	the composition’s top-level `anatomy + elements + layout`
`#/compositions/filterResultsPage/slotContent/pageHeader`	that bundled `SlotContent`

Further Reading