Migrating from react-pdf

Moving off react-pdf but want to switch to Svelte at the same time? The Svelte adapter exposes the same components with the same props — the rewrites in the tables below apply verbatim, just import from @formepdf/svelte instead of @formepdf/react and author templates as .svelte files.

​

Component mapping

​

Import changes

import { Document, Page, View, Text, Image, StyleSheet } from '@react-pdf/renderer';

import { Document, Page, View, Text, Image } from '@formepdf/react';

import { StyleSheet } from '@formepdf/react';

const styles = StyleSheet.create({
  heading: { fontSize: 24, fontWeight: 700 },
});

​

Style differences

​

Rendering

import { renderToBuffer } from '@react-pdf/renderer';
const buffer = await renderToBuffer(<MyDocument />);

import { renderDocument } from '@formepdf/core';
const pdfBytes = await renderDocument(<MyDocument />);

​

Tables

<View style={{ flexDirection: 'row', borderBottom: '1px solid #ccc' }}>
  <View style={{ width: '50%', padding: 8 }}><Text>Name</Text></View>
  <View style={{ width: '50%', padding: 8 }}><Text>Price</Text></View>
</View>

<Table columns={[{ width: { fraction: 0.5 } }, { width: { fraction: 0.5 } }]}>
  <Row header>
    <Cell style={{ padding: 8 }}><Text>Name</Text></Cell>
    <Cell style={{ padding: 8 }}><Text>Price</Text></Cell>
  </Row>
</Table>

​

Fixed headers and footers

<Page>
  <View fixed style={{ position: 'absolute', top: 0, left: 0, right: 0 }}>
    <Text>Header</Text>
  </View>
</Page>

<Page>
  <Fixed position="header">
    <Text>Header</Text>
  </Fixed>
</Page>

​

Page numbers

<Text render={({ pageNumber, totalPages }) => `Page ${pageNumber} of ${totalPages}`} />

<Text>Page {'{{pageNumber}}'} of {'{{totalPages}}'}</Text>

​

What works better in Forme

1. Page breaks. Flex containers, tables, and text all break correctly across pages. In react-pdf, flex layouts produce incorrect proportions after page splits.
2. Table header repetition. Mark a row as header and it repeats on every page. No workarounds needed.
3. Dev server. forme dev gives you live preview with debug overlays and click-to-inspect. react-pdf requires rendering to a file and opening it manually.
4. Speed. Forme’s Rust/WASM engine renders in milliseconds. react-pdf is typically 5-10x slower for complex documents.
5. Dependencies. Forme is a single WASM binary with no native dependencies. react-pdf depends on yoga-layout (native binary).
6. Links. Add href to any <Text> or <View> to create clickable PDF links. No separate <Link> component needed.
7. Bookmarks. Add bookmark to any <Text> or <View> to create PDF outline entries. Readers can navigate long documents from the bookmark panel.
8. Inline text styling. Nest <Text> inside <Text> to style individual words or spans. Bold a single word, change colors mid-sentence, or apply strikethrough to a price.
9. QR codes. Built-in <QrCode> component renders vector-based QR codes. react-pdf has no equivalent.
10. Barcodes. Built-in <Barcode> component supports Code 128, Code 39, EAN-13, EAN-8, and Codabar. react-pdf has no equivalent.
11. Text overflow. textOverflow: 'ellipsis' truncates single-line text with ”…” when it exceeds available width. react-pdf does not support text truncation.
12. Font fallback chains. fontFamily: "Inter, Helvetica" tries each font in order. react-pdf only accepts a single family name.

​

What works in react-pdf but not Forme (yet)

1. <Canvas> component. react-pdf’s <Canvas> uses a render callback with the raw PDF page object. Forme’s <Canvas> provides a recording context with a Canvas-like API (moveTo, lineTo, arc, rect, fill, stroke, etc.).
2. <Note> component. react-pdf supports PDF annotations via <Note>. Forme does not support this yet.
3. Emoji rendering. react-pdf handles emoji via system fonts. Forme does not have special emoji support.
4. margin: "auto". react-pdf supports margin: "auto" for centering. In Forme, use flexbox alignment (justifyContent: 'center', alignItems: 'center') instead.

​

Migration checklist

1. Replace @react-pdf/renderer imports with @formepdf/react and @formepdf/core
2. Update StyleSheet import from @react-pdf/renderer to @formepdf/react (works the same way)
3. Replace fixed prop + absolute positioning with <Fixed position="header"> or <Fixed position="footer">
4. Replace render callbacks for page numbers with {{pageNumber}} / {{totalPages}} placeholders
5. Convert View-based table layouts to <Table>, <Row>, <Cell> components
6. Convert <SVG> elements to <Svg> with SVG markup in the content prop
7. Replace <Link> components with <Text href="..."> equivalents
8. Test page break behavior, especially for tables and flex layouts