@monime/pdfio

A lightweight, zero-config PDF viewer component for React. Built on top of pdfjs-dist, styled with Tailwind CSS v4, and bundled with Vite.

Features

• Render PDFs from a URL, ArrayBuffer, or URL object
• Page navigation with prev / next controls and a click-to-jump page input
• Zoom in, zoom out, preset zoom levels, fit-to-width, and fit-to-height
• Fullscreen mode
• Watermark overlay — tiled diagonal text on every page, fully customisable
• HiDPI / Retina-aware canvas rendering
• ESM + CJS dual build, ships TypeScript declarations

Install

# npm
npm install @monime/pdfio

# pnpm
pnpm add @monime/pdfio

# yarn
yarn add @monime/pdfio

Peer dependencies: react >=18 and react-dom >=18 (or v19).
pdfjs-dist is loaded dynamically at runtime — no extra install needed.

Usage

import { PDFViewer } from '@monime/pdfio';
import '@monime/pdfio/style.css';

export function Example() {
  return (
    <div style={{ height: '100vh' }}>
      <PDFViewer src="https://example.com/document.pdf" />
    </div>
  );
}

The component fills the height of its container, so give the wrapper a defined height.

Props

| Prop | Type | Default | Description | | ----------- | --------------------------- | ----------- | ------------------------------------------------ | | src | string \| ArrayBuffer \| URL | — | PDF source. Omit (or pass undefined) to show the empty state. | | watermark | string \| WatermarkConfig | — | Watermark text stamped diagonally across every page. |

Watermark

Pass a plain string for a quick stamp, or a WatermarkConfig object for full control.

{/* Quick string */}
<PDFViewer src={url} watermark="CONFIDENTIAL" />

{/* Full config */}
<PDFViewer
  src={url}
  watermark={{
    text: "DRAFT",
    color: "rgba(220, 38, 38, 0.15)",
    fontSize: 32,
    angle: -40,
    gap: 60,
    fontFamily: "Georgia, serif",
    fontWeight: "700",
  }}
/>

WatermarkConfig

| Property | Type | Default | Description | | ------------ | -------- | ------------------------ | ---------------------------------------------------- | | text | string | — | The text to repeat across each page. | | color | string | "rgba(0,0,0,0.12)" | Any valid CSS color string. | | fontSize | number | 28 | Base font size in px (scales automatically with zoom). | | angle | number | -35 | Rotation angle in degrees. | | gap | number | 80 | Horizontal spacing between repeated labels in px. | | fontFamily | string | "sans-serif" | CSS font-family value. | | fontWeight | string | "600" | CSS font-weight value. |

Local development

pnpm install
pnpm dev

Build the library

pnpm build

Output in dist/:

| File | Format | | ----------------- | ------ | | index.js | ESM | | index.cjs | CJS | | index.d.ts | Types | | style.css | CSS |

Build the demo app

pnpm build:demo

Writes a standalone demo to demo-dist/.

Publish

Bump the version in package.json, then:

pnpm publish --access public