Creatomate
JavaScript SDK

Add Interactive Editing to
Your Web Application

Embed browser-based previewing and editing into your apps with the Creatomate JavaScript SDK.

Get started →Read the tutorials
player.js
const player = new Renderer(htmlElement, 'player', '...');
 
await player.loadTemplate('...');
 
await player.setModifications({
'My-Text': 'Your Text And Video Here',
'Bg-Video': 'https://example.com/video.mp4'
});
 
await player.play();
How it works

From template to interactive browser experience

Load any template into the SDK, let your users customise it in the browser, then send it for rendering with a single API call.

Step 01

Load a template

Initialise the SDK in your app and load any Creatomate template with a single method call.

Step 02

Customise in the browser

Apply modifications and show a live interactive preview directly inside your web application.

Step 03

Render the final output

Send the customised template to the API and get back a finished MP4, image, or other format.

What you can build

A modular component for any video-powered app

The SDK is the same component that powers the Creatomate editor, forms, and feeds. Use it to build your own.

Use case 01
◈

Build a full-featured video editor that runs entirely in the browser

Use case 02
▶

Show a live preview of a personalised video before the user submits it for rendering

Use case 03
▦

Let users customise a template without leaving your app

Use case 04
◉

Embed an interactive video player that reflects real-time data changes

Use case 05
△

Power a white-label video creation tool with your own branding and UI

Use case 06
▤

Add video previewing to a form or wizard so users see the result before downloading

Ready to build your first video app?

Pick any template to get started, or build your own in the template editor and load it straight into the SDK.

Get started for free →Read the tutorials