Document

The root container for a PDF's layouts, metadata, and document-wide settings.

A Document is the root container for a PDF. It contains the Layouts that define page designs and the Flows that hold document content. It also sets the PDF's metadata: title, subject, author, keywords, and language.

Fields

titleRequiredType stringThe document title. Written to the rendered PDF as its title metadata and used in the Format Dashboard for filtering and reporting.

subjectType stringThe document subject. Written to the rendered PDF as its subject metadata.

authorType stringThe document author. Written to the rendered PDF as its author metadata.

keywordsType stringComma-separated keywords. Written to the rendered PDF as its keyword metadata and used in the Format Dashboard for filtering and reporting.

langType stringThe language the document is written in, as a BCP 47 language tag such as "fr" or "pt-BR". Format adds it to your PDF, and screen readers use it to choose the right voice and pronunciation. Format also applies that language's conventions for quotation marks and letter case to every page. Set it on every document: without it, your PDF has no language and doesn't meet accessibility standards such as WCAG and PDF/UA. Format ignores invalid tags, such as "en_US" or "english". To mark a passage in a different language, add a lang attribute to its element.

fontsType stringSelects the versions of Format's built-in Sans, Serif, and Mono fonts. compact (default) uses static fonts for smaller PDFs. fidelity uses variable fonts, preserving optical sizing where supported, but typically produces larger PDFs. Custom fonts are used as supplied in either mode.

Example

A minimal document. One Layout, one Flow, one rendered page.

export const doc = () => (
  <Document title="Invoice #1234" author="Acme Co." lang="en">
    <Layout id="invoice" width={793.71} height={1122.52}>
      <Flow>
        <p>Hello, world.</p>
      </Flow>
    </Layout>
  </Document>
)

<template>
  <Document title="Invoice #1234" author="Acme Co." lang="en">
    <Layout id="invoice" :width="793.71" :height="1122.52">
      <Flow>
        <p>Hello, world.</p>
      </Flow>
    </Layout>
  </Document>
</template>

<template data-type="document" data-title="Invoice #1234" data-author="Acme Co." data-lang="en">
  <template data-type="layout" data-id="invoice" data-width="793.71px" data-height="1122.52px">
    <template data-type="flow">
      <p>Hello, world.</p>
    </template>
  </template>
</template>

Usage

Document is the root container, and there is exactly one. Set its title (required) plus any of subject, author, keywords, and lang to populate the rendered PDF's metadata, then nest your Layouts inside.

If your codebase produces several distinct PDFs, each compiles to its own Document (one per entry point). You can't render two Documents in a single render call.

What goes inside

Place these elements directly inside a Document:

Layouts. Page designs that produce pages. At least one, otherwise nothing renders. Each Layout holds the Flows that paginate its content.
A Numbering config. An optional <Numbering> block sets the document-wide counter style for headings, figures, and footnotes. At most one.
Bookmarks. Optional settings for heading numbers and separators in PDF bookmarks. At most one.

Each Layout produces its own run of pages in source order, so a Document with two Layouts renders the first run, then the second.

PDF metadata

The title, subject, author, and keywords fields map to the rendered PDF's metadata block. The lang field sets your PDF's language.

Language

Set lang to the language your document is written in, as a BCP 47 language tag such as en, fr, de-CH, or pt-BR. Format adds it to your PDF, and screen readers use it to choose the right voice and pronunciation. Format also applies that language's conventions for quotation marks and letter case to every page.

Set lang on every document, including English ones. Without it, your PDF has no language and doesn't meet accessibility standards such as WCAG and PDF/UA. Format ignores invalid tags: use en-US, not en_US, and en, not english.

Passages in another language

To mark a passage in a different language, add a lang attribute to its element. The language applies to that element and everything inside it. When the element is a paragraph, heading, list item, or block quotation, Format also adds its language to your PDF, so screen readers switch languages for that passage.

export const doc = () => (
  <Document title="Facture n° 1234" lang="fr">
    <Layout id="invoice" width={793.71} height={1122.52}>
      <Flow>
        <p>Merci pour votre commande.</p>
        <p lang="en">Thank you for your order.</p>
      </Flow>
    </Layout>
  </Document>
)

<template>
  <Document title="Facture n° 1234" lang="fr">
    <Layout id="invoice" :width="793.71" :height="1122.52">
      <Flow>
        <p>Merci pour votre commande.</p>
        <p lang="en">Thank you for your order.</p>
      </Flow>
    </Layout>
  </Document>
</template>

<template data-type="document" data-title="Facture n° 1234" data-lang="fr">
  <template data-type="layout" data-id="invoice" data-width="793.71px" data-height="1122.52px">
    <template data-type="flow">
      <p>Merci pour votre commande.</p>
      <p lang="en">Thank you for your order.</p>
    </template>
  </template>
</template>

Was this page helpful?