MockFrame
Start free

Embed alpha

Embeddable mockup editor

Put the complete screenshot and device mockup workflow inside your product.

One hosted script registers a responsive web component. The editor stays isolated inside an iframe and emits a ready event for host applications.

Open embedded editor
HTML
<script src="https://mockframe.app/embed.js" defer></script>

<mockframe-editor height="720px"></mockframe-editor>

Designed for a stable integration

No framework dependency

Responsive host-controlled height

Clipboard permission support

mockframe-ready DOM event

The alpha exposes the full editor. Scene input, export callbacks, signed embed tokens and domain restrictions are the next versioned additions before general availability.

How the embed works

  1. 01

    Load the script

    Add https://mockframe.app/embed.js with defer. It registers the <mockframe-editor> custom element once, so including it twice is harmless.

  2. 02

    Place the element

    Put <mockframe-editor> where the editor should appear. It opens a shadow root with an iframe pointing at mockframe.app/embed/editor, so the editor's styles and scripts never touch your page.

  3. 03

    Wait for ready

    When the editor has loaded, the element dispatches a mockframe-ready event. It bubbles and crosses the shadow boundary, so you can listen on the element or on document.

Inside the frame your users get the same editor as mockframe.app: drop in a screenshot, pick an iPhone, Android, iPad, MacBook or browser frame, style the background and export. The frame is allowed clipboard access, so pasting a screenshot works.

Element attributes

height
Any CSS length for the frame's height. Default 720px. The width always fills the parent.
title
The iframe's accessible name for screen readers. Default “MockFrame screenshot editor”.
origin
Where the editor loads from. Default https://mockframe.app; ready events from any other origin are ignored.

Listening for the ready event

JavaScript
const editor = document.querySelector("mockframe-editor");

editor.addEventListener("mockframe-ready", () => {
  // the editor has loaded inside the frame
  console.log("MockFrame is ready");
});

Embed FAQ

Do I need an API key or a backend?
No. The embed is a script tag and an element. Nothing runs on your server, and no key is involved.
Does it work with React, Vue or Svelte?
Yes. <mockframe-editor> is a standard custom element, so any framework that renders HTML can place it. Attach the mockframe-ready listener with addEventListener, for example from a ref.
Can other sites frame any MockFrame page?
Only the embed route is meant for it. MockFrame's pages send frame-ancestors 'self' and X-Frame-Options SAMEORIGIN, so another site can show the editor only through /embed/editor.
Are my users' designs saved?
Not yet. The embedded editor does not autosave drafts between visits, so users should export before leaving the page.

Need images without a person in the loop? The mockup API renders the same device mockups from one HTTP request.