Embed the Inliner Studio editor inside your app.

Two Modes Sharing One Document

Whether you mount the editor inside Studio or frame it on a third-party domain, users work in a single non-destructive document that switches fluidly between Layers and AI.

Built-In Edit Model Switching

Pass editModel in the embed URL or init payload—or let users switch tiers directly in the editor toolbar. Every tier draws from the same unified monthly image credit pool.

Two Ways to Embed

Start with a plain HTML <iframe> when you just want to open an image by URL, or use the lightweight InlinerEditor.embedIframe JavaScript helper to keep your API key off the iframe URL and receive published assets in a callback.

1. JavaScript SDK Helper (Recommended for Production)

The IIFE bundle mounts the iframe, waits for the editor's ready signal, sends your apiKey and options over postMessage, and invokes onPublish as soon as the user saves.

<div id="inliner-editor"></div>
<script src="https://app.inliner.ai/inliner-editor/inliner-editor.iife.js"></script>
<script>
  const editor = InlinerEditor.embedIframe('#inliner-editor', {
    embedUrl: 'https://app.inliner.ai/inliner-editor/index.html',
    apiKey: 'inl_your_api_key',
    project: 'acme',
    sourceUrl: 'https://img.inliner.ai/acme/product-hero_1200x600.png',
    mode: 'layers',             // 'layers' | 'ai'
    editModel: 'quality',       // 'cheap' | 'recommended' | 'quality' (GPT 2.5 Sunburst)
    useContextMask: true,       // native surrounding-context mask for GPT 2.5 selection edits
    outputFormat: 'webp',       // 'webp' (default lossless) | 'png' | 'jpg'
    height: '740px',
    onPublish(result) {
      // result.url is the newly published, globally cached Inliner CDN URL
      document.querySelector('#hero-preview').src = result.url || result.dataUrl;
      console.log('Published contentId:', result.contentId, 'URL:', result.url);
    },
    onCancel() {
      console.log('User closed or canceled editing');
    },
    onError(message) {
      console.error('Editor error:', message);
    }
  });
</script>

2. Drop-In Iframe + Query Parameters

For CMS custom blocks, internal tools, or quick prototypes, point an iframe directly at /inliner-editor/index.html (or the chrome-less app route /embed/editor) and swap sourceUrl per asset.

<iframe
  title="Inliner Editor"
  src="https://app.inliner.ai/inliner-editor/index.html?embed=1&sourceUrl=https%3A%2F%2Fimg.inliner.ai%2Facme%2Fhero.png&project=acme&mode=layers&editModel=recommended&outputFormat=webp"
  style="width:100%;height:720px;border:0;border-radius:14px;background:#0f0e0c"
  allow="clipboard-write">
</iframe>

Options & postMessage Protocol

All iframe communication uses the versioned inliner.editor channel (version: 1):

1. Child → Parent: { channel: 'inliner.editor', version: 1, type: 'ready' } when the editor UI has mounted.
2. Parent → Child: { channel: 'inliner.editor', version: 1, type: 'init', payload: { apiKey, project, sourceUrl, mode, editModel, useContextMask, outputFormat } }.
3. Child → Parent: { channel: 'inliner.editor', version: 1, type: 'publish', payload: { url, contentId, contentPath, dataUrl, document } } when the user clicks Save & Publish (or type: 'cancel' / type: 'error').

Built for Platforms, Agencies & Internal Tools