Skip to main content

Canvas Integration

The Typograph Canvas renders a Typograph document read-only inside a <div>. Use it on product pages, dashboards, or anywhere you want to show a template without the editing UI of the full Editor.

Canvas is delivered as a CDN-hosted script — there is no npm package to install.

Quick Start​

Drop a container <div id="typograph"> into your page, include the Canvas script, and register a single event listener that calls setup() once the script has booted.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Typograph Canvas</title>
</head>
<body>
  <div id="typograph"
       style="position:absolute; top:0; left:0; right:0; bottom:0;">
  </div>

  <script src="canvas_setup.js"></script>
  <script src="https://cdn.typograph.nl/canvas/latest/canvas.js"></script>
</body>
</html>
// canvas_setup.js
document.addEventListener('typograph_init_ready', setup_canvas);

function setup_canvas() {
  // window.typograph is installed by canvas.js once it's ready
  window.typograph.setup();
}

That's it — setup() parses the document referenced on the page and paints it into #typograph.

Container Requirements​

Canvas mounts itself into the element with id="typograph". The element must:

  • Have its size constrained by CSS (absolute/fixed positioning or explicit width/height). Canvas sizes itself to fill the container.
  • Exist in the DOM before canvas.js loads (put the <div> in <body> and the script after it).

Script URL​

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

Pin a specific version in production if you want change-controlled upgrades (release tags are TBD — check with your account manager).

Passing a Document​

Canvas reads the document URL from the page markup or from options passed into setup(). Consult your integration with your Typograph contact for the exact payload shape your build expects — the CDN bundle defines the supported options in its own typings.

Events​

Canvas emits a single public lifecycle event:

EventWhen it fires
typograph_init_readyThe Canvas script has loaded and window.typograph is populated. Call setup() from your handler.

Authentication​

Canvas is read-only and does not call Typograph APIs directly — it renders a document JSON payload that your page (or server) already resolved. If your document is protected behind the File Service, fetch the template JSON server-side with a user token, then hand the data to Canvas.

Client tokens cannot read templates from /v1/file/* (see Token Types).