React PDF Preview

A powerful development tool for previewing and developing PDF templates with @react-pdf/renderer in real-time. Perfect for Next.js projects that need to generate beautiful, dynamic PDFs.

Features

• 📝 Side-by-side code and PDF preview
• 🎨 Pre-built professional templates
• 🔄 Hot reload support
• 🛠 Easy integration with Next.js projects

Installation

npm install react-pdf-preview --save-dev

Quick Start

1. Create New Templates

Initialize your project with example templates:

pdf-preview create

This will:

• Create a templates directory in your project
• Add example templates (invoice, certificate, report, resume)
• Install required dependencies

You can specify a custom directory:

pdf-preview create --dir ./my-templates

2. Start Development Server

Run the development server to preview your templates:

pdf-preview dev

Options:

• --dir: Specify templates directory (default: ./templates)
• --port: Specify port number (default: 3000)

pdf-preview dev --dir ./my-templates --port 3001

Template Development

Basic Template Structure

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

const styles = StyleSheet.create({
  page: {
    flexDirection: "column",
    backgroundColor: "#ffffff",
    padding: 40,
  },
  // ... more styles
});

const MyTemplate: React.FC = () => (
  <Document>
    <Page size="A4" style={styles.page}>
      {/* Your content here */}
    </Page>
  </Document>
);

export default MyTemplate;

Using Templates in Your App

import { PDFViewer } from "@react-pdf/renderer";
import MyTemplate from "../templates/my-template";

function App() {
  return (
    <PDFViewer>
      <MyTemplate />
    </PDFViewer>
  );
}

Included Templates

The create command provides four professional templates to help you get started:

1. Invoice Template

   • Professional invoice layout
   • Dynamic table structure
   • Automatic calculations
   • Clean, business-ready design

2. Certificate Template

   • Achievement certificate layout
   • Centered design
   • Signature section
   • Professional typography

3. Report Template

   • Business report layout
   • Multiple sections
   • Executive summary
   • Financial metrics
   • Key achievements

4. Resume Template

   • Modern CV layout
   • Skills section with tags
   • Professional experience timeline
   • Education section
   • Contact information

Project Structure

react-pdf-preview/
├── src/
│   ├── app/                 # Next.js app directory
│   ├── components/         # React components
│   │   ├── code-view.tsx   # Code editor component
│   │   ├── pdf-viewer.tsx  # PDF preview component
│   │   └── view-switcher.tsx # View mode switcher
│   └── cli/               # CLI tool implementation
│       ├── commands/      # CLI commands
│       └── utils/         # Utility functions
├── templates/            # PDF templates
├── public/              # Static assets
└── package.json

Development

To contribute or modify the tool:

1. Clone the repository
2. Install dependencies:

   npm install

3. Build the CLI:

   npm run build:cli

4. Link for local development:

   npm link

Configuration

Tailwind CSS

The preview interface uses Tailwind CSS. You can customize the styling by modifying:

• tailwind.config.ts
• postcss.config.js
• src/app/globals.css

Next.js

The tool is built on Next.js. Configuration can be found in:

• next.config.js
• tsconfig.json

Requirements

• Node.js 16.x or higher
• Next.js project
• TypeScript (recommended)

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.