Skip to main content
A container groups children and arranges them with a flow or flex layout. Build one with page.create_container, add children with container.add, then add the container to the page. Children flow or flex inside the container’s padded area.

​
Container layout

type ContainerLayout =
  | { type: "flex"; direction: "row" | "column"; justify?: FlexJustify; align?: FlexAlign; gap?: number }
  | { type: "flow"; gap?: number };
A flow layout stacks children vertically with an optional gap. A flex layout distributes children along a row or column. Containers also accept style, width, height, position, and classname.

​
Flow

Flow is the simplest layout. Children stack from top to bottom, separated by gap. 
const stack = page.create_container({
  layout: { type: "flow", gap: 8 },
  width: page.get_content_width(),
});
stack.add(
  page.text({ content: "First line" }),
  page.text({ content: "Second line" }),
  page.text({ content: "Third line" }),
);
page.add(stack);

​
Flex

Flex distributes children along a row or column and controls how spare space is shared. 
const row = page.create_container({
  layout: { type: "flex", direction: "row", justify: "space-between", align: "center", gap: 12 },
  width: page.get_content_width(),
});
row.add(
  page.text({ content: "Left" }),
  page.text({ content: "Right" }),
);
page.add(row);

​
Justify

justify controls distribution along the main axis.
​
justify
FlexJustify
One of flex-start, flex-end, center, space-between, space-around, space-evenly.

​
Align

align controls placement along the cross axis.
​
align
FlexAlign
One of flex-start, flex-end, center, stretch, baseline.

​
Adding children

Use container.add(...elements) to place children. They flow or flex inside the container’s padded area according to its layout.
Size a full width container with page.get_content_width() so it spans the usable area inside the page margins.

Elements

The text, rectangle, and image primitives you add to a container.

Tables

Structured rows and columns with the table factory.