Skip to main content
The page factories build three primitive elements: text, rectangles, and images. Each is built with a typed options object and then added to the page or a container. An element joins the vertical flow unless it carries a position, which makes it explicit and absolute.

​
Text

interface CreateTextOptions {
  content: string;
  style?: StyleProperties;
  classname?: string;
  width?: number;
  position?: { x: number; y: number };
  parse_markdown?: boolean;
  z_index?: number;
}
​
content
string
required
The text to render.
​
style
StyleProperties
Color, font family, size, weight, alignment, padding, and other style fields.
​
classname
string
A name a theme can target to apply default styles.
​
width
number
A fixed width for the text box. Without one, the text takes its intrinsic width.
​
position
{ x: number; y: number }
Absolute coordinates. With a position the element is explicit and leaves the flow.
​
parse_markdown
boolean
Overrides the document level markdown setting for this one element.
​
z_index
number
Draw order among overlapping elements within the same parent.

​
Rectangles

interface CreateRectOptions {
  width?: number;
  height?: number;
  style?: StyleProperties;
  shape_style?: ShapeStyle;
  position?: { x: number; y: number };
  z_index?: number;
}

interface ShapeStyle {
  fill_color?: ColorLike;
  stroke_color?: ColorLike;
  stroke_width?: number;
  border_radius?: number;
}
Rectangle colors come from style.background_color or from a shape_style with fill_color and stroke_color. Use stroke_width for the border thickness and border_radius for rounded corners.

​
Images

interface CreateImageOptions {
  name: string;
  width?: number;
  height?: number;
  position?: { x: number; y: number };
  z_index?: number;
}
The name references an image registered with load_image_sync. Register the file first, then reference it by name.

​
Text, rectangles, and images together

const label = page.text({
  content: "Absolute label",
  position: { x: 100, y: 200 },
  style: { font_size: 11 },
});

const card = page.rect({
  width: 400,
  height: 120,
  shape_style: { fill_color: "#1a365d", border_radius: 10 },
});

pdf.load_image_sync("logo", "./assets/logo.png");
const img = page.image({ name: "logo", width: 120, height: 40 });

page.add(label, card, img);
A position makes an element explicit and absolute on the page. Without one it joins the vertical flow.

​
Overlay children and z index

Any element can own overlay children built with element.text, element.rect, element.image, or element.create_container. Children are positioned relative to the parent’s top left corner and render on top of it, sorted by z index. 
const box = page.rect({
  width: 300,
  height: 80,
  shape_style: { fill_color: "#2b6cb0", border_radius: 8 },
});
box.text({
  content: "Rendered on top of the box.",
  style: { color: "#ffffff", padding: 12 },
  z_index: 1,
});
page.add(box);
Within the same parent, elements render in ascending z index order regardless of declaration order.

Layout

Arrange elements with flow and flex containers.

Themes

Style elements by type and classname.