Editor Web PDF SDK

This project is now structured like a reusable library package that can be installed in other apps, while still supporting the current demo app usage in this repo.

Library Build Commands

• Start demo app: npm run dev
• Build demo app: npm run build
• Build library package (dist + types): npm run build:lib
• Create local installable tarball: npm run pack:local

Public API

Main API entry points:

• editor-web-pdf-sdk
• editor-web-pdf-sdk/core
• editor-web-pdf-sdk/react
• editor-web-pdf-sdk/licensing

Example: Core SDK class

import { PdfEditorSdk } from "editor-web-pdf-sdk/core";

const sdk = new PdfEditorSdk({
  pdfiumModuleUrl: "/pdfium/pdfium.esm.js",
  pdfiumWasmUrl: "/pdfium/pdfium.esm.wasm",
  rustModuleUrl: "/rust-wasm/rust_wasm.js",
  rustWasmUrl: "/rust-wasm/rust_wasm_bg.wasm",
});

await sdk.initialize();
const service = sdk.getService();

Example: React component

import { PdfEditor } from "editor-web-pdf-sdk/react";

export default function App() {
  return <PdfEditor />;
}

Example: Bring your own design (custom UI)

import { PdfEditor, type PdfEditorController } from "editor-web-pdf-sdk/react";

function CustomControls(controller: PdfEditorController) {
  return (
    <div style={{ display: "flex", gap: 8, marginBottom: 12 }}>
      <button type="button" onClick={() => controller.onZoomChange(controller.zoom - 0.25)}>Zoom -</button>
      <button type="button" onClick={() => controller.onZoomChange(controller.zoom + 0.25)}>Zoom +</button>
      <button type="button" onClick={controller.onSearch}>Find</button>
      <button type="button" onClick={controller.onSaveCopy}>Save</button>
    </div>
  );
}

export default function App() {
  return (
    <PdfEditor
      showDefaultHeader={false}
      showDefaultSidebar={false}
      renderControls={CustomControls}
    />
  );
}

Theme control from library

import { PdfEditor } from "editor-web-pdf-sdk/react";

export default function App() {
  return (
    <PdfEditor
      themeMode="dark" // "light" | "dark" | "system"
      showThemeToggle
    />
  );
}

You can also use your own controls with renderControls(controller):

• controller.themeMode
• controller.resolvedThemeMode
• controller.setThemeMode("light" | "dark" | "system")
• controller.toggleThemeMode()

Licensing / Feature Restriction Scaffold

Use LicenseManager to control free vs paid features in your host app:

import { LicenseManager, resolveAllowedAnnotationTools } from "editor-web-pdf-sdk/licensing";

const licenseManager = new LicenseManager();
licenseManager.setLicense({
  key: "customer-license-key",
  plan: "pro",
  expiresAt: "2027-01-01T00:00:00.000Z",
});

const canUseInk = licenseManager.canUse("inkAnnotation");
const allowedTools = resolveAllowedAnnotationTools(licenseManager.getCurrentPlan());

You can use this output to decide which toolbar actions to show in your app.

File Structure (Library-Oriented)

• src/library/index.ts: top-level export barrel
• src/library/core: core service and types exports
• src/library/react: React exports
• src/library/licensing: plan/feature gating exports
• src/lib/pdfium: internal PDFium + Rust runtime integration
• src/components/pdf: UI components (editor + internal toolbar)

Publish To npm (Step-by-Step)

1. Login to npm:

npm login

2. Build the library:

npm run build:lib

3. Verify package content:

npm pack --dry-run

4. Publish:

npm publish --access public

If the package name is already taken, update name in package.json first.

Install In Another Project

A) From npm

npm install editor-web-pdf-sdk

B) Local tarball (for testing before publish)

In this repo:

npm run pack:local

In another project:

npm install ../path/to/editor-web-pdf-sdk-0.1.0.tgz

C) From Git

npm install git+https://github.com/your-org/your-repo.git#main

WASM Asset Requirement In Consumer App

The library needs static assets:

• public/pdfium/*
• public/rust-wasm/*

In your consuming project, copy these folders from this package into your app public directory, or host them on CDN and pass custom URLs through PdfEditorSdk / PdfiumWasmService options.

Security And Code Protection Notes

No JavaScript library can be fully hidden once shipped to the browser. Use layered protection:

• Keep sensitive validation and billing checks on your backend.
• Issue signed short-lived license tokens.
• Validate feature access server-side where possible.
• Obfuscation can slow reverse engineering, but does not guarantee protection.

This repo now gives you the correct structure to enforce feature tiers (free, pro, enterprise) at integration level.