Don’t build a caption editor. Embed ours.

Q: Can the embedded editor be themed to match our product?

Yes. The setTheme method applies your brand colors and fonts, and you control which toolbar buttons and Quick Tools panels appear, so the embedded editor presents as a native part of the host platform. Flexible pricing options are available, and the team provides free technical support and training throughout the development process.

Give your users broadcast-grade caption and subtitle editing inside your own product. Drop in an iframe, connect with PenPal JS, and drive the editor from a few lines of JavaScript.

Read the integration docs Watch the free course

No backend
30+ caption formats
Free integration support

your-platform.com/projects/42

const remote = await connection.promise;
await remote.importMedia(mediaUrl);
await remote.importSubtitle(url, 'subRip');

Connected via PenPal

setTheme({ primary })

The same editor trusted by broadcasters, studios and media platforms

Quickstart

Live in your app in three steps

No SDK to install, no servers to run. The editor runs in the browser and talks to your page over a secure postMessage bridge.

1
Add PenPal JS
One script tag from a CDN, or npm i penpal.
2
Drop in the iframe
Point it at the editor URL wherever you want editing to happen.
3
Connect and call the API
Load media and captions, apply your theme, and export when users are done.

Read the full getting-started guide

<!-- 1. Add PenPal JS -->
<script src="https://unpkg.com/penpal@^7/dist/penpal.min.js"></script>

<!-- 2. Drop in the editor -->
<iframe id="editor"
  src="https://iframe-demo.closedcaptioncreator.com/"
  allow="autoplay; clipboard-write; clipboard-read; encrypted-media"
  style="width: 100%; height: 90vh; border: 0"
  allowfullscreen></iframe>

// 3. Connect to the editor
const iframe = document.getElementById('editor');

iframe.addEventListener('load', async () => {
  const messenger = new Penpal.WindowMessenger({
    remoteWindow: iframe.contentWindow,
    allowedOrigins: ['https://iframe-demo.closedcaptioncreator.com']
  });

  const connection = Penpal.connect({ messenger, methods: {} });
  const remote = await connection.promise;

  console.log('Editor ready', await remote.getVersion());
});

// Set up the project
await remote.setProjectName('Episode 104');
await remote.setProjectFrameRate(29.97);
await remote.setProjectDropFrame(true);

// Make it look like your product
await remote.setTheme({ primary: '#7c3aed', fontFamily: 'Inter' });

// Load media and captions
await remote.importMedia(mediaUrl, posterUrl);
await remote.importSubtitle(captionUrl, 'subRip');

// ...when the user is done, send captions back to your platform
const { data } = await remote.exportSubtitle('webVtt');

How it works

Your app stays in control

Your page sends commands to the editor and listens for results over PenPal, a small promise-based postMessage library. Your app owns the user, the storage and the workflow. We handle the editing.

Your web app

Auth, storage, billing, workflow

importMedia importSubtitle setTheme

PenPal JS

exportSubtitle getMarkers getSpeakers

Caption editor (iframe)

Editing, timing, styling, QC, export

What your users get

A professional editor on day one

The same timed-text editor broadcasters use in Closed Caption Creator, packaged for your platform.

30+ caption formats

Import and export everything from SRT and WebVTT to SCC, STL, IMSC and other broadcast formats, with no parsers to write or maintain.

Any media source

Cloud storage, HLS and DASH manifests, Mux, Cloudflare Stream, YouTube and Vimeo. Pass a waveform peaks file for an instant timeline.

Looks like your product

Apply brand colors and fonts with setTheme, choose which toolbar buttons and panels appear, and add your own Save and Close actions.

Built-in QC

Load your style guide and let the editor flag reading speed, line length, overlaps and timing issues before captions leave your platform.

Multi-track, multi-language

Import several subtitle tracks and languages into one project, merge or replace event groups, and export each one on its own.

Secure review

Overlay a per-user watermark on the player, restrict origins with PenPal and keep media and captions in your own storage.

Brand it, scope it

Feels native, not bolted on

Show only the tools your users need, in your colors, with your buttons. Every panel can be turned on or off from the host page.

Theme tokens for colors, fonts and links
Configurable toolbar and Quick Tools panels
Host actions that call back into your app
Custom keyboard shortcuts and display settings

Read the theming guide

Build vs. embed

Skip the hardest part of captioning

Frame-accurate timing, broadcast formats and caption QC are deep problems. Your team can spend its time on your product instead.

Building a caption editor in-house compared with embedding Closed Caption Creator
	Embed Closed Caption Creator	Build in-house
Integration effort	An iframe and a few lines of JavaScript	A dedicated front-end team
Caption formats	30+ formats, including broadcast	One parser and encoder per format
Timecode & frame rates	Drop-frame, incode offsets, waveform timeline	Edge cases discovered in production
QC & style guides	Included	Another project on the roadmap
Backend	None required	Conversion services to host and scale
Ongoing maintenance	Updates ship with the editor	Yours, indefinitely

Try it live

Kick the tires before you write a line

This is the same demo editor you’ll point your iframe at during development.

iframe-demo.closedcaptioncreator.com

Best on a desktop browser. Prefer a guided tour? Watch the product walkthrough.

Product walkthrough

API at a glance

70+ promise-based methods

Every method is await-able from your page. Here are the ones most integrations start with.

Browse the full API reference

Load

importMedia(url, poster, type, storage)Video or audio from any supported source
importSubtitle(url, profile, ...)Any of 30+ formats into a new or existing track
setMediaPeaksPath(url)Waveform data for an instant timeline

Brand

setTheme(tokens)Colors, fonts and link styles
configureSecondaryToolbar(layout)Choose and order toolbar icons
setWatermark(settings)Per-user overlay on the player

Control

setParentToolbarActions(actions)Save and Close buttons that call your app
setQuickToolsSettings(settings)Show only the panels you need
loadStyleGuide(guide)Run caption QC against your rules

Export

exportSubtitle(profile, ...)Encoded captions back to your platform
getProjectData()The full project as JSON
hasUnsavedChanges()Guard navigation away from the editor

Start building

Read the docs or watch the course

Everything you need to go from first iframe to production, free.

Documentation

IFrame Remote docs

Setup guides, the full API reference and copy-paste examples for common workflows.

Getting started in four steps
Every remote method, with arguments and return types
Import, export and QC recipes
Theming and branding guide

Introduction Getting started Functions Import & export QC workflows Theming

exportSubtitle()

const res = await remote
  .exportSubtitle('webVtt');
// { success, data, fileName }

Open the docs

Free video course

IFrame Integration for Developers

Introduction0:30
Project setup3:06
Media import3:14
Working with metadata3:23
Subtitle export2:31
Next steps0:54

Start the course 6 lessons · about 14 minutes

Building with an AI coding assistant?

Give Claude, ChatGPT, Cursor or GitHub Copilot our LLM-ready reference: one Markdown file with every remote method, so your assistant writes working code instead of guessing.

Get the AI-ready docs

Who it’s for

Built for platforms that handle video

Video platforms & OVPs

Your players already show captions. Now customers can fix them without downloading files or leaving your app.

MAM & DAM vendors

Add caption editing and review next to the asset, inside the same permissions and workflow your users already know.

Broadcast & playout

Give operators frame-accurate, broadcast-format editing in your web UI, from SCC and STL to IMSC.

IFrame integration questions

Common developer and product questions about embedding the caption editor.

The IFrame Remote is an embeddable subtitle and timed-text editor designed to integrate into web-based applications. The parent application talks to the embedded editor through PenPal JS, so it can programmatically load media, import captions and apply settings, and receive updates such as markers, captions and speakers.

An iframe tag pointing at the editor URL, plus the PenPal JS library for communication. The getting-started flow is three steps: import PenPal JS by NPM or CDN, embed the iframe, then connect and call the remote API. No backend is required.

No. No backend is required to embed the caption editor. The editor runs in the browser inside the iframe, and communication between the host page and the editor happens client-side over PenPal JS, which keeps integration effort to a few lines of code.

The embedded editor loads media from cloud storage, HLS and DASH manifests, Mux, Cloudflare Stream, YouTube and Vimeo. Multiple subtitle tracks and languages can be imported, and finished captions are published back to the host platform through the remote API.

Yes. The setTheme method applies your brand colors and fonts, and you control which toolbar buttons and Quick Tools panels appear, so the embedded editor presents as a native part of the host platform. Flexible pricing options are available, and the team provides free technical support and training throughout the development process.

Over 30 closed caption and subtitle formats, from standard SRT files to specialized broadcast formats. The editor is designed for broadcast manufacturers and video platforms that support captioning but lack professional editing capabilities.

Yes. A free six-lesson developer video course walks through project setup, media import, metadata and subtitle export, and the IFrame Remote documentation includes setup guides, the full API reference and code examples. Free technical support is also available during the integration.

Start your integration

Ship caption editing this sprint

Follow the docs, watch the course, and talk to our engineers whenever you need a hand. Integration support is free.

Read the integration docs Watch the free course Talk to an engineer