Headers and Footers

Basic usage

Add <header> and <footer> elements inside a <section>:

<section>
  <header>
    <paragraph alignment="right">
      <run fontSize={18} color="595959">Company Name</run>
    </paragraph>
  </header>

  <paragraph><run>Document body content.</run></paragraph>

  <footer>
    <paragraph alignment="center">
      <run fontSize={16} color="595959">Page </run>
      <field code="PAGE" />
      <run fontSize={16} color="595959"> of </run>
      <field code="NUMPAGES" />
    </paragraph>
  </footer>
</section>

Header/footer types

Each section can have up to three header and three footer variants:

Type	When displayed
"default"	All pages (unless overridden by first/even)
"first"	First page of the section only
"even"	Even-numbered pages only

<section>
  <header type="default">
    <paragraph><run>Default Header</run></paragraph>
  </header>
  <header type="first">
    <paragraph><run>First Page Header</run></paragraph>
  </header>
  <header type="even">
    <paragraph><run>Even Page Header</run></paragraph>
  </header>

  {/* ... body content ... */}
</section>

Page numbers in footers

Use the <field> element to insert dynamic page numbers:

<footer>
  <paragraph alignment="center">
    <field code="PAGE" />
    <run> / </run>
    <field code="NUMPAGES" />
  </paragraph>
</footer>

Available field codes: PAGE (current page), NUMPAGES (total pages), DATE (current date).

Headers with images

<header>
  <paragraph>
    <image src={logoDataUri} widthPt={48} heightPt={48} altText="Logo" />
    <run fontSize={24} bold> Company Report</run>
  </paragraph>
</header>

Per-section headers

Each <section> can define its own headers and footers independently. This is useful for documents with a cover page followed by different content sections:

<document>
  {/* Cover page with no header */}
  <section>
    <heading level={1}><run>Annual Report 2025</run></heading>
  </section>

  {/* Main content with header and footer */}
  <section>
    <header>
      <paragraph alignment="right"><run>Annual Report 2025</run></paragraph>
    </header>
    <paragraph><run>Chapter 1 content...</run></paragraph>
    <footer>
      <paragraph alignment="center"><field code="PAGE" /></paragraph>
    </footer>
  </section>
</document>