embed_mockup_editor
Embed product mockup editors into websites and apps for customization features using iframe, SDK, or API integration methods.
Instructions
Get comprehensive knowledge for embedding the Dynamic Mockups Editor into websites and apps.
WHEN TO USE: Call this when user asks about:
Embedding a mockup editor in their website/app
Adding product customization/personalization features
Integrating the Classic Editor or MockAnything (AI) Editor
iFrame integration for mockup editing
Handling editor events and callbacks
React/Vue/JavaScript integration examples
TWO EDITOR TYPES:
Classic Editor: Template-based mockups from your catalog
MockAnything Editor: AI-powered - turn any image into a mockup
INTEGRATION APPROACHES:
CDN: Quick setup with script tag from jsdelivr
NPM: @dynamic-mockups/mockup-editor-sdk package for frameworks
API: Dynamic initialization via /mock-anything/embed/initialize endpoint
TOPICS AVAILABLE:
quick_start: Basic iframe + SDK setup (CDN method)
npm_integration: NPM package installation and usage
data_options: All configuration options for customizing editor behavior
callback_response: Handling export events when mode="custom"
mockanything_api: Dynamic editor initialization via API
mockanything_events: Event system for MockAnything editor
react_example: Complete React component example
all: Complete knowledge base
This tool does NOT require an API call - returns cached knowledge instantly.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| topic | No | Specific topic to retrieve. Use 'quick_start' for basic setup, 'integration_steps' for step-by-step guides, 'data_options' for configuration, 'mockanything_api' for AI editor API integration, 'react_example' for React code. Use 'all' for complete knowledge base. |