Document model

Format provides a document model that enables you to build PDFs using web technologies. Every Format document uses this model to build a tree of nodes that describes the shape and content of your document.

Author with one of the SDKs inside the JavaScript ecosystem, or write the HTML directly when you build outside it. Here is a minimal document:

export const doc = () => (
	<Document title='Invoice #1234'>
		<Layout id='invoice' width={793.71} height={1122.52}>
			<header>Horizon Studios · Invoice #1234</header>

			<Flow>
				<p>Hello, world.</p>
			</Flow>

			<footer>www.horizonstudios.com</footer>
		</Layout>
	</Document>
)

<template>
	<Document title="Invoice #1234">
		<Layout id="invoice" :width="793.71" :height="1122.52">
			<header>Horizon Studios · Invoice #1234</header>

			<Flow>
				<p>Hello, world.</p>
			</Flow>

			<footer>www.horizonstudios.com</footer>
		</Layout>
	</Document>
</template>

<template data-type="document" data-title="Invoice #1234">
  <template data-type="layout" data-id="invoice" data-width="793.71px" data-height="1122.52px">
    <header>Horizon Studios · Invoice #1234</header>

    <template data-type="flow">
      <p>Hello, world.</p>
    </template>

    <footer>www.horizonstudios.com</footer>
  </template>
</template>

Format takes a document and renders that tree into a PDF. It creates pages, repeats structural markup like headers and footers, and splits tall content across page boundaries. You never place anything by coordinate. Compare this with most PDF libraries that make you position every line of text and every shape by hand, page by page.

You can think of a document as a small set of nested pieces:

• Layouts describe a page and hold its content. A Layout carries the page size and the markup, and it produces its own run of pages. The header and footer reprint on every page; the Flow inside it paginates.
• Flows paginate content. A Flow is the region that breaks across pages. Everything inside it that is not its Stream repeats on every page; the stream's items appear once and flow page to page.
• Streams mark where the items land. A Flow with surrounding markup wraps its items in a Stream. A bare Flow uses its own children as the stream and needs no Stream at all.

The full model

A Layout with one Flow is enough to render a paginated document. The remaining types extend the model when you need them: Frames (a bounded region a Flow overflows against) and PageBreaks (force a page boundary). You'll meet them in Build your first PDF as you go.

Where to go next

• Want to build something? Build your first PDF walks through a real document one piece at a time.
• Looking up a type? Each type page lists fields, constraints, and examples. See Layout, Flow, Stream, and the rest.
• Wondering how pagination behaves? Pagination, Splitting, and Scaffolding cover the runtime rules.
• Setting up fonts, page sizes, or assets? See Authoring.