> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nemu.cc/llms.txt
> Use this file to discover all available pages before exploring further.

# Headers and footers

> Set document or per page headers and footers, including raw vector drawing

A header or footer is one of four shapes: a single block, an array of blocks, a function of
page context, or a raw draw callback. Functions run per page at build time.

```ts theme={null}
type HeaderFooter =
  | Block
  | Block[]
  | ((ctx: PageContext) => Block | Block[])
  | RawDraw;
```

## Page context

A function header or footer receives the page context, and a raw draw receives a draw area
that extends it with the zone rectangle.

```ts theme={null}
type PageContext = { page_number: number; page_count: number; date: Date };

interface DrawArea extends PageContext { x: number; y: number; width: number; height: number }
interface RawDraw { height: number; draw: (doc, area: DrawArea) => void }
```

## Setting them

Set a header or footer document wide with `doc.set_header` and `doc.set_footer`, or per page
through `doc.page({ header, footer })`.

## Function footer

A function runs once per page, so it can read the current page number and total count.

```ts theme={null}
doc.set_footer((ctx) => ({
  type: "paragraph",
  text: `Page ${ctx.page_number} of ${ctx.page_count}`,
  style: { font_size: 9, color: "#9ca3af", text_align: "right" },
}));
```

## Raw draw header

A `RawDraw` declares a `height` and a `draw` callback. The callback receives the live pdfkit
document and the zone rectangle, so you can draw vector graphics directly.

```ts theme={null}
doc.set_header({
  height: 40,
  draw: (pdoc, area) => {
    pdoc.rect(area.x, area.y + area.height - 1, area.width, 1).fill("#e5e7eb");
  },
});
```

<Tip>
  Per page headers and footers override the document wide ones for that page. Pass them through
  `doc.page({ header, footer })`.
</Tip>