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": "CONTACT_US_FOR_THE_WEBSITE_KEY" },
          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": "CONTACT_US_FOR_THE_WEBSITE_KEY" },
     mode: "download",
});

You'll notice the x-website-key field, contact us here to get it for you.

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