> For the complete documentation index, see [llms.txt](https://docs.dynamicmockups.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dynamicmockups.com/mockup-editor-sdk/embed-editor.md).

# SDK

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.\
\
You can choose between our classic editor, or AI powered MockAnything editor.

<figure><img src="/files/fO6NvMsjIPFkWlRhsDUo" alt=""><figcaption><p>Classic Embed Editor</p></figcaption></figure>

<figure><img src="/files/YxfEPrpoHMpjduWYYKXc" alt=""><figcaption><p>MockAnything Embed Editor</p></figcaption></figure>

## How to embed?

### CDN use:

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

```html
<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:

```javascript
// 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:

```javascript
<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.:

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

Install package via npm registry:

<pre class="language-sh"><code class="lang-sh"><strong>npm install @dynamic-mockups/mockup-editor-sdk@latest
</strong>or
yarn add @dynamic-mockups/mockup-editor-sdk@latest
</code></pre>

Include package in your project and init iFrame:

```javascript
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](https://app.dynamicmockups.com/mockup-editor-embed-integrations).

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](/mockup-editor-sdk/classic-editor-configuration.md) page.&#x20;

<figure><img src="/files/bC3gdNcG4aBBkUemcNDb" alt=""><figcaption><p>Embed Editor</p></figcaption></figure>

### Open a specific mockup in the Mockup Editor

By default, when you embed the mockup editor, the whole catalog will show up. \
You can also open a specific mockup directly.

<figure><img src="/files/bhheaYXtLijmJzexB2tm" alt=""><figcaption><p>Open a specific mockup in the Mockup Editor</p></figcaption></figure>

To achieve that, modify the `src` attribute to open a specific mockup by providing the `mockup uuid`.

```html
<iframe
      id="dm-iframe"
      src="https://embed.dynamicmockups.com/mockup/43981bf4-3f1a-46cd-985e-3d9bb40cef36/"
      style="width: 100%; height: 90vh"
></iframe>
```

You can access the `mockup uuid` from the [Get Mockups API](/api-reference/get-mockups-api.md) or in the URL of our web application editor.