Editor API

Overview

The Editor API lets you offer a full-featured, production-grade interactive design tool to your customers without building one yourself.

It is the same high-fidelity Moo/Vistaprint-style editor used by MeePrint (Vue 3 + Fabric.js 6), now available as a white-label embeddable product on PDFModule.

Quick Start

1. Create an Editor Product (the printable spec: dimensions, bleed, sides, features).
2. Create a Session for a customer — this gives you a secure editor_url + short-lived token.
3. Embed the editor_url in an iframe (or open in new tab).
4. Listen for editor:finished postMessage from the iframe.
5. Call the render endpoint (or let the worker do it) to get a print-ready PDF.

curl -X POST https://api.pdfmodule.com/api/v1/editor/sessions \
  -H "X-API-Key: pm_live_yourkey" \
  -H "Content-Type: application/json" \
  -d '{
    "editor_product_id": 42,
    "ttl_minutes": 60
  }'

Key Concepts

• Editor Product — A reusable spec (sides with mm dimensions + bleed/safe, color mode, DPI, allowed features). Similar to a "printable product template" in the editor.
• Design — A user's saved work. Contains the canonical design_json (Fabric objects + metadata). This is what gets rendered to PDF.
• Session — Short-lived token + URL for the hosted editor. The token is what the iframe uses. Sessions are how you securely give end-users access without sharing your main API key.
• Embed Flow — Your server creates a session → you give the customer the URL (iframe or link) → customer designs → you receive a postMessage with the design ID → you render the PDF via API.

Embed Integration

The recommended way is an iframe on your site.

Basic HTML Example

<iframe id="editor" src="https://editor.pdfmodule.com/embed?token=YOUR_TOKEN" 
        style="width:100%; height:800px; border:0;"></iframe>

<script>
window.addEventListener('message', function(e) {
  if (e.data.source === 'pdfmodule-editor' && e.data.type === 'editor:finished') {
    const designId = e.data.payload.designId;
    // Tell your backend to render this design
    fetch('/your-api/render-design', { method: 'POST', body: JSON.stringify({designId}) });
  }
});
</script>

postMessage Protocol

The editor communicates with your parent page using postMessage.

Events from Editor → Parent

• editor:ready — Canvas is loaded and ready.
• editor:dirty — User made changes (unsaved).
• editor:saved — Design was autosaved (payload contains designId).
• editor:finished — User clicked "Finish Design" (most important event for you).
• editor:error

Commands Parent → Editor (optional)

You can send messages to control the editor:

iframe.contentWindow.postMessage({
  type: 'loadDesign',
  payload: { designJson: ... }
}, '*');

Authentication

• Server-to-server (your backend): Use your normal pm_live_ or pm_test_ API key in X-API-Key or Bearer header. This is used to create products, sessions, trigger renders, list designs, etc.
• Client / iframe (end user): Short-lived session tokens (ed_... prefix). These are narrow — they only allow the specific product + design for a limited time. Created by your server when you call POST /api/v1/editor/sessions.

Editor Products (Specs)

Define what can be designed (size, bleed, sides, DPI, allowed tools).

Example spec (sides in mm):

{
  "slug": "a5-flyer",
  "name": "A5 Flyer",
  "spec": {
    "sides": [
      { "key": "front", "widthMm": 148, "heightMm": 210, "bleedMm": 3, "safeMm": 8, "backgroundColor": "#ffffff", "required": true },
      { "key": "back",  "widthMm": 148, "heightMm": 210, "bleedMm": 3, "safeMm": 8, "backgroundColor": "#ffffff", "required": false }
    ],
    "colorMode": "CMYK",
    "minDpi": 200,
    "exportDpi": 300,
    "allowedFeatures": ["text", "image", "shape", "qr", "ai"],
    "pdfStandard": "PDF/X-1a:2003"
  }
}

Designs

A user's artwork state. The design_json is the portable Fabric.js representation.

Endpoints: POST /designs, PUT /designs/{id}, GET /designs, preview upload, etc.

Sessions & Embeds

The heart of the integration.

{
  "editor_product_id": 42,
  "design_id": 123,           // optional - re-open existing
  "ttl_minutes": 90,
  "return_url": "https://yoursite.com/thank-you"
}

Response includes editor_url (ready to put in iframe) and the raw token.

Rendering Designs to PDF

Asynchronous via jobs (same pattern as Studio).

Poll /render/status or listen for webhooks. Download the final PDF with /print.pdf.

The output uses the full production pipeline (vector text/shapes, correct boxes, optional CMYK + Ghostscript PDF/X).

AI Features (Optional)

Image generation, "design for me", background removal. Metered separately and can be disabled per workspace/product.

Uses Gemini (configure GEMINI_API_KEY in your environment).

Building the Frontend Bundle

The interactive editor (Vue + Fabric) lives in the adapted sources under public/editor-src/ (originally from MeePrint).

Run npm run build:editor (or bash scripts/build-editor.sh) to populate public/editor/ with the assets that the host page loads.

For a real production bundle you would use a Vite build (adapted from MeePrint's config) with the necessary dependencies.

Billing & Limits

Editor usage is tracked with dedicated meters (editor_renders, editor_ai_images).

See your plan limits in the dashboard or via the account settings API. Renders are the billable unit (same as regular PDF generation in most plans).

Next Steps

• Explore the full API reference at /docs
• See code samples in the SDKs page
• Read the general User Guide
• Contact support if you need help with a custom product spec or white-label setup.