Links, outline & metadata

Hyperlinks

Anchors with an href become clickable link annotations. They appear on every page that their box touches:

import { render } from "takumi-pdf";

const pdf = await render(
  <p>
    Pay online at <a href="https://example.com/pay/1042">example.com/pay/1042</a>.
  </p>,
);

Inline anchors annotate each text run. A link that wraps across lines stays clickable on both lines. Block-level anchors annotate their entire box.

http, https, mailto and tel links open outside the document. An href starting with # points inside it instead, to the element carrying that id:

import { render } from "takumi-pdf";

const pdf = await render(
  <div>
    <a href="#appendix">Jump to the appendix</a>
    <h1 id="appendix">Appendix</h1>
  </div>,
);

Clicking it moves to the page holding that element. A fragment matching no element is dropped, so the reader never gets a link that goes nowhere. Other schemes are dropped too: they have no meaning inside a standalone document.

Outline

Set outline: true to build PDF bookmarks from h1–h6 headings. Deeper headings nest under the previous shallower heading. This matches an HTML document outline:

import { render } from "takumi-pdf";

const pdf = await render(report, { outline: true });

Clicking a bookmark jumps to the page and position of its heading.

Document metadata

metadata fills the PDF document properties. lang also sets the metadata language:

import { render } from "takumi-pdf";

const pdf = await render(report, {
  lang: "en",
  metadata: {
    title: "Annual report 2026",
    description: "Consolidated results for fiscal year 2026",
    authors: ["Acme Inc."],
    keywords: ["annual report", "2026"],
    creator: "acme-reporting",
  },
});

All fields are optional. Omitting metadata writes no document properties. This keeps output byte-identical across runs for golden testing.