MP4E Studio - Interactive Video Editor

Overview

Plugins are the UI building blocks of MP4E. Studio includes core plugins, supports marketplace plugins, and lets you create fully custom plugins with HTML/CSS/JS.

Plugins are reusable

Once you create a plugin, you can apply it to multiple overlays (and ship it with the MP4E metadata).

Where to Find Plugins in Studio

Open Library → Plugins to manage your plugin collection. Overlays are created in Library → Overlays and can use your custom plugins.

Create a Plugin

In the Plugins panel, you can create a plugin from scratch or from a starter template (overlay/modal/display).

Edit HTML/CSS/JS

Custom plugins render inside an isolated iframe. You can style freely, wire click handlers, read variables, and execute actions through the MP4E bridge API.

Prefer templates for rendering, scripts for behavior

Use {{variableId}} templates for text/content and keep JavaScript focused on interactions and calling mp4e.executeActions().

Config Schema and Outputs

Plugins define a configSchema for configurable properties and outputs for values the plugin can set. Studio generates a clean editor UI from the schema.

Import / Export / Fork

The Plugins panel supports:

Import a plugin package
Export a plugin to share with teammates
Fork a plugin (great for customizing marketplace plugins)
Duplicate for quick iteration

Runtime API

Custom plugin scripts get a global mp4e API for reading data, controlling playback/navigation, and executing actions.

mp4e API (high level)

1// Inside custom plugin scripts (iframe), you have:
2// - mp4e.getVariable(id)
3// - mp4e.setVariable(id, value)
4// - mp4e.executeActions([...])
5// - mp4e.goToScene(sceneId)
6// - mp4e.seekToTime(seconds)
7// - mp4e.openUrl(url, target?)
8// - mp4e.getData()   // overlay/object data payload
9// - mp4e.getConfig() // plugin config
10//
11// Full reference:
12// /docs/plugins/api

Plugin API Reference (Studio)

The Plugin Editor’s “Plugin API Reference” panel documents the exact runtime bridge available inside custom plugin iframes. This is the same API you use in your plugin’s JavaScript.

Important: async vs sync

In Studio, most mp4e.* methods are async because they cross the iframe boundary viapostMessage. Use await for reads like getVariable, getStats, getCurrentTime, and getCurrentFrame. getConfig() and getData() are synchronous.

Data you always have

object: the triggering object (for displays/overlays). For modals, it may be null.
mp4e.getData(): returns { object, groups }.
mp4e.getConfig(): returns your plugin config (from the Plugin Settings UI / overrides).

Studio plugin API quick reference

1// In Studio (and in the runtime iframe bridge), most mp4e methods are async:
2
3// Sync (available immediately)
4const config = mp4e.getConfig()
5const data = mp4e.getData() // { object, groups }
6// Convenience global:
7// object === data.object
8
9// Async (cross-iframe bridge)
10const score = await mp4e.getVariable('score')
11await mp4e.setVariable('selectedProductId', object?.id)
12
13// Execute actions (fire-and-forget)
14mp4e.executeActions([
15  { type: 'showCustomModal', pluginId: 'modal_checkout' },
16])
17
18// Navigation / playback
19await mp4e.getCurrentTime()
20await mp4e.getCurrentFrame()
21mp4e.seekToTime(30.5)
22mp4e.goToScene('scene_demo')
23mp4e.pauseVideo()
24mp4e.playVideo()
25
26// Analytics / debugging
27mp4e.emit('checkout:started', { sku: object?.data?.sku })
28mp4e.log('Plugin ready')

Full reference (complete list + examples)

See Plugin API Reference.