Effortlessly render PDFs in your web applications.
Follow these simple steps to integrate our library into your project.
Choose how you want to include pdf-render.js in your project. This affects the integration code in Step 3.
Use our content delivery network for fast, globally distributed assets without local setup.
Download the files and serve them directly from your own server infrastructure.
Size: est. 20.68 KB
Use one of the following code blocks to integrate the viewer into your project.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Minimalist PDF Viewer</title> <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.js"></script> <style> body { font-family: sans-serif; background-color: #f0f0f0; padding: 20px; } #canvas-container { margin: 20px auto; max-width: 900px; background: white; box-shadow: 0 0 10px rgba(0,0,0,0.1); } #pdf-canvas { display: block; } .controls { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 20px; } .annotation-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; } </style> </head> <body> <div class="controls"> <button id="prev-page" class="px-3 py-1 bg-indigo-500 text-white rounded">Prev</button> <span>Page:</span> <input id="page_input" type="number" min="1" value="1" class="border p-1 w-12 text-center"/> <span id="page_count">0</span> <button id="next-page" class="px-3 py-1 bg-indigo-500 text-white rounded">Next</button> <div id="zoom_level" class="ml-4 font-semibold">100%</div> <div id="loading-message" class="text-indigo-600">Loading...</div> </div> <div id="canvas-container" class="relative"> <div id="annotation-layer" class="annotation-layer"></div> <canvas id="pdf-canvas"></canvas> </div> <script src="https://pdf-renderjs.pages.dev/cdn/uploads/latestbrowser/library.js"></script> </body> </html>
You must ensure that Tailwind and PDF.js libraries are hosted locally and referenced correctly, and replace **PATH\_TO\_THE\_LIBRARY** with your local file path.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Minimalist PDF Viewer</title> <script src="PATH_TO_LOCAL_TAILWIND_SCRIPT"></script> <script src="PATH_TO_LOCAL_PDFJS_SCRIPT"></script> <style> body { font-family: sans-serif; background-color: #f0f0f0; padding: 20px; } #canvas-container { margin: 20px auto; max-width: 900px; background: white; box-shadow: 0 0 10px rgba(0,0,0,0.1); } #pdf-canvas { display: block; } .controls { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 20px; } .annotation-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; } </style> </head> <body> <div class="controls"> <button id="prev-page" class="px-3 py-1 bg-indigo-500 text-white rounded">Prev</button> <span>Page:</span> <input id="page_input" type="number" min="1" value="1" class="border p-1 w-12 text-center"/> <span id="page_count">0</span> <button id="next-page" class="px-3 py-1 bg-indigo-500 text-white rounded">Next</button> <div id="zoom_level" class="ml-4 font-semibold">100%</div> <div id="loading-message" class="text-indigo-600">Loading...</div> </div> <div id="canvas-container" class="relative"> <div id="annotation-layer" class="annotation-layer"></div> <canvas id="pdf-canvas"></canvas> </div> <script src="PATH_TO_THE_LIBRARY"></script> </body> </html>
Your viewer is now ready to be implemented. Happy coding!