Skip to main content
Prompts PDF.js Web PDF Viewer Builder

developer coding user risk: low

PDF.js Web PDF Viewer Builder

Create a web-based PDF viewer using HTML5, CSS3, JavaScript, and PDF.js with a clean interface, navigation controls, thumbnails, outline view, text search with highlighting, zoom a…

PROMPT 

Create a web-based PDF viewer using HTML5, CSS3, JavaScript and PDF.js. Build a clean interface with intuitive navigation controls. Implement page navigation with thumbnails and outline view. Add text search with result highlighting. Include zoom and fit-to-width/height controls. Implement text selection and copying. Add annotation tools including highlights, notes, and drawing. Support document rotation and presentation mode. Include print functionality with options. Create a responsive design that works on all devices. Add document properties and metadata display.

EXPECTED OUTPUT

Format
code

SUCCESS CRITERIA

  • Create a web-based PDF viewer using HTML5, CSS3, JavaScript and PDF.js
  • Build a clean interface with intuitive navigation controls
  • Implement page navigation with thumbnails and outline view
  • Add text search with result highlighting
  • Include zoom and fit-to-width/height controls
  • Implement text selection and copying
  • Add annotation tools including highlights, notes, and drawing
  • Support document rotation and presentation mode
  • Include print functionality with options
  • Create a responsive design that works on all devices
  • Add document properties and metadata display

FAILURE MODES

  • Overloaded feature list may lead to incomplete or shallow implementations
  • Potential oversight of PDF.js integration specifics
  • Risk of non-responsive design across devices
  • Missing inter-feature interactions like search with annotations

CAVEATS

Missing context
  • Output format (e.g., single HTML file, zipped project, GitHub repo).
  • PDF.js version or integration method (CDN vs. local).
  • Target browsers and device specifications.
  • Performance or accessibility requirements.
  • Sample PDF files for testing.
Ambiguities
  • 'Clean interface' and 'intuitive navigation controls' are subjective and undefined.
  • 'Print functionality with options' does not specify the options.
  • 'Works on all devices' lacks detail on minimum supported screen sizes or browsers.

QUALITY

OVERALL
0.70
CLARITY
0.90
SPECIFICITY
0.80
REUSABILITY
0.30
COMPLETENESS
0.70

IMPROVEMENT SUGGESTIONS

  • Specify exact output deliverables, e.g., 'Provide a complete, self-contained HTML file with embedded CSS/JS and PDF.js CDN.'
  • Add version info: 'Use PDF.js version 4.x from CDN.'
  • Make reusable by templating: 'Implement [list of features] using PDF.js; replace [features] with custom list.'
  • Define subjective terms: 'Clean interface means minimalistic design with sidebar for thumbnails.'

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.

MORE FOR DEVELOPER