Visual PDF Editor
Web-based editor for reviewing, editing, and correcting filled forms directly in your browser
Overview
The Visual PDF Editor is a browser-based Angular SPA (served from wwwroot/templates/fill-forms/) that renders the PDF using PDF.js 5.0.375 and overlays editable input elements on top of each form field at its exact {page, x0, y0, x1, y1} coordinates extracted from the AcroForm structure. After AI autofill completes, you see the filled form rendered at full fidelity — every field at its correct position on the page — with each filled value editable in place without regenerating the PDF.
The rendering model matters: instead of a live AcroForm where fields are part of the PDF DOM, the editor renders the background PDF as a static canvas layer and projects field overlays from the stored coordinate data. This means corrections happen in the application layer and write back to the field store, not the PDF itself. The final PDF is only assembled — via build_overlay_pdf_bytes() (ReportLab + pdfrw) — when you finalize and download, incorporating all changes at once. This approach supports fields that the original PDF's AcroForm would not expose for editing, including fields added by the flat-to-fillable conversion pipeline.
The editor handles all field types detected during extraction: TEXT_FIELD_TYPES (Text, ComboBox, Time, Date, Number) and CHECKBOX_FIELD_TYPES (CheckBox, RadioButton). Color-coded borders show which fields AI filled, which you edited, and which required fields are still empty. Revision history (Enterprise) logs every change with user, timestamp, and before/after values for compliance audit trails.
Key Capabilities
- Direct Field Editing: Click any field to modify text, toggle checkboxes, select dropdowns, or update values
- WYSIWYG Interface: Fields rendered as overlays at their exact
{x0, y0, x1, y1}coordinates on the PDF canvas (PDF.js 5.0.375) - All Field Types Supported: Text, ComboBox, Time, Date, Number, CheckBox, RadioButton
- Original Layout Preserved: Edit within the constraints of the original PDF design (font, size, alignment)
- Change Tracking: Visual indicators distinguish AI-filled (green), manually edited (yellow), and empty required (red) fields
- Multi-Page Navigation: Page thumbnails sidebar, jump-to-page, and arrow navigation across all pages
- Zoom and Pan: Zoom slider (50%–200%) or Ctrl+Mouse Wheel for precision editing
- Undo/Redo: Full undo history within the session
- Field Validation: Real-time validation for required fields and format constraints
- Keyboard Navigation: Tab through fields for rapid editing
- Mobile Responsive: Touch-optimized for tablets and smartphones
- Revision History: Per-user change log with timestamps (Enterprise)
How It Works
Post-Fill Editing Workflow
- AI Fills Form: Instafill.ai processes your data and populates all detected form fields via the autofill pipeline
- Editor Opens: Angular SPA loads the session's filled form; PDF.js renders the background PDF; field overlays are positioned using the stored
{page, x0, y0, x1, y1}coordinate data - Identify Changes: Scan through the document — green borders on AI-filled fields, red borders on any empty required fields
- Edit Fields: Click any field to edit inline; changes write back to the field store in real time
- Validate: System validates format constraints and required-field completion
- Finalize: Confirm edits →
build_overlay_pdf_bytes()assembles the final PDF with all values → proceed to signature capture or download
Editing Interface
Field Selection:
- Click to Edit: Click any field overlay to enter edit mode
- Tab Navigation: Tab to advance to next field, Shift+Tab to go back
- Field Highlighting: Editable fields highlighted on hover
Editing Controls:
- Text Fields: Click and type; supports cut/copy/paste; character limits from
form_max_lengthenforced - Checkboxes: Click to toggle checked/unchecked
- Radio Buttons: Click to select option (auto-deselects others in the same radio group)
- Dropdowns (ComboBox): Click to open dropdown showing
form_choicesfrom field extraction - Date Fields: Click to open date picker or type date directly
Navigation:
- Page Thumbnails: Left sidebar shows all pages for quick navigation
- Next/Previous: Arrow buttons or Page Up/Down keys
- Jump to Page: Enter page number directly
- Zoom Controls: Slider (50%–200%) or Ctrl+Mouse Wheel
Change Tracking
Visual Indicators:
- AI-Filled (default): Green border on fields filled by the autofill pipeline
- Manually Edited: Yellow border on fields you have modified
- Empty Required: Red border on required fields still empty
Revision History (Enterprise):
- Who: Which user made each change
- When: Timestamp for every edit
- What: Before/after values per field
- Why: Optional notes explaining the change
Use Cases
The visual editor is used as a quality-control step after AI autofill, particularly in compliance-driven environments where errors carry real consequences. Legal professionals review and correct client intake forms before sending to courts, healthcare administrators verify patient registration data before submitting to insurance providers, and claims adjusters make last-minute corrections to insurance forms without restarting the entire fill session.
Real-World Example: Visual editing is particularly valuable for complex documents like the most intricate form we've ever processed, where field-by-field review catches edge cases that automated filling flags for human judgment.
Benefits
- Time Savings: Edit individual fields in seconds vs regenerating the entire form
- Error Prevention: Catch and correct AI mistakes before finalizing the document
- Quality Assurance: Human review step for critical documents before final PDF assembly
- Flexibility: Make last-minute changes when new information arrives
- Compliance: Revision history and audit trail for regulatory requirements
- No Software Required: Works in any modern browser; no Adobe Acrobat or PDF tools needed
- Workflow Integration: Seamlessly connects autofill → visual review → signature capture → download
- Accessibility: Works on desktop, tablet, and mobile
Security & Privacy
Data Protection:
- All editing sessions run over TLS 1.3; field values never transit unencrypted
- Form data is scoped to
workspaceIdand protected via the shared JWT authentication middleware running in both the .NET and Python service layers - Session isolation: each editing session accesses only its own form data
Access Control:
- Only authorized users can edit specific forms within a workspace
- Read-Only Mode: share forms for review without editing capability
Audit Trail (Enterprise):
- Every edit logged with user identity (from JWT), timestamp, and field-level before/after values
- Immutable logs: audit trail cannot be modified or deleted
- Meets HIPAA, SOX, GDPR audit requirements
Version Control:
- Auto-save: field values written to the store continuously; no risk of losing edits on browser close
- Revert to AI-filled values or any previous save point
- Final lock: once signed, form cannot be edited
Common Questions
Can I edit forms after they've been signed?
No, by design. Once a form is electronically signed via Instafill.ai's signature capture, the PDF is finalized and locked. This protects signed document integrity and satisfies e-signature regulations (ESIGN Act, eIDAS).
Workflow:
- AI fills form
- You review and edit in Visual Editor
- Once satisfied, proceed to signature
- After signing, form is locked — the cryptographic seal invalidates on any modification
If you discover an error after signing, you must:
- Create a new form filling session with corrected data
- Re-sign the corrected form
Exception: Administrators with special permissions can unlock signed forms for compliance reasons, but this action is logged in the audit trail.
What happens if I close the editor without saving?
Auto-save protects your work. The Visual Editor writes field changes back to the store continuously as you type or modify fields. There is no manual Save button to forget.
How it works:
- Changes persisted as you edit
- Session state restored automatically if browser closes unexpectedly
- Return to the same form → editing session restores with all previous changes intact
Finalizing vs Auto-Saving:
- Auto-save: Preserves work-in-progress to the field store
- Finalize: Triggers
build_overlay_pdf_bytes()to assemble the final PDF and moves to the next step (signature or download)
If you leave without finalizing:
- Form remains in "Draft" status
- You (or another authorized user) can resume editing later
- Form is not submitted or shared until explicitly finalized
Can multiple people edit the same form?
Sequential editing (not simultaneous for standard plans):
Standard Workflow:
- User A fills and edits form
- User A clicks "Pass to Reviewer"
- User B receives notification
- User B opens form in Visual Editor (sees User A's filled values)
- User B makes additional edits or approves
Simultaneous Editing (Enterprise only):
- Multiple users can edit simultaneously
- Real-time collaboration with per-user cursor indicators
- Conflict resolution when two users edit the same field simultaneously
- Comments/notes for communication between reviewers
Permissions:
- Owner: Full edit rights
- Editor: Can edit field values
- Reviewer: Can add comments, suggest changes (no direct edits)
- Viewer: Read-only access
Most common use case: sequential approval workflow (assistant → attorney → client for final review).
Does the editor work offline?
No, internet connection required. The Visual Editor is a web application that requires connection to Instafill.ai servers for:
- Loading the PDF document
- Persisting field changes (auto-save)
- Retrieving form structure and
form_choicesfor dropdowns - Enforcing access controls from JWT middleware
Why online-only:
- Security: Sensitive form data never stored in local browser storage
- Collaboration: Session state shared across users
- Compliance: Audit trail requires server-side logging
- Consistency: Everyone sees the same current version
Workaround for unstable connections:
- Download filled PDF before editing
- Edit locally using Adobe Acrobat or Preview
- Re-upload edited PDF to Instafill.ai
This workaround loses auto-save, change tracking, and field validation.
How does the editor handle forms with conditional logic?
Intelligent handling of conditional fields:
Show/Hide Logic:
- Form has field: "Are you married?" (Yes/No)
- If "Yes": Additional fields appear (Spouse Name, Spouse SSN, etc.)
- If "No": Spouse fields hidden
Editor Behavior:
- AI initially fills based on detected conditional logic
- You change "Yes" to "No" in editor → dependent fields automatically hide
- Change back to "Yes" → fields reappear, preserving previously entered values
- Hidden fields excluded from required-field validation
Dependency Chains: Multi-level dependencies ("If employed AND income >$50k → Show tax bracket fields") handled correctly:
- Editor updates dependent fields automatically as you change trigger fields
- Visual indicators show which fields depend on others
Calculations: Forms with calculated fields (e.g., "Total = Field A + Field B"):
- Change Field A → Total recalculates automatically
- Override Total manually → Breaks the formula (warning shown)
- Reset calculation → Restores formula-based value