Embed the Inliner Editor

Put the same Studio editor on your site. Pass sourceUrl to open a specific hosted image. Publish returns a new Inliner URL you can put on your <img>. Looking for the full product overview? Visit the Embeddable Editor overview.

Iframe + URL params

This is the usual third-party path. Encode the image URL and change it whenever you want to edit a different asset.

HTML

<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"
  style="width:100%;height:720px;border:0"
  allow="clipboard-write">
</iframe>

Build the src in JavaScript so each product or user gets their own image:

JavaScript

const sourceUrl = 'https://img.inliner.ai/acme/hero.png';
iframe.src = 'https://app.inliner.ai/inliner-editor/index.html?' + new URLSearchParams({
  embed: '1',
  sourceUrl,
  project: 'acme',
  mode: 'layers'
});

Query parameters

Param	Purpose
`sourceUrl`	Hosted image to open, usually `https://img.inliner.ai/{project}/{slug}.png`
`project`	Project namespace for Publish and Apply AI
`contentId`	Optional. Reopen a saved layer document
`mode`	`layers` (default) or `ai`
`editModel`	`cheap` (Gemini Flash Lite · 1 credit), `recommended` (Nano Banana 2.1 · 4 credits), or `quality` (GPT Image 2.5 Sunburst · 4 credits)
`useContextMask`	Set to `1` to opt into surrounding-context native masks for `quality` (GPT 2.5) selection edits
`outputFormat`	`webp` (default lossless), `png`, or `jpg`
`embed`	Set to `1` when the editor is framed
`apiKey`	Needed for Publish / AI from another origin. Prefer the JS helper so the key stays off the iframe URL.

Do not put a session token on the URL. Use an API key from Account → API Keys when the editor runs on your domain.

JavaScript helper

The IIFE writes the same query params onto the iframe, then listens for publish.

HTML + JS

<div id="inliner-editor"></div>
<script src="https://app.inliner.ai/inliner-editor/inliner-editor.iife.js"></script>
<script>
InlinerEditor.embedIframe('#inliner-editor', {
  embedUrl: 'https://app.inliner.ai/inliner-editor/index.html',
  apiKey: 'inl_your_key',
  project: 'acme',
  sourceUrl: 'https://img.inliner.ai/acme/hero.png',
  mode: 'layers',
  onPublish(result) {
    document.querySelector('img.hero').src = result.url || result.dataUrl;
  }
});
</script>

Try it

The live snippet page accepts the same query params. Open a banana test image, or swap in your own sourceUrl.

Open the embed snippet

Resources

Embeddable Editor Product Page — full overview of Layers mode, AI region edits, brand kits, and model tiers
Live embed snippet
Chrome-less editor route (same query params)
GPT Image 2.5 Flare & Sunburst Guide
REST API for generate / edit without the UI