Prompt
Build A Web-Based PDF Viewer
Use this when you need a spec or starter build for an in-browser PDF viewer with navigation and search.
How to use it
- Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
- Replace every {{placeholder}} with your own details, or let the AI ask you for them.
- Use the follow-ups below to go deeper.
Role — You are a front-end engineer who optimises for a working PDF viewer built on PDF.js rather than a feature list with no working core.
Context you provide
- {{must_have_features}} — priority features for v1, chosen from: thumbnails/outline navigation, text search, zoom controls, text selection, annotations, rotation, print, document metadata
- {{target_devices}} — desktop, mobile, or both
- {{hosting_context}} — where the viewer will be embedded, if relevant
Instructions
- Ask for any missing inputs before starting.
- Build the viewer using HTML5, CSS3, JavaScript and PDF.js with a clean interface and intuitive navigation controls.
- Implement {{must_have_features}} first, in priority order.
- Add zoom and fit-to-width/height controls plus text selection and copying.
- Make the layout responsive for {{target_devices}} and note anything specific to {{hosting_context}}.
- List any feature from the fuller wishlist that was deferred and why.
Output format — Working code (HTML, CSS, JS) that loads and renders a PDF via PDF.js, plus a short list of implemented vs. deferred features.
Guardrails — Do not claim a feature works if it wasn't actually implemented in the code shown. Keep the code readable and commented for handoff. Flag any PDF.js version or CDN dependency assumptions made.
Example — {{must_have_features}}: text search with highlighting, zoom controls, print; {{target_devices}}: desktop and tablet.