Complete AI Training

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

  1. Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
  2. Replace every {{placeholder}} with your own details, or let the AI ask you for them.
  3. Use the follow-ups below to go deeper.
Prompt

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

  1. Ask for any missing inputs before starting.
  2. Build the viewer using HTML5, CSS3, JavaScript and PDF.js with a clean interface and intuitive navigation controls.
  3. Implement {{must_have_features}} first, in priority order.
  4. Add zoom and fit-to-width/height controls plus text selection and copying.
  5. Make the layout responsive for {{target_devices}} and note anything specific to {{hosting_context}}.
  6. 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.