aeropdf-editor

v1.0.1

Published

12 days ago

Modern dark-themed client-side PDF Editor in Javascript

Downloads

298

0High
0Medium
0Low

garvgyanani121

AeroPDF Editor

A premium, framework-agnostic, dark-themed client-side PDF editor library. Scoped and encapsulated to allow seamless embedding in any website, dashboard, or JavaScript web application (React, Vue, Angular, Svelte, etc.) without style leaks or global namespace pollution.

Features

Modern Dark-Themed UI: Sleek glassmorphism toolbar, responsive sidebar/thumbnail navigation, and smooth micro-animations.
Framework Agnostic: Compiles to both ES Modules (dist/aeropdf.es.js) and UMD format (dist/aeropdf.umd.js).
In-Place Text Editing: Double-click any existing text in a PDF, change the text, and it masks the original coordinates (with descender/ascender handling) and compiles the replacement text.
Smart Font Style Matching: Automatically reads font properties (sans-serif/serif/monospace, bold, italic) from the PDF and uses matching standard PostScript fonts (Helvetica, Times-Roman, Courier) during render and compilation.
Signature & Freehand drawing: Draw custom annotations or insert signature pads onto pages.
Granular Visibility Controls: Toggle visibility of individual buttons (Download, Print, Zoom, Signature, Rotate, Page Navigation) to fit your application context.
API Integration Hooks: Custom lifecycle callback hooks for actions like onSave (delivering compiled Uint8Array bytes) and onPrint.

Installation

Add the library to your project:

npm install aeropdf-editor

Basic Usage

1. Plain HTML / Script Tags (UMD)

Load the stylesheet, library dependencies (PDF.js, PDF-lib, Lucide Icons), and the compiled UMD bundle:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AeroPDF Editor Embed</title>
  
  <!-- CSS Stylesheet -->
  <link rel="stylesheet" href="node_modules/aeropdf-editor/dist/styles.css">
  
  <!-- Dependencies -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/pdf-lib.min.js"></script>
  <script src="https://unpkg.com/lucide@latest"></script>
  
  <style>
    #editor-viewport {
      width: 100%;
      height: 600px;
    }
  </style>
</head>
<body>

  <!-- Target Container -->
  <div id="editor-viewport"></div>

  <!-- UMD Script -->
  <script src="node_modules/aeropdf-editor/dist/aeropdf.umd.js"></script>
  
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const container = document.getElementById('editor-viewport');
      
      const editor = new AeroPDFEditor(container, {
        pdfUrl: 'path/to/document.pdf',
        fileName: 'contract_unsigned',
        showSignatureBtn: true,
        onSave: async (pdfBytes) => {
          console.log("Saving PDF bytes...", pdfBytes);
          // Send pdfBytes (Uint8Array) to your server API
        }
      });
    });
  </script>
</body>
</html>

2. React Integration (ES Module)

import React, { useEffect, useRef } from 'react';
import AeroPDFEditor from 'aeropdf-editor';
import 'aeropdf-editor/dist/styles.css';

export default function EmbeddedPDFEditor({ fileBytes }) {
  const containerRef = useRef(null);
  const editorInstance = useRef(null);

  useEffect(() => {
    if (containerRef.current) {
      editorInstance.current = new AeroPDFEditor(containerRef.current, {
        pdfBytes: fileBytes,
        showUploadBtn: false, // Hide uploading custom files
        onSave: async (compiledBytes) => {
          // Send to document API
          await fetch('/api/documents/save', {
            method: 'POST',
            body: compiledBytes,
            headers: { 'Content-Type': 'application/pdf' }
          });
          alert('Saved successfully!');
        }
      });
    }

    return () => {
      if (editorInstance.current) {
        editorInstance.current.destroy();
      }
    };
  }, [fileBytes]);

  return <div ref={containerRef} style={{ width: '100%', height: '80vh' }} />;
}

Options & Configuration

When instantiating new AeroPDFEditor(container, options), you can pass the following properties:

| Option | Type | Default | Description | |---|---|---|---| | pdfUrl | string | null | URL path to fetch the initial PDF. | | pdfBytes | ArrayBuffer / Uint8Array | null | Raw binary bytes of the PDF to render directly from memory. | | fileName | string | 'contract' | Default name for downloaded PDF files. | | showDownloadBtn | boolean | true | Show/hide the Compile & Download button. | | showPrintBtn | boolean | true | Show/hide the Print button. | | showSignatureBtn| boolean | true | Show/hide the Signature pad tool. | | showUploadBtn | boolean | true | Show/hide the Upload PDF option in the menu. | | showClearBtn | boolean | true | Show/hide the Clear Edits option in the menu. | | showSidebarToggle| boolean | true | Show/hide the toggle button for thumbnails sidebar. | | showZoomControls | boolean | true | Show/hide the Zoom In/Out control cluster. | | showFitWidthBtn | boolean | true | Show/hide the Fit Width button. | | showRotateBtn | boolean | true | Show/hide the clockwise Rotation button. | | showAnnotateBtn | boolean | true | Show/hide the drawing/annotation sub-toolbar. | | showHistoryControls| boolean| true | Show/hide the Undo & Redo controls. | | showPageIndicator| boolean | true | Show/hide the page selection inputs. | | onSave | Function | null | Callback triggered when compiling is completed. Receives the compiled PDF Uint8Array as a parameter. | | onPrint | Function | null | Callback hook triggered when clicking Print. |

API Methods

The editor instance exposes the following methods:

loadPDF(pdfBytesOrUrl, fileName): Programmatically load or replace the active PDF.
getPDFBytes(): Compiles all annotations, signatures, rotations, and inline text edits, returning a Promise resolving to the final Uint8Array.
destroy(): Unbinds listeners and destroys references for safe host application component unmount.

License

MIT License. Feel free to use and distribute in personal or commercial projects.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme