Generate PDFs

takumi-pdf renders JSX, HTML, and node trees to PDF. Use CSS and Tailwind to lay out the document, then save the returned bytes or send them in an HTTP response. The WebAssembly renderer runs without a browser process.

npm i takumi-pdf @takumi-rs/helpers react

Render a document

import { render } from "takumi-pdf";
import { PageNumber, TotalPages } from "takumi-pdf/primitives";
import { googleFonts } from "@takumi-rs/helpers";
import { writeFile } from "node:fs/promises";

const pdf = await render(
  <main>
    <h1>Invoice 1042</h1>
    <p>Total: $1,290</p>
  </main>,
  {
    size: "a4",
    fonts: await googleFonts(["Inter"]),
    footer: (
      <div tw="flex w-full justify-center text-[10px] text-gray-500">
        Page <PageNumber /> of <TotalPages />
      </div>
    ),
  },
);

await writeFile("invoice.pdf", pdf);

render() returns a Uint8Array. By default, it flows content across A4 pages with automatic margins. Body text stays selectable, and registered fonts are embedded as subsets. SVG labels are drawn as outlines.

HTML strings use the same parser as takumi-js. A <style> tag in the string applies only to that render:

import { render } from "takumi-pdf";

const pdf = await render(`
  <style>.total { font-weight: 700 }</style>
  <div><span class="total">Total: $1,290</span></div>
`);

Headers, footers, and measure() accept the same inputs.

Page setup

import { render } from "takumi-pdf";

const pdf = await render(report, {
  size: "letter", // a page keyword, or { width, height } in CSS px at 96 dpi
  landscape: true,
  margin: { top: 48, right: 32, bottom: 48, left: 32 },
});

size accepts these paper sizes. Each keyword uses portrait orientation:

Set landscape to turn any of them, or pass { width, height } for a size with no keyword.

Set page geometry through these options. CSS @page rules are not parsed.

Automatic top and bottom margins fit the header or footer, including its 20px inset from the paper edge. They are at least 37.8px on ordinary page sizes. Without a header or footer, the default is 37.8px (1cm). See Headers and footers.

Leave backgroundColor unset for white paper. A viewer draws white by default, and the file stays free of a full-page rectangle.

Reuse a renderer

render() reuses a shared renderer. Create a PdfRenderer when you need a separate font registry:

import { PdfRenderer } from "takumi-pdf";

const renderer = new PdfRenderer();
await renderer.registerFont("https://example.com/fonts/Inter-Regular.woff2");

const pdf = await renderer.render(doc);

Registered fonts are deduplicated across calls. Replace the example URL with your font file.

Runtimes

Use the default import on Node.js, Bun, and Cloudflare Workers. For manual initialization, import takumi-pdf/no-init.

Next.js

Import takumi-pdf/next in a Next.js route handler. This entry supports the Node and Edge runtimes without a serverExternalPackages entry.

import { render } from "takumi-pdf/next";

In the browser

For browser bundles, initialize the renderer with takumi-pdf/no-init and takumi-pdf/wasm-url:

import init, { render } from "takumi-pdf/no-init";
import wasmUrl from "takumi-pdf/wasm-url";

await init({ module_or_path: wasmUrl });

takumi-pdf/wasm-url resolves the binary with new URL(specifier, import.meta.url). Vite, webpack, and Turbopack rewrite that call to the asset they emit. The module has no top-level await, so it also works in a worker bundled as an IIFE.

Server code should keep the default entry. A Vite SSR build leaves the URL pointing at the server chunk, where the asset never lands.

On Turbopack, drop any turbopack.rules entry mapping *.wasm to type: "wasm". That rule makes Turbopack instantiate the binary and look for wasm-bindgen glue the package does not ship.

Choose the next guide

For complete document patterns, see Invoices, Reports, and Charts.