https://github.com/erpix3lt/react-paged

a minimal starter for using paged.js with react, ts and tailwindcss
https://github.com/erpix3lt/react-paged

pagedjs react reactjs tailwindcss thesis-template ts writing

Last synced: 11 months ago
JSON representation

a minimal starter for using paged.js with react, ts and tailwindcss

• Host: GitHub
• URL: https://github.com/erpix3lt/react-paged
• Owner: Erpix3lt
• License: mit
• Created: 2025-07-08T11:22:40.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2025-07-08T12:13:46.000Z (11 months ago)
• Last Synced: 2025-07-08T13:28:33.306Z (11 months ago)
• Topics: pagedjs, react, reactjs, tailwindcss, thesis-template, ts, writing
• Language: JavaScript
• Homepage: https://proposal-ii.vercel.app/
• Size: 4.03 MB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# React Paged

![Preview](preview.png)

## Technologies Used

**React, Vite, TypeScript, Paged.js, Tailwind CSS**

This is a barebones starter template for using **Paged.js** with **React**. It includes **Tailwind CSS** and **TypeScript**, making it easy to build a custom component architecture for complex, print-ready documents.

For a fully styled version with a collection of ready-made components, see below:

### Stylized Version

[View on GitHub](https://github.com/mschmalenbach/react-paged)

### Live Demo

[Live Demo](https://proposal-i.vercel.app/)

---

## Architecture Overview

- **`App.tsx`** – Entry point that imports both `Book.tsx` and `Layouter.tsx`

- **`Book.tsx`** – Contains your document structure: components, chapters, and text

- **`Layouter.tsx`** – Renders the `Book.tsx` and applies `print.css` for paged styling

- **`print.css`** – Contains styles specific to Paged.js (warnings may appear, but can be ignored)

- **`index.css`** – Use this file for theme variables, fonts, and general styling

---

## Printing

To print your document, use the **browser’s print dialog** (`Cmd + P` / `Ctrl + P`).  

Paged.js supports additional features like **bleed margins** and **cutting guides**.

![Print preview](preview-print.png)