HTML Source Editor
Press Esc in preview to return
0 chars 0 lines
✦ FewSteps
💡 Hold Cmd ⌘ / Ctrl to zoom & pan the cursor area!
Scroll
MarkupLens — Interactive Presenter's Manual

Welcome to MarkupLens, a high-performance, client-side annotation and presentation suite built entirely inside your browser!

🚀 Quick Start

  • Step 1: Enter or paste your arbitrary HTML snippet on the left editor screen, or click Load Roadmap Demo to try a premade presentation.
  • Step 2: Click the emerald Launch Preview button to enter full-screen Presentation Mode.
  • Step 3: Annotate, zoom, or trigger effects! When finished, press Esc or click Exit to return to the editor.

💡 Presenter Power Keys (The Magic Modifiers)

These physical keys elevate your presentation flow. Keep a finger on them to seamlessly guide your audience:

Cmd ⌘ or Ctrl
Zoom & Pan
Viewport Spotlight Zoom
  • Dynamic Scaling: Hold down and move your pointer. The entire webpage instantly scales up, centering automatically around your mouse!
  • Details Focus: Effortlessly highlight microscopic text, charts, or code snippets with smooth, hardware-accelerated panning.
  • Navigation Lock: Release the key to instantly snap the viewport back to its normal 1:1 view.
Shift ⇧
Presenter Emojis
Audience Reactions & FX
  • Holding Down Shift: Spawns a stream of colorful, floating presenter emojis that rise and sway elegantly from your cursor or focused element.
  • Shift + Click Burst: Hold Shift and click anywhere to trigger a vibrant fireworks-style radial emoji confetti explosion!
  • Interactive Atmosphere: Bring your static HTML pages to life and keep your audience highly engaged with responsive micro-animations.

🎨 Dual Presentation Modes

Swap modes instantly using the floating bottom toolbar or settings drawer:

Mode Primary Purpose Features Available
Draw Mode Sketch, point out, or write notes directly over the HTML view. Neon Lightsaber Ink, Animated Rainbow Ink, standard highlights, customizable widths and opacities.
Animating Mode Interact with HTML buttons, links, hover-scaling components, and trigger animations. 7 Hover animations, 9 custom border indicators (e.g. Cyberpunk HUD, Poké-Chase), element spotlights.

🔥 Key Shortcuts & Presenter Gestures

  • 🔍 Viewport Zoom & Pan: Hold down Cmd ⌘ (Mac) or Ctrl (Windows/Linux) and move your mouse. The entire webpage will smoothly scale up and center on your laser pointer coordinates!
  • 📜 Right-Edge Scroll Strip: Drag your finger/mouse on the grey vertical scroll strip on the right side of the screen to slide up and down on long pages without losing canvas drawing focus.
  • 🎈 Double-Shift Reaction Bubble: Tap the Shift key twice in quick succession to spawn random reaction emojis that sway gracefully like falling leaves from the bottom center.
  • 🎉 Shift + Click Confetti Burst: Hold down Shift and click anywhere in the preview to pop fireworks-style radial emoji confetti instantly centered on your click!

⚙️ Settings Drawer Customization

Click the gear icon on the toolbar to customize:

  • Hover Animation & Indicator Style: Choose from gorgeous effects like Liquid Gradient, Aura, or Glassmorphic frames.
  • Neon Lightsaber Ink Toggle: Adds a sharp laser-core and colored ambient glow.
  • Smart Magnifying Spotlight: Centered around the laser pointer.
    💡 Smart Occlusion: To keep your vision clear while writing, the magnifying glass automatically hides while you draw!
  • Custom Watermark Branding: Type in any name to personalize the bottom-right brand seal.

Crafted with ✦ for premium presenters.