react-pdf

import React from "react";
import { Document, Page, Text, View, StyleSheet, renderToFile } from "@react-pdf/renderer";
 
const styles = StyleSheet.create({
  page: { flexDirection: "column", backgroundColor: "#ffffff", padding: 40 },
  title: { fontSize: 24, marginBottom: 20, fontWeight: "bold" },
  text: { fontSize: 12, lineHeight: 1.5 },
});
 
const MyDocument = () => (
  <Document>
    <Page size="A4" style={styles.page}>
      <View style={{ margin: 10, padding: 20 }}>
        <Text style={styles.title}>Document Title</Text>
        <Text style={styles.text}>Your content here</Text>
      </View>
    </Page>
  </Document>
);
 
(async () => {
  await renderToFile(<MyDocument />, "./output.pdf");
  console.log("PDF saved!");
})();

npx tsx my-document.tsx

// Good
(async () => {
  await renderToFile(<MyDocument />, "./output.pdf");
})();
 
// Bad - top-level await may fail
await renderToFile(<MyDocument />, "./output.pdf");

pdftoppm -png -r 200 document.pdf preview
# → preview-1.png, preview-2.png, ...

pip install pymupdf

import fitz
 
doc = fitz.open("document.pdf")
for i, page in enumerate(doc):
    pix = page.get_pixmap(dpi=200)
    pix.save(f"page-{i+1}.png")

import { renderToFile, renderToBuffer } from "@react-pdf/renderer";
 
// To file
(async () => {
  await renderToFile(<MyDocument />, "./document.pdf");
})();
 
// To buffer
(async () => {
  const buffer = await renderToBuffer(<MyDocument />);
})();

const styles = StyleSheet.create({ container: { padding: 20 } });
 
<View style={styles.container} />
<View style={{ padding: 20 }} />
<View style={[styles.container, { marginTop: 10 }]} />

{
  // Flexbox
  flexDirection: "row", justifyContent: "space-between", alignItems: "center",
  flexWrap: "wrap", gap: 10,
 
  // Box model
  margin: 10, padding: 20, width: "100%", height: 200,
 
  // Borders
  borderWidth: 1, borderColor: "#333", borderRadius: 5, borderStyle: "solid",
 
  // Colors
  backgroundColor: "#f0f0f0", color: "#000", opacity: 0.8,
 
  // Typography
  fontSize: 12, fontWeight: "bold", fontFamily: "Helvetica", fontStyle: "italic",
  lineHeight: 1.5, textAlign: "center", textDecoration: "underline",
  textTransform: "uppercase", letterSpacing: 1,
 
  // Position
  position: "absolute", top: 0, left: 0, right: 0, bottom: 0, zIndex: 10,
 
  // Transforms
  transform: "rotate(45deg)", transformOrigin: "center",
}

import { Image } from '@react-pdf/renderer';
 
<Image src="./images/photo.jpg" style={{ width: 200, height: 150 }} />
<Image src={{ data: buffer, format: 'png' }} />

import { Svg, Circle, Rect, Path, Line, G, Defs, LinearGradient, Stop } from "@react-pdf/renderer";
 
<Svg width="200" height="200" viewBox="0 0 200 200">
  <Defs>
    <LinearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <Stop offset="0%" stopColor="#3498db" />
      <Stop offset="100%" stopColor="#9b59b6" />
    </LinearGradient>
  </Defs>
  <Circle cx="100" cy="100" r="50" fill="url(#grad1)" />
  <Rect x="10" y="10" width="50" height="50" fill="#e74c3c" />
  <Path d="M10,50 Q50,10 90,50" stroke="#2ecc71" strokeWidth="2" fill="none" />
</Svg>;

npm install lucide-static

import { Svg, Path, Rect } from "@react-pdf/renderer";
 
// Converted from lucide-static/icons/mail.svg
const MailIcon = ({ size = 12, color = "#888" }) => (
  <Svg width={size} height={size} viewBox="0 0 24 24">
    <Path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" stroke={color} strokeWidth={2} fill="none" />
    <Rect x="2" y="4" width="20" height="16" rx="2" stroke={color} strokeWidth={2} fill="none" />
  </Svg>
);

<Link src="https://example.com"><Text>Visit website</Text></Link>
 
<View id="section-1"><Text>Target</Text></View>
<Link src="#section-1"><Text>Jump to Section 1</Text></Link>

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

<Page size="A4">
  <View fixed style={{ position: "absolute", top: 20, left: 30, right: 30 }}>
    <Text>Header</Text>
  </View>
  <View style={{ marginTop: 60, marginBottom: 60 }}>
    <Text>Content</Text>
  </View>
  <Text
    fixed
    style={{ position: "absolute", bottom: 20, left: 30, right: 30, textAlign: "center" }}
    render={({ pageNumber, totalPages }) => `Page ${pageNumber} of ${totalPages}`}
  />
</Page>

<View break />                              // Force page break
<View wrap={false}><Text>Keep together</Text></View>  // Prevent breaking inside
<Text orphans={2} widows={2}>Long text...</Text>       // Orphan/widow control
<View minPresenceAhead={100}><Text>Content</Text></View>  // Min space before break

import { Font } from "@react-pdf/renderer";
 
Font.register({
  family: "Roboto",
  fonts: [
    { src: "./fonts/Roboto-Regular.ttf", fontWeight: "normal" },
    { src: "./fonts/Roboto-Bold.ttf", fontWeight: "bold" },
    { src: "./fonts/Roboto-Italic.ttf", fontStyle: "italic" },
  ],
});
 
// Always disable hyphenation when using custom fonts
Font.registerHyphenationCallback((word) => [word]);

# Find the font URL
grep "^Roboto" skills/react-pdf/references/google-fonts.txt | grep "700" | grep "normal"
 
# Download
mkdir -p fonts
curl -sL "<url-from-grep>" -o fonts/Roboto-Bold.ttf
 
# Verify - must show "TrueType Font data"
file fonts/Roboto-Bold.ttf

npm install twemoji-emojis

import { Font } from "@react-pdf/renderer";
 
Font.registerEmojiSource({
  format: "png",
  url: "node_modules/twemoji-emojis/vendor/72x72/",
});

// Canvas drawing
<Canvas style={{ width: 200, height: 200 }}
  paint={(painter, w, h) => { painter.circle(w/2, h/2, 50).fill("#3498db"); }} />
 
// Annotation notes
<Note style={{ color: "yellow" }}>Annotation text</Note>
 
// Hyphenation
Font.registerHyphenationCallback((word) => [word]); // disable
 
// Debug mode - visualize boundaries
<View debug><Text debug>Debug text</Text></View>
 
// Document metadata
<Document title="My Doc" author="Author" subject="Report" language="en-US" pdfVersion="1.5" />