Getting started

Install the SDK, embed the editor and add your first document.

The pdfmergesortsplit SDK puts the PDF Merge editor — merging, sorting, rotating, splitting — inside your own product. The editor runs in an iframe in the visitor's browser, so no PDF ever reaches your server or ours.

Install

npm install pdfmergesortsplit

react is an optional peer dependency: the plain class does not import it.

Embed the editor

import { PDFMergeSortSplitClass } from 'pdfmergesortsplit';

const editor = new PDFMergeSortSplitClass('#editor', {
  apiKey: '<licence JWT>',        // without one the editor runs in test mode
});

await editor.whenReady();

const pages = await editor.getPages();                 // where each page came from
const pdf = await editor.exportDocument();             // every page as one Blob

The container is filled with the iframe:

<div id="editor" style="height: 640px"></div>

React

import { PDFMergeSortSplit, usePdfMergeSortSplit } from 'pdfmergesortsplit/react';

export function PdfEditor({ onExport }) {
  const { ref, exportDocument } = usePdfMergeSortSplit();

  return (
    <PDFMergeSortSplit
      ref={ref}
      config={{ apiKey: '<licence JWT>' }}
      style={{ height: 640 }}
      onExport={(result) => onExport(result.blob)}
    />
  );
}

The iframe is created once and survives re-renders. To change the configuration, remount the component with a key.

How it fits together

  1. The SDK creates an iframe pointing at the editor (embedUrl, default https://pdfmerge.rsj.de).
  2. The editor announces itself (init) and the SDK answers with your configuration (initRsp) — title, icon, hidden controls, injected buttons, licence.
  3. Your page drives the editor with promises (loadDocument, getPages, exportDocument) and receives events (action, export, license).
  4. Documents are parsed, edited and re-built in the browser. Nothing is uploaded.

Trying it locally

Both sample projects in the product repository point at the hosted editor and accept two query parameters:

?embed=http://localhost:4173    # use a local build of the editor
?token=<licence JWT>            # supply a licence
git clone <repository>
pnpm run sdk:build
pnpm run samples:install
pnpm --dir sdksimple run dev     # plain JavaScript sample
pnpm --dir sdksample run dev     # React sample

Next steps

  1. Configuration — everything you can set.
  2. API reference — methods, events, types.
  3. Page provenance — keep track of where each page came from.
  4. Licensing — test mode, JWTs and what is checked.