# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.dynamicmockups.com/mockup-editor-sdk/embed-editor.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.