Skip to main content

Editor Integration

The Typograph Editor is a full browser-based document editor, delivered as a CDN-hosted script. It paints into a <div> on your page and exposes a window.typograph global for you to wire up callbacks for loading, saving, and providing the image/font manifest.

There is no npm package — include the script from the CDN and register event listeners.

Quick Start​

<!DOCTYPE html>
<html translate="no">
<head>
  <meta charset="utf-8">
  <title>Typograph Editor</title>
  <link href="style.css" rel="stylesheet" type="text/css">
  <script src="editor_sample.js"></script>
  <script type="module" src="https://cdn.typograph.nl/editor/latest/editor.js"></script>
</head>
<body>
  <!-- The editor paints into this container. Must be sized by CSS. -->
  <div id="typograph"
       style="position:absolute; top:140px; left:0; right:250px; bottom:0;"></div>

  <!-- The editor also uses these dialog and overlay layers — include them as-is. -->
  <div id="wrapper">
    <div id="dialoglayer"></div>
    <div id="dialoglayer_01"></div>
    <div id="popupsliderlayer"></div>
    <div id="htmllayer"></div>
  </div>
  <div id="menulayer"></div>
</body>
</html>
// editor_sample.js — register listeners once, wire your callbacks in `set_callbacks`.
document.addEventListener('typograph_editor_ready', set_callbacks);
document.addEventListener('typograph_document_opened', document_opened);
document.addEventListener('typograph_user_fonts_loaded', user_fonts_loaded);
document.addEventListener('typograph_pageelement_selected', page_element_selected);

function set_callbacks() {
  const typograph_document = window.typograph.get_typograph_document();

  // Tell the editor how to list documents, templates, and clips the user can open.
  typograph_document.set_documents_callback(get_documents);
  typograph_document.set_templates_callback(get_templates);
  typograph_document.set_clips_callback(get_clips);

  // Tell the editor how to persist edits.
  typograph_document.set_save_document_callback(save_document);
  typograph_document.set_save_template_callback(save_template);
  typograph_document.set_save_clip_callback(save_clip);

  // Seed the editor with available images and fonts (the "manifest").
  typograph_document.set_manifest_data({
    images: [
      {
        id: '019b28fb-a11e-7641-a28f-e978f892ec06',
        name: 'hero',
        size: { w: 5213, h: 4160 },
        original_url: 'https://cdn.example.com/hero/original.jpg',
        editor_url:   'https://cdn.example.com/hero/editor.webp',
        print_url:    'https://cdn.example.com/hero/print.jpg',
        thumbnail_url:'https://cdn.example.com/hero/thumb.webp',
      },
    ],
    fonts: [
      // {id, name, url} — Open Sans / Source Sans Pro are built in.
    ],
  });
}

function document_opened()   { console.log('document opened'); }
function user_fonts_loaded() { console.log('user fonts loaded'); }

function page_element_selected(event) {
  // event.detail.uuid and event.detail.message are populated by the editor.
  console.log('selected element', event.detail.uuid);
}

Container Requirements​

The editor mounts into <div id="typograph"> and also uses these overlay containers (keep the IDs exactly):

  • wrapper, dialoglayer, dialoglayer_01, popupsliderlayer, htmllayer, menulayer

Constrain #typograph with CSS so it has a usable width and height — the editor fills the box you give it.

Script URL​

ChannelURL
Latest stablehttps://cdn.typograph.nl/editor/latest/editor.js

Load the script as a module (<script type="module" src="...">).

Lifecycle Events​

The editor emits document events you listen to with document.addEventListener(...):

EventWhen it firesHandler receives
typograph_editor_readyEditor script loaded, window.typograph populated. Register your callbacks here.—
typograph_document_openedA document has been opened in the editor.—
typograph_user_fonts_loadedUser-provided fonts (from the manifest) finished loading.—
typograph_pageelement_selectedThe user selected a page element.CustomEvent with detail.uuid and detail.message

Callback Registration​

Inside your typograph_editor_ready handler, retrieve the document facade and plug in your callbacks. Each callback is a plain JavaScript function; some return data (list / fetch callbacks), others take data (save callbacks).

List callbacks — provide options in menus​

// Return a JSON-stringified array of URLs pointing to the user's saved documents.
function get_documents() {
  // Hit your own backend for the list of user's saved documents.
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/api/list-documents', false);
  xhr.send();
  return xhr.response; // already JSON
}

typograph_document.set_documents_callback(get_documents);
typograph_document.set_templates_callback(get_templates);
typograph_document.set_clips_callback(get_clips);

Save callbacks — persist edits​

// The editor calls these with { name, data } where `data` is a serialized
// template JSON string. Persist it — typically to the Typograph File Service
// or your own backend that proxies to it.
function save_template({ name, data }) {
  const form = new FormData();
  form.append('filename', name);
  form.append('data', data);

  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/api/save-template', false);
  xhr.send(form);
}

typograph_document.set_save_document_callback(save_document);
typograph_document.set_save_template_callback(save_template);
typograph_document.set_save_clip_callback(save_clip);

Manifest — images and fonts available in the editor​

typograph_document.set_manifest_data({
  images: [/* { id, name, size, original_url, editor_url, print_url, thumbnail_url } */],
  fonts:  [/* { id, name, url } */],
});

Opening a Document Programmatically​

function open_document_url(url) {
  window.typograph.get_typograph_document().open_document_url(url);
}

Backend Glue​

The editor expects your backend to:

  1. List user-owned documents / templates / clips — return URLs pointing at JSON payloads the editor can fetch.
  2. Persist save operations — accept { filename, data } payloads and store the data (a serialized template JSON string).
  3. Host images and fonts from the manifest at the *_url fields you supply.

If you want those backing URLs to be Typograph-hosted, wire your backend to the Typograph File Service and the presigned-URL upload flow. Before publishing a document, run it through POST /v1/document/validate to catch schema issues early.