Skip to main content
A reusable component is just a function that returns a Block or an array of Blocks. Because page.content flattens arrays, a component that returns Block[] can be spread inline alongside other blocks.

​
A callout component

This component returns a single note block. 
const callout = (title: string, body: InlineContent): Block =>
  ({ type: "note", variant: "info", title, text: body });

​
A section component

This component returns an array of blocks, a heading followed by a paragraph. 
const section = (title: string, body: InlineContent): Block[] => [
  { type: "heading", text: title, level: 2 },
  { type: "paragraph", text: body },
];

​
Using them in a page

Spread the array returning component, and pass the single block component directly. 
doc.page().content(
  ...section("Overview", "What this document covers."),
  callout("Heads up", "This value is provisional."),
);
Spreading works because content flattens arrays. A Block[] component composes the same as a single Block.
The repository includes a full reference at examples/simplified that puts these patterns together in one document.