Web Screen Draft

Edit, annotate, draw, and screenshot any webpage with side-by-side comparisons.

Transform any webpage into an editable canvas with Web Screen Draft. Web Screen Draft is a powerful yet privacy-first tool for legal professionals, product teams, compliance officers, and anyone who needs to modify web content visually and capture the results. Whether you're documenting evidence, creating mockups, or preparing compliance reports, Web Screen Draft makes it effortless. VISUAL PAGE EDITING Select any element on a webpage and drag it to a new position. Switch to text mode to select specific words or phrases and turn them into movable overlays. Double-click any text to edit its content inline. All changes stay in place until you reload the page or click Reset. DRAWING & ANNOTATION TOOLS A built-in floating toolbar gives you access to a full set of annotation tools: • Selection tool — select, move, and manipulate page elements • Rectangle & Circle — draw shapes to highlight or redact areas • Arrow & Line — point out specific elements or draw connections • Freehand draw — sketch directly on the page • Text box — add custom text annotations anywhere • Eraser — remove any annotation or pasted element • Type inside shapes — double-click a rectangle or circle to add text inside it The toolbar is draggable, so you can reposition it anywhere on the page to stay out of your way. RESIZE & ROTATE Select any element, pasted image, or drawn shape to reveal 8 resize handles — drag corners for proportional scaling, edges for free scaling. A rotate handle above the selection lets you rotate any element to the exact angle you need. CLIPBOARD INTEGRATION Paste text or images directly from your clipboard (Ctrl/Cmd+V) onto any webpage. Pasted content becomes a movable, resizable overlay you can position and edit freely. PROFESSIONAL SCREENSHOTS • Viewport capture — screenshot exactly what's visible in your browser window • Full page capture — capture the entire scrollable page using html2canvas • Side-by-side comparison — generate before/after screenshots that place the original page next to your edited version, for both viewport and full page • Red highlight toggle — optionally show red outlines around modified elements in your screenshots • Clean output — all editing UI (handles, toolbar, selection borders) is automatically hidden during capture UNDO & RESET Press Ctrl/Cmd+Z to undo any action — moves, resizes, rotations, text edits, and annotations are all tracked. Click "Reset All Changes" to restore the page to its original state instantly. KEYBOARD SHORTCUT Toggle edit mode on and off with Ctrl+Shift+E (Windows/Linux) or Cmd+Shift+E (Mac) without opening the popup. PERFECT FOR • Legal teams — document web page evidence, capture page states for litigation or regulatory proceedings • Compliance officers — create visual compliance reports and annotated documentation • Product teams — mock up changes, annotate feature requests, and capture UI variations • UX designers — test layout changes, sketch ideas directly on live pages, and compare before/after states • Content managers — visualize proposed content changes before implementation PRIVACY FIRST • All processing happens locally in your browser — no data ever leaves your device • No analytics, telemetry, or tracking of any kind • No external server connections or API calls • No user accounts required — works completely offline • No data stored between sessions HOW TO USE 1. Click the Web Screen Draft icon in your toolbar 2. Enable edit mode on any webpage 3. Use the floating toolbar to select tools — draw, annotate, move, and edit 4. Paste text or images from your clipboard 5. Capture screenshots or side-by-side comparisons 6. Reset when done — it's that simple Web Screen Draft respects your privacy and works entirely within your browser. Perfect for sensitive legal work, confidential compliance documentation, and professional use cases where data security matters.