Configuration

The Editor and Canvas are CDN-hosted browser scripts. They're configured through DOM events and callback registration on a window.typograph global — no constructor or options object is passed in. This page covers the most common patterns; the full walkthrough lives on the dedicated integration pages.

Editor

<div id="typograph" style="position:absolute; inset:0;"></div>
<script type="module" src="https://cdn.typograph.nl/editor/latest/editor.js"></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 and fonts
  doc.set_manifest_data({ images, fonts });
});

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.

Canvas

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

document.addEventListener('typograph_init_ready', () => {
  window.typograph.setup();
});

Canvas is read-only and does not need to be authenticated with Typograph directly — fetch the template JSON server-side (using a user token) and hand it to the page. See Canvas Integration.

Container Sizing

Both scripts mount into <div id="typograph">. Constrain the div with CSS so it has a usable width and height (absolute/fixed positioning, or explicit width/height). The script paints into whatever box you give it.

Authentication

Neither the Editor nor Canvas 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
• Canvas Integration — read-only rendering