Single-page viewport

viewport renders one fixed page instead of paged output. It behaves like an image render. Percentage heights resolve against the viewport. It clips overflow.

const pdf = await render(<div style={{ width: "100%", height: "100%" }}>Certificate</div>, {
  viewport: { width: 1123, height: 794 }, // A4 landscape in px
});

Content-sized pages

Omit height to size the single page to its laid-out content. This works like a thermal receipt. Percentage heights do not resolve in this mode:

const pdf = await render(receipt, { viewport: { width: 302 } }); // 80mm at 96 dpi

viewport cannot be combined with size, landscape, margin, header, or footer. Those options work only with paged output. Hyperlinks, outline, and metadata work in both modes.