Can I programmatically control the viewer?

Yes, the skill provides a custom usePdfViewer hook and an imperative ref API to programmatically navigate pages and scroll to specific highlights by ID.

How are highlights positioned on the PDF?

Highlights use percentage-based coordinates (top, left, width, height), ensuring they remain accurate and correctly aligned regardless of the zoom level or screen size.

What frameworks does this PDF viewer support?

This skill is specifically designed for Next.js applications using the App Router and requires shadcn/ui components for the interface.

Which libraries power the PDF rendering?

It utilizes react-pdf and pdfjs-dist to ensure high-performance, standards-compliant PDF rendering and text layer support.

Does it support Server-Side Rendering (SSR)?

Yes, the skill includes a dedicated wrapper component that utilizes dynamic imports with SSR disabled to safely handle PDF rendering in the browser.

Interactive PDF Viewer

Name: Interactive PDF Viewer
Author: mattwoodco

bymattwoodco

•

Content Management

Renders PDFs in Next.js applications with integrated page navigation, zoom controls, and programmatic highlight overlays.

The PDF Viewer skill provides a production-ready component suite for rendering and interacting with PDF documents within Next.js environments. It includes a robust state management hook and a React-based UI that supports seamless page navigation, adjustable zoom levels, and a sophisticated highlight system. Specifically optimized for citation-heavy workflows, it allows developers to programmatically scroll to and display specific highlights using percentage-based coordinates, making it an ideal choice for research tools, document management systems, and AI-powered citation interfaces.

Key Features

01SSR-safe implementation using dynamic imports for Next.js App Router

02Imperative API for parent components to trigger auto-scrolling to highlight IDs

033 GitHub stars

04Seamless page-by-page navigation with state-aware controls

05Programmatic highlight overlays using percentage-based positioning

06Adjustable zoom functionality (50% to 200%) with one-click reset

Use Cases

01Linking AI-generated citations directly to source document highlights in research tools

02Creating interactive educational platforms that require precise PDF annotation and navigation

03Building document previewers for legal, medical, or technical management systems

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mattwoodco/skills pdf-viewer

For use in Claude.ai and ChatGPT

Download Skill