Configuration

The Editor and Viewer are CDN-hosted browser scripts. Each is constructed with a container and a small options object, and then configured through host providers passed at construction and DOM events on a window.typograph global. This page covers the most common patterns; the full walkthrough lives on the dedicated integration pages.

Editor

<script src="https://cdn.typograph.nl/editor/latest/scripts/jsColorEngineWeb.js"></script>
<div id="app" style="position:absolute; inset:0;"></div>

<script type="module">
  import { Editor } from 'https://cdn.typograph.nl/editor/latest/editor.js';

  const editor = new Editor({
    container: '#app',
    host: {
      // Providers that supply content into the editor
      documents: listDocuments,
      templates: listTemplates,
      clips: listClips,
      // Manifest for the Images tab: images and fonts (swatches go through set_manifest_data)
      manifest_data: { images, fonts },

      // Providers that persist edits back to your backend
      save_document: saveDocument,   // (name, data) => Promise<void>
      save_template: saveTemplate,
      save_clip: saveClip,           // (name, data, thumbnail) => Promise<void>
    },
    legacy_php_fallback: false,
  });
</script>

A provider may return its value directly or as a promise. With legacy_php_fallback: false, capabilities you don't provide are hidden from the editor UI; with the fallback on, they go to php/*.php instead. The older set_*_callback setters are deprecated.

Lifecycle events

Event	Meaning
typograph_editor_ready	Editor finished setting up — add late providers via editor.get_document().host.set_providers()
typograph_document_opened	A document has been opened in the editor
typograph_user_fonts_loaded	User-supplied fonts from the manifest finished loading
typograph_pageelement_selected	The user selected a page element (event.detail.uuid, event.detail.message)

Opening a document programmatically

The document exists once the editor has booted, so open it from the ready event:

document.addEventListener('typograph_editor_ready', () => {
  window.typograph.get_typograph_document().open_document_url('https://.../template.json');
});

The global returns the same document as editor.get_document().

See Editor Integration for the complete provider signatures and a working example.

Viewer

<script src="https://cdn.typograph.nl/editor/latest/scripts/jsColorEngineWeb.js"></script>
<div id="app" style="position:absolute; inset:0;"></div>

<script type="module">
  import { Viewer } from 'https://cdn.typograph.nl/editor/latest/viewer.js';
  new Viewer({ container: '#app' });
</script>

The Viewer is read-only and does not authenticate with Typograph directly — fetch the template JSON server-side (using a user token) and hand it to the page.

What the user may change is decided by the template, not by the Viewer: with no authored edit_options, text editing and image content edits are allowed while frame move/resize/rotate are denied. See Viewer Integration.

Container Sizing

Both take a container — a CSS selector, a bare element id, or an HTMLElement. Constrain it with CSS so it has a usable width and height (absolute/fixed positioning, or explicit width/height); the layout resolves against that box, so a container with no height gives you no height. Omit container and the Editor mounts full-page on document.body.

Authentication

Neither the Editor nor the Viewer calls the Typograph API directly. Your backend:

1. Holds OAuth credentials.
2. Exchanges them for a user token (Authorization Code + PKCE) — never embed a client_secret in browser code.
3. Uses the token to read/write templates via the File Service.
4. Returns data to the page through your own endpoints, which the Editor's host providers invoke.

See Authentication.

Next Steps

• Quick Start — end-to-end OAuth + API call
• Editor Integration — host providers, manifest, save flow
• Viewer Integration — read-only template filling