PDF Atelier (Web Component)

A lightweight, WYSIWYG PDF annotator you can drop into any app. It ships as a Web Component (<pdf-atelier>) with first‑class wrappers for React, Angular, and Vue.

Key Features

PDF Rendering & Navigation

• Multi‑page PDF rendering
• Thumbnails sidebar for quick page navigation
• Vertical/horizontal toolbar layouts
• Mobile-responsive design
• Dark Mode support
• RTL (Right-to-Left) layout support

Annotation Tools

• Draw: Freehand pen with adjustable color and brush size
• Text: Editable text boxes with custom font sizes (WYSIWYG overlay)
• Sticky Notes: Pop‑up editor with content preview
• Highlights: Text-based selection (multi‑line aware, rounded segments)
• Shapes: Rectangle, circle, triangle with adjustable color and size
• Images: Insert, move, scale, rotate images from file
• Select Mode: Move and resize existing annotations
• Delete: Floating delete button + keyboard shortcuts

Styling & Customization

• Fully styled with utilities for easy theming
• Color picker with quick swatches (Black, Red, Yellow) and custom colors
• Font size control (default 18px, adjustable per text box)
• Brush size control (default 2px, adjustable for pen tool)

Layout & View Controls

• Zoom: Presets (50%-200%) and Fit‑Width mode
• Rotation: Rotate current page or all pages (90° steps)
• Undo/Redo: Full history across all pages (Ctrl/Cmd+Z/Y) - up to 100 snapshots
• Toolbar Toggle: Switch between horizontal (top) and vertical (left) layouts

Licensing & Watermarking

• License (required): Text or default image overlay on all pages and exports
• Watermark (optional): Additional customizable text watermark feature

Export

• Export to a new PDF that matches what you see (WYSIWYG)
• Preserves searchable/selectable text layer
• Vectorized text for text boxes and sticky notes
• Rasterized annotations for drawings, highlights, and images

Works with

• React: 16+ (tested and supported)
• Angular: 17+ (standalone components)
• Vue: 3+ (tested and supported)