Embedded designer SDK quickstart

The identifier model

Choose a base template in PDFDesignAPI and store its UUID in your trusted backend. Generate or reuse one UUID from your own system for each customer-specific document layout.

The pair baseTemplateUuid/externalUuid identifies exactly one clone within your PDFDesignAPI team. The clone also receives its own template_uuid. Opening the same pair resumes the existing layout; first use clones the latest base template version.

Create an editor session on your backend

Call the session endpoint from trusted server code with a team API token. Never put the team token in browser JavaScript.

The response contains a short-lived embed_url. Its encrypted capability is stored in the URL fragment and removed by the editor after loading. The external UUID identifies the clone but is not an authentication credential.

const endpoint = 'https://pdfdesignapi.com/api/v1/embedded-templates/'
  + baseTemplateUuid + '/' + externalUuid + '/session'
const response = await fetch(
  endpoint,
  {
    method: 'POST',
    headers: {
      Authorization: 'Bearer ' + process.env.PDFDESIGNAPI_TOKEN,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ expiresInMinutes: 60 }),
  },
)
const { embed_url: embedUrl } = await response.json()

Mount the editor in your application

Return only embedUrl to your frontend and mount it with the browser helper. The embedded editor can add, remove, position, style, and bind document components.

The base dataSchema and exampleData are visible for binding and preview but are read-only in both the UI and save API.

<div id="template-editor" style="height: 800px"></div>
<script type="module">
  import { PDFDesignAPIEmbed } from 'https://pdfdesignapi.com/sdk/pdfdesignapi-embed.js'

  const editor = new PDFDesignAPIEmbed({
    container: '#template-editor',
    embedUrl: session.embedUrl,
  }).mount()

  editor.on('saved', ({ version }) => console.log('Saved version', version))
  editor.on('error', ({ message }) => console.error(message))
</script>

Generate with the same pair

Your backend sends production data to the compound generation endpoint. The payload is validated against the locked template contract and rendered with the customer-specific layout.

Use the same base UUID and external UUID that created the editor session.

curl -X POST "https://pdfdesignapi.com/api/v1/generate/single/BASE_TEMPLATE_UUID/EXTERNAL_UUID"   -H "Authorization: Bearer API_TOKEN"   -H "Content-Type: application/json"   -d '{"data":{"customer":{"name":"Example BV"}}}'   --output document.pdf

Editor events and lifecycle

The browser helper emits ready, saved, and error events. Destroy the helper when your application removes the editor view.

Session URLs expire and should be created when an authorized user opens the editor. A new session for the same pair resumes the same clone and does not overwrite its layout.