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.

Assets load differentlyCopy Anchor Link

The component map above shows where Font.register, <Image>, and Font.registerEmojiSource go.

See Fonts & images for the loaders.

Known gapsCopy 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 do work, as CSS properties, and Pagination covers them. For archival output and accessibility validation, see PDF/A & PDF/UA.