A lightweight, standalone JavaScript PDF viewer library that wraps Mozilla's pdf.js with a modular course/chapter interface and responsive UI. Perfect for viewing educational materials, documentation, and multi-chapter documents.
Access the Live Demo for a real-time preview.
- Modular Interface - Organize PDFs into courses, modules, and chapters.
- Responsive Design - Works seamlessly on desktop, tablet, and mobile.
- Lightweight - Only ~15KB minified (plus ~300KB pdf.js).
- Customizable - Full CSS styling and theme support.
- Accessible - ARIA labels, keyboard navigation, semantic HTML.
- Performance Optimized - Debounced rendering, high-DPI support, efficient memory management.
- Auto-Scaling - PDFs automatically fit container width.
- Zoom Controls - Built-in zoom in/out buttons and manual zoom input (100-200%).
- Text Selection - Highlight and copy text from PDFs with transparent text layer (enabled by default).
- Smart Navigation - Automatic zoom and scroll reset when navigating between pages and chapters.
- Keyboard Navigation - Arrow keys to navigate pages.
- Well-Documented - Comprehensive guides and examples.
<div id="viewer" style="height: 100dvh; width: 100%;"></div>
<script src="https://cdn.jsdelivr.net/gh/BrunoRNS/SimplePDFviewer@latest/min/core.min.js"></script>
<script type="text/javascript">
const course = {
id: "mycourseid",
title: "My Course",
modules: [{
id: "module1id",
title: "Module 1",
chapters: [{
id: "chapter1id",
title: "Chapter 1",
pdf: "https://example.com/chapter1.pdf"
}]
}]
};
PDFViewer.init(document.getElementById('viewer'), course);
</script>Important: The library exports as
PDFViewer, notSimplePDFviewer. UsePDFViewer.init()to initialize the viewer.
You now have a fully functional PDF viewer with:
- Chapter navigation sidebar.
- Previous/Next page buttons.
- Zoom in/out controls with manual zoom input.
- Text selection (highlight and copy text from PDFs).
- Keyboard controls (arrow keys).
- Automatic zoom and scroll reset on navigation.
- Responsive mobile design.
- Error handling.
USAGE.md: Complete API reference, customization, examples. FAQ.md: Common questions and answers. THIRD_PARTY_NOTICES.md: License information for third-party libraries.
CONTRIBUTING.md: How to contribute, code guidelines, pull request process. BUILD.md: Build system, Makefile, Docker setup.
<script src="https://cdn.jsdelivr.net/gh/BrunoRNS/SimplePDFviewer@latest/min/core.min.js"></script>Download core.min.js and host it:
<script src="./core.min.js"></script>Use unminified source for debugging:
<script src="./src/SimplePDFviewer.js"></script>SimplePDFviewer organizes PDFs hierarchically:
{
id: "course-001",
title: "Course Title",
modules: [{
id: "mod-001",
title: "Module 1",
chapters: [{
id: "chap-001",
title: "Chapter 1",
pdf: "url/to/pdf.pdf"
}, {
id: "chap-002",
title: "Chapter 2",
pdf: "url/to/pdf2.pdf"
}]
}, {
id: "mod-002",
title: "Module 2",
chapters: [/* ... */]
}]
}This structure makes it easy to organize related PDFs and navigate between them.
// Initialize viewer
const viewer = PDFViewer.init(container, course, {
onError: (error) => console.error('PDF Error:', error)
});
// Navigate pages
viewer.nextPage();
viewer.prevPage();
// Zoom control
viewer.setZoom(150); // Set to 150%
console.log(viewer.zoom); // Current zoom level
// Load specific chapter
viewer.loadChapter(0, 1); // Module 0, Chapter 1
// Access current state
console.log(viewer.currentPage); // 1
console.log(viewer.currentModule); // 0
console.log(viewer.currentChapter); // 0
// Note: Zoom and scroll automatically reset to 100% and top-left (0,0)
// when navigating between pages or chapters
// Clean up when done
viewer.destroy();.pdf-viewer-sidebar {
background: #1a1a1a;
}
.pdf-viewer-btn {
background: #0066cc;
}
.pdf-viewer-btn:hover {
background: #0052a3;
}// Dynamic theme switching with automatic color generation
const viewer = PDFViewer.init(container, course, {
colorTheme: '#FF5722' // Material Design Deep Orange
});
// Change theme later
viewer.setTheme('#E91E63'); // Pink
viewer.setTheme('#4CAF50'); // Green
viewer.setTheme('#2196F3'); // Blue// Set zoom level (100-200%)
viewer.setZoom(150);
// Zoom resets automatically when navigating pages
viewer.nextPage(); // zoom resets to 100%// Text selection is enabled by default
const viewer = PDFViewer.init(container, course);
// Users can now highlight and copy text from PDFs
// Disable text selection if needed
const viewer2 = PDFViewer.init(container, course, {
enableTextSelection: false
});
// Toggle text selection at runtime
viewer.setTextSelectionEnabled(false); // Disable
viewer.setTextSelectionEnabled(true); // Re-enable
// Check current state
if (viewer.enableTextSelection) {
console.log('Text selection is enabled');
}const viewer = PDFViewer.init(container, course, {
onError: (error) => {
if (error.type === 'load') {
alert('Failed to load PDF');
}
}
});See USAGE.md - Customization for more options.
- Node.js with npm/yarn
- Terser (JavaScript minifier)
- Docker (optional, for testing with containers)
# Install terser globally
npm install -g terser
# Build
make all
# Output: min/core.min.jsdocker-compose up
# CDN: http://localhost:8081/core.min.js
# App: http://localhost:8080See BUILD.md for complete build instructions and Docker setup.
- File Size: ~15KB minified (gzips to ~4KB)
- Rendering: Optimized with debouncing and high-DPI support
- Memory: Efficient canvas usage with proper cleanup
- Load Time: Lazy loads pdf.js only when needed
- Requires at least 750Kb/s of download speed: If you're having performance issues, check your connection speed.
- SimplePDFviewer is a pure frontend library
- Relies on Mozilla's well-maintained pdf.js
- No data collection or external communications
- Safe to use with untrusted PDFs (pdf.js is Mozilla-vetted)
We welcome contributions! Before getting started:
- Read CONTRIBUTING.md for guidelines
- Check existing issues
- Follow our Code of Conduct
- Fork the repository
- Create a feature branch
- Make focused changes
- Test thoroughly
- Submit a pull request
See CONTRIBUTING.md for detailed instructions.
SimplePDFviewer is licensed under the MIT License. See LICENSE.txt for details.
Third-party licenses:
- pdf.js: Apache 2.0 (Mozilla)
- See THIRD_PARTY_NOTICES.md for complete attribution
- Mozilla pdf.js - The excellent PDF rendering engine
- ResizeObserver API - For responsive sizing
- All contributors and the open-source community
SimplePDFviewer is not affiliated with or endorsed by Mozilla.
- Getting Started: USAGE.md
- Common Questions: FAQ.md
- Want to Contribute?: CONTRIBUTING.md
- Building from Source: BUILD.md
- Licenses: THIRD_PARTY_NOTICES.md
- Bug Reports: Open an issue
- Feature Requests: Use GitHub Issues with
[feature request]label - Usage Questions: Check FAQ.md or USAGE.md
- Contributing: See CONTRIBUTING.md
const course = {
title: "JavaScript 101",
modules: [{
title: "Fundamentals",
chapters: [
{ title: "Variables", pdf: "/pdfs/variables.pdf" },
{ title: "Functions", pdf: "/pdfs/functions.pdf" }
]
}]
};const course = {
title: "API Documentation",
modules: [{
title: "Getting Started",
chapters: [
{ title: "Installation", pdf: "/docs/install.pdf" },
{ title: "Quick Start", pdf: "/docs/quickstart.pdf" }
]
}]
};const course = {
title: "Employee Training",
modules: [{
title: "Week 1",
chapters: [
{ title: "Monday", pdf: "/training/monday.pdf" },
{ title: "Wednesday", pdf: "/training/wednesday.pdf" },
{ title: "Friday", pdf: "/training/friday.pdf" }
]
}]
};If SimplePDFviewer is helpful, please:
- Star this repository
- Report bugs or suggest features
- Contribute code or documentation
- Spread the word!
Made with love by the SimplePDFviewer community