Embed Mockup Editor

You don't need to implement our API to add a great editor feature to your application.

For a quick solution, try using our editor iFrame.

You can easily embed it with just a few lines of JavaScript code.

Embed Editor

How to embed?

CDN use:

Embed the iFrame in your app at the location where you want to display the editor:

<iframe
      id="dm-iframe"
      src="https://embed.dynamicmockups.com"
      style="width: 100%; height: 90vh"
></iframe>

To power the embedded editor, you'll need to include the necessary JavaScript code from the following CDN:

// you must add this script before using initDynamicMockupsIframe function in next step
<script 
    src="https://cdn.jsdelivr.net/npm/@dynamic-mockups/mockup-editor-sdk@latest/dist/index.js"
></script>

Lastly, use the initDynamicMockupsIframe function from the SDK with the following script:

<script>
      document.addEventListener("DOMContentLoaded", function () {
        DynamicMockups.initDynamicMockupsIframe({
          iframeId: "dm-iframe",
          data: { "x-website-key": "Generate for free via our APP" },
          mode: "download",
        });
      });
</script>

JavaScript framework:

Embed the iFrame in your app at the location where you want to display the editor.:

<iframe
      id="dm-iframe"
      src="https://embed.dynamicmockups.com"
      style="width: 100%; height: 90vh"
></iframe>

Install package via npm registry:

npm install @dynamic-mockups/mockup-editor-sdk@latest
or
yarn add @dynamic-mockups/mockup-editor-sdk@latest

Include package in your project and init iFrame:

import { initDynamicMockupsIframe } from "@dynamic-mockups/mockup-editor-sdk";

initDynamicMockupsIframe({
     iframeId: "dm-iframe",
     data: { "x-website-key": "Generate for free via our APP" },
     mode: "download",
});

You'll notice the x-website-key field, you can generate it for free via our APP.

Our Mockup Editor SDK lets you configure the iFrame and control its behavior within your application by providing data to the initDynamicMockupsIframe function. For complete configuration details, visit the Editor Configuration page.

Embed Editor