From react-pdf

To migrate, replace react-pdf's primitives with HTML elements, move page settings into render() options, and convert lengths from pt to CSS px. The resulting JSX also renders as an image with takumi-js.

Before and afterCopy Anchor Link

// @react-pdf/renderer
import { Document, Page, View, Text, StyleSheet, renderToBuffer, Font } from "@react-pdf/renderer";

Font.register({ family: "Inter", src: "./Inter-Regular.ttf" });

const styles = StyleSheet.create({
  page: { padding: 48, fontFamily: "Inter" },
  row: { flexDirection: "row", justifyContent: "space-between" },
  label: { fontSize: 10, color: "#6b7280" },
});

const pdf = await renderToBuffer(
  <Document>
    <Page size="A4" style={styles.page}>
      <View style={styles.row}>
        <Text style={styles.label}>Invoice</Text>
        <Text style={styles.label}>INV-0042</Text>
      </View>
    </Page>
  </Document>,
);

// takumi-pdf
import { googleFonts } from "@takumi-rs/helpers";
import { render } from "takumi-pdf";

const pdf = await render(
  <div tw="flex justify-between text-gray-500" style={{ fontSize: (10 * 96) / 72 }}>
    <span>Invoice</span>
    <span>INV-0042</span>
  </div>,
  { size: "a4", margin: 64, fonts: await googleFonts(["Inter"]) },
);

Component mapCopy Anchor Link

Preserve the layoutCopy Anchor Link

Units are CSS pxCopy Anchor Link

react-pdf measures lengths in pt. Takumi measures them in CSS px at 96 dpi, so multiply every length by 96 / 72, about 1.333. A4 is 595 × 842 pt, or 794 × 1123 px. Unitless values such as flexGrow, opacity, and fontWeight carry over unchanged.

Flex direction defaults to rowCopy Anchor Link

react-pdf defaults every container to column. CSS defaults to row, so a stacked layout needs flex-direction: column written out.

Flex layout is opt-inCopy Anchor Link

react-pdf's <View> is always a flex container. A plain HTML element is not, so a <div> that lays out children needs display: flex or display: grid. In Tailwind, write tw="flex flex-col".

Page bandsCopy Anchor Link

react-pdf repeats a band by marking a <View> inside the page as fixed. Takumi takes the band as a separate option and draws it in the margin:

import { render } from "takumi-pdf";
import { PageNumber, TotalPages } from "takumi-pdf/primitives";

const pdf = await render(report, {
  footer: (
    <div tw="flex w-full justify-center text-[10px] text-gray-500">
      Page <PageNumber /> of <TotalPages />
    </div>
  ),
  margin: { top: 48, bottom: 72 },
});

The counter is a class on an element, not a render callback. See Headers & footers for counter styles and for sizing the margin to the band.

Features to adaptCopy Anchor Link

Takumi has no equivalent for minPresenceAhead, hyphenation callbacks, or react-pdf's preview and download components. Render a Uint8Array and deliver it from your application. In a browser bundle, use the manual initialization entry.

widows and orphans work as CSS properties. See Pagination.

Takumi does not use the 14 standard PDF fonts. Register every font your template uses.

For archival output and accessibility validation, see PDF/A and PDF/UA.