Skip to content
Templated API Documentation Templated API Documentation

Preview Mode

The Preview Mode is a canvas-only version of the editor designed for fast, distraction-free embedding. It hides the editor UI and focuses on rendering and manipulating template content. You can configure the initial state via URL parameters and control behavior at runtime with postMessage.

You can try a demo implementation here.

Enable Preview Mode

Use the preview base path: /editor/preview/{TEMPLATE_ID}?embed={CONFIG_ID}.

Basic Preview Embed
<iframe
  id="template-embed"
  src="https://app.templated.io/editor/preview/{$TEMPLATE_ID}?embed={$CONFIG_ID}"
  width="100%"
  height="600"
  frameborder="0"
></iframe>

Optional URL parameters

  • zoom (10–100) – initial zoom level; 50 equals 100% scale
  • allow-layer-move (true|false) – allow moving layers in preview
  • allow-layer-resize (true|false) – allow resizing layers in preview
  • allow-text-edition (true|false) – allow double-click text editing in preview
  • layers – base64-encoded JSON with initial layer data (see Advanced page)

Example with flags:

<iframe
  src="https://app.templated.io/editor/preview/{$TEMPLATE_ID}?embed={$CONFIG_ID}
       &zoom=50&allow-layer-move=true&allow-layer-resize=true"
  width="100%" height="600" frameborder="0"
></iframe>

Runtime control (postMessage)

After the iframe loads, you can control Preview Mode without reloading using postMessage. The editor will also send status events back.

Messages you can send to the editor

Parent → Editor
// Update layer values
iframe.contentWindow.postMessage({
  type: 'UPDATE_LAYERS',
  data: {
    'headline': { text: 'New title', color: '#FF0000' },
    'hero-image': { image_url: 'https://example.com/image.jpg' }
  }
}, '*');


// Set zoom (10–100; 50 = 100% scale)
iframe.contentWindow.postMessage({ type: 'SET_ZOOM', zoom: 60 }, '*');


// Toggle preview capabilities
iframe.contentWindow.postMessage({ type: 'SET_ALLOW_LAYER_MOVE',   allowLayerMove: true }, '*');
iframe.contentWindow.postMessage({ type: 'SET_ALLOW_LAYER_RESIZE', allowLayerResize: true }, '*');
iframe.contentWindow.postMessage({ type: 'SET_ALLOW_TEXT_EDITION', allowTextEdition: true }, '*');


// Load a different template without reloading the iframe
iframe.contentWindow.postMessage({ type: 'LOAD_TEMPLATE', templateId: 'tpl_123', clone: false }, '*');

Events the editor sends back

Editor → Parent
window.addEventListener('message', (event) => {
  // Optional: verify origin: if (event.origin !== 'https://app.templated.io') return;
  const msg = event.data;
  switch (msg?.type) {
    case 'EDITOR_READY':
      // Editor initialized; safe to send UPDATE_LAYERS / SET_* messages
      break;
    case 'TEMPLATE_LOADED':
      // URL-based initial load completed; contains template details
      console.log('Loaded via URL:', msg.template);
      break;
    case 'TEMPLATE_LOADED_SUCCESS':
      // Successful LOAD_TEMPLATE postMessage
      console.log('Template switched:', msg.templateId);
      break;
    case 'TEMPLATE_LOAD_ERROR':
      console.error('Template load failed:', msg.error);
      break;
    case 'LAYERS_UPDATED':
      // Acknowledges UPDATE_LAYERS
      break;
    case 'LAYER_UPDATE_ERROR':
      console.error('Layer update failed:', msg.error);
      break;
    case 'ZOOM_UPDATED':
      console.log('Zoom now:', msg.zoom); // same 10–100 scale where 50 = 100%
      break;
    case 'ZOOM_UPDATE_ERROR':
      console.error('Zoom update failed:', msg.error);
      break;
    case 'ALLOW_LAYER_MOVE_UPDATED':
    case 'ALLOW_LAYER_RESIZE_UPDATED':
    case 'ALLOW_TEXT_EDITION_UPDATED':
      // Acknowledges preview capability toggles
      break;
    case 'ALLOW_LAYER_MOVE_UPDATE_ERROR':
    case 'ALLOW_LAYER_RESIZE_UPDATE_ERROR':
    case 'ALLOW_TEXT_EDITION_UPDATE_ERROR':
      console.error('Capability toggle failed:', msg.error);
      break;
  }
});

For best performance and reliable initialization:

  1. Load the first template using the URL (/editor/preview/{templateId}?embed=...) so the editor initializes correctly.
  2. Switch to other templates using the LOAD_TEMPLATE message to avoid iframe reloads and keep caches warm.

Complete example

Minimal working example
<iframe id="template-embed" width="100%" height="700" frameborder="0"></iframe>
<script>
  const iframe = document.getElementById('template-embed');
  const CONFIG_ID = 'YOUR_EMBED_CONFIG_ID';
  const FIRST_TEMPLATE = 'tpl_ABC123';


  // 1) Initial URL-based load (with preview)
  const url = new URL(`https://app.templated.io/editor/preview/${FIRST_TEMPLATE}`);
  url.searchParams.set('embed', CONFIG_ID);
  url.searchParams.set('zoom', '50'); // 50 = 100% scale
  iframe.src = url.toString();


  // 2) Listen for readiness and apply runtime controls
  window.addEventListener('message', (event) => {
    const msg = event.data;
    if (msg?.type === 'EDITOR_READY') {
      // Example: allow layer move in preview and push some data
      iframe.contentWindow.postMessage({ type: 'SET_ALLOW_LAYER_MOVE', allowLayerMove: true }, '*');
      iframe.contentWindow.postMessage({ type: 'UPDATE_LAYERS', data: { headline: { text: 'Hello Preview' } } }, '*');
    }
  });
</script>

See also