DocuCanvas

DocuCanvas is a professional Document Studio & Visual Annotation Canvas application built with React, TypeScript, Tailwind CSS, and Lucide Icons. It enables document markup, interactive form design, visual split-screen diff comparisons, and multi-page vector PDF generation.

---

Key Capabilities

1. Vector Annotation & Freehand Markup

• Comprehensive Annotation Suite: Highlighting, freehand brush/pen drawing, geometric shapes (rectangles, circles/ellipses), arrows, connector lines, dimension measurements (with unit conversion in px, in, cm, mm), editable text blocks, callout badges, stamps, and digital signatures.
• Interactive In-Canvas Transformation:
  • Direct click-and-drag for drawn strokes, lines, text blocks, stamps, and shapes.
  • 8-point boundary resize handles with live aspect-ratio scaling.
  • Start and end endpoint grab handles for lines, arrows, and measurement vectors.
  • Floating on-object quick action toolbar featuring one-click Delete and Duplicate.
• Object Inspection & Styling: Custom stroke colors, fill opacity, stroke width, dashed borders, font families, font sizes, and rotation.

2. Form Builder & Interactive Fill-and-Sign Mode

• Design Mode: Place and arrange form fields anywhere across document pages (Text Inputs, Date Pickers, Checkboxes, Signature Capture Zones).
• Fill Mode: Fill out form fields interactively directly within the canvas with real-time validation and input state tracking.
• Digital Signature Studio: Draw signatures directly on the touch/mouse signature pad, type signatures in custom calligraphy styles, or insert saved signatures.

3. Visual Diff Engine & Version Checkpoints

• Visual Version Comparison: Compare checkpoints side-by-side (split-screen) or with a real-time overlay slider.
• Automatic Difference Detection: Highlighting of additions, removals, and geometric modifications between document versions.
• Audit Log: Chronological history of document edits and version timestamps.

4. Multi-Page Canvas Stage

• Technical Dot-Grid Viewport: Infinite-feel pan & zoom canvas with metric dimensions, page rulers, and zoom presets (50%, 100%, 150%, Fit Page, Fit Width).
• Page Management: Add new pages, duplicate pages, delete pages, reorder pages, and switch between sample documents (SaaS Contracts, Financial Balance Sheets, Architectural Blueprints).
• Threaded Comment Pins: Place discussion pins anywhere on pages with threaded replies and resolution tracking.
• In-Document Search: Real-time text search with occurrence counts and direct page navigation.

5. Multi-Format Document Export Engine

• Client-Side PDF Compilation: High-fidelity vector rendering via jspdf with embedded text, annotations, and form data.
• Image Export: High-resolution PNG and JPEG page rendering.
• Structured Data Export: JSON schemas and Markdown summaries for integration into backend pipelines.

---

Keyboard Shortcuts

Shortcut	Action
V / Escape	Switch to Select Tool
P	Freehand Draw Pen
H	Highlighter
T	Text Annotation Box
R	Rectangle Shape
C	Circle / Ellipse Shape
L	Connector Line
A	Arrow Tool
M	Dimension Measurement Tool
Delete / Backspace	Delete Selected Object or Form Field
Ctrl / Cmd + Z	Undo Action
Ctrl / Cmd + Shift + Z	Redo Action
Ctrl / Cmd + Mouse Wheel	Smooth Zoom In / Out
Space + Drag	Pan Stage Viewport

---

Tech Stack

• Framework: React 19, TypeScript
• Styling: Tailwind CSS v4
• Icons: Lucide React
• PDF Generation: jsPDF
• Animations & Effects: Motion, Canvas Confetti
• Build Tool: Vite

---

Getting Started

Development

npm install
npm run dev

The application will start on http://localhost:3000.

Production Build

npm run build

Type Checking & Linting

npm run lint

DocuCanvas