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 DOM events and callback registration 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';
  new Editor({ container: '#app' });
</script>

document.addEventListener('typograph_editor_ready', () => {
  const doc = window.typograph.get_typograph_document();

  // Callbacks that supply content into the editor
  doc.set_documents_callback(listDocuments);
  doc.set_templates_callback(listTemplates);
  doc.set_clips_callback(listClips);

  // Callbacks that persist edits back to your backend
  doc.set_save_document_callback(saveDocument);
  doc.set_save_template_callback(saveTemplate);
  doc.set_save_clip_callback(saveClip);

  // Manifest: available images, fonts and swatches (async)
  doc.set_manifest_data({ images, fonts, swatches });
});

Lifecycle events

Event	Meaning
typograph_editor_ready	Script finished loading — wire up callbacks here
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

window.typograph.get_typograph_document().open_document_url('https://.../template.json');

See Editor Integration for the complete callback 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 callbacks invoke.

See Authentication.

Next Steps

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