MockAnything Configuration

MockAnything is a powerful embeddable AI mockup editor that lets you turn any image into a professional, customizable product mockup directly inside your website or app. Easily embed the full editor via iFrame, image upload, prompt, or API call, and instantly give users a complete AI-powered mockup creation experience.

With advanced AI tools, you can change ethnicity, modify scenes or pose, replace environments, and enhance your original photo with natural, photorealistic results. Add your own artwork, switch product colors, and export a single mockup or a full AI-generated photoshoot in seconds.

MockAnything also includes smart product detection that automatically identifies product and unlocks real manufacturer color options, making it ideal for e-commerce, print-on-demand, apparel, packaging, and product designers who need accurate, brand-friendly variations.

Embed MockAnything once and offer your users a complete, production-ready mockup studio anywhere.

Here’s how AI credits work:

• Prompt Image Generation uses SeeDream 4.0 - 3 credits per generation

• Editor AI Tools (scene change, ethnicity, camera angle, environment, etc.) use NanoBanana - 5 credits per edit

• AI Photoshoot Generation - 3 credits per generated variation

• Mockup Tools Are Free - artwork placement, product color changes (including real manufacturer colors), smart detection, and exports do not cost credits.

Overview

MockAnything is a powerful embeddable AI mockup editor that can turn any image into a fully editable, production-ready mockup. You can start the editor in two ways:

1. Iframe Embed (Direct Integration)

   1. Embed the editor using a static iframe—ideal for simple integrations.

2. API-initialized Editor (Dynamic Integration)

   1. Call our API with parameters like prompt, image_url, or artwork_url.

   2. The API responds with:

      1. HTML for your iframe

      2. A dynamic initialization script

      3. A unique event listener name

   3. This gives you full control to inject the editor anywhere in your UI.

This document explains both approaches, editor configuration, event listeners, and how to handle authentication.

Quick Start: Two Ways to Launch the Editor

1. Static iframe Embed

You can change the default behavior of the Embedded Editor by changing the object inside the initDynamicMockupsIframe function from SDK.

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

Field	Default	Required	Type	Description
iframeId	dm-iframe	true	string	ID of iFrame element
data		true	object	Change embeded editor behaviour

data

data parameter allows you to change the functionality inside the embedded editor:

Field	Default	Required	Type	Description
x-website-key	""	yes	string	Connect the embed editor with Dynamic Mockups. Generate free website-key on your account here .
editorType	"classic"	no	"classic" | "mockanything"	Editor type. It can be used as classic or mockanything editor.
themeAppearance	"light"	no	"light" | "dark"	Theme appearance: 'dark' or 'light'. If specified, it overrides the setting configured via account dashboard.

data example

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

2. JS / API Approach (Dynamic Editor Injection)

You can initialize the editor using a backend call that returns:

• iframe_editor → HTML for the iframe

• init_function → Script that binds the editor’s internal logic

• event_listener_name → Unique listener for postMessage events

This approach allows:

• Passing dynamic prompts

• Starting from an uploaded image

• Passing artwork

• Integrating deeply inside React, Vue, or any JS framework

API Endpoint

POST /api/v1/mock-anything/embed/initialize

Example Payload

{
    "prompt": "A guy wearing a Gildan 5000 in Belgrade",
    "artwork_url": "https://example.com/my-logo.png"
}

Example Response

{
  "data": {
    "iframe_editor": "<iframe ...>",
    "init_function": "window.initDynamicMockupsIframe(...)",
    "event_listener_name": "dm_174829182"
  }
}

Field	Description
event_listener_name	The identifier you use to listen for events from this specific editor instance
iframe_editor	Fully prepared iframe HTML you can inject directly into the DOM
init_function	JavaScript bootstrap that connects the iframe, events, and internal editor logic

Full Example (React)

import { useState, useEffect } from "react";
import { initDynamicMockupsIframe } from "../package";

// Expose init function globally for iframe communication
(window as any).initDynamicMockupsIframe = initDynamicMockupsIframe;

interface ApiResponse {
  event_listener_name: string;
  iframe_editor: string;
  init_function: string;
}

export default function ApiVersion() {
  const [isLoading, setIsLoading] = useState(false);
  const [prompt, setPrompt] = useState(
    "A guy wearing a Gildan 5000 t-shirt near St. Sava temple in Belgrade."
  );

  const [iframeData, setIframeData] = useState<ApiResponse>({
    event_listener_name: "",
    iframe_editor: "",
    init_function: "",
  });

  /** ----------------------------------------------------------------
   *  1) Call Dynamic Mockups API
   *  ---------------------------------------------------------------- */
  const requestEditorSession = async (): Promise<ApiResponse> => {
    const response = await fetch(
      "https://app.dynamicmockups.com/api/v1/mock-anything/embed/initialize",
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "x-api-key": "YOUR_API_KEY",
        },
        body: JSON.stringify({
          prompt,
          artwork_url:
            "https://app-dynamicmockups-production.s3.eu-central-1.amazonaws.com/static/api_sandbox_icon.png",
        }),
      }
    );

    if (!response.ok) {
      throw new Error("Dynamic Mockups API failed: " + response.status);
    }

    const result = await response.json();
    return result.data;
  };

  /** ----------------------------------------------------------------
   *  2) Load editor + run init function
   *  ---------------------------------------------------------------- */
  const launchEditor = async () => {
    setIsLoading(true);
    try {
      const data = await requestEditorSession();
      setIframeData(data);

      // Ensure iframe is present before running init
      setTimeout(() => {
        eval(data.init_function);
      }, 100);
    } catch (err) {
      console.error("Editor initialization failed:", err);
    } finally {
      setIsLoading(false);
    }
  };

  /** ----------------------------------------------------------------
   *  3) Listen for iframe events (image exports, etc.)
   *  ---------------------------------------------------------------- */
  useEffect(() => {
    const handleMessage = (event: MessageEvent) => {
      const isEditorEvent =
        event.data?.eventListenerName === iframeData.event_listener_name;

      if (!isEditorEvent) return;

      const payload = event.data.data;
      console.log("Editor event:", payload);
    };

    window.addEventListener("message", handleMessage);
    return () => window.removeEventListener("message", handleMessage);
  }, [iframeData.event_listener_name]);

  /** ----------------------------------------------------------------
   *  Render
   *  ---------------------------------------------------------------- */
  return (
    <div style={{ padding: "24px" }}>
      <button onClick={launchEditor} disabled={isLoading}>
        {isLoading ? "Loading…" : "Load Editor"}
      </button>
      {/* Inject returned iframe */}
      <div
        dangerouslySetInnerHTML={{
          __html: iframeData.iframe_editor,
        }}
      />
    </div>
  );
}

Event System

Each editor instance receives a unique event listener key.

You listen like this:

window.addEventListener("message", (event) => {
  if (event.data.eventListenerName === iframeData.event_listener_name) {
    console.log(event.data.data);
  }
});

Events include:

• editor_ready

• export_completed

• photoshoot_completed

• artwork_updated

• variant_changed