Skip to main content

Studio SDK

View on GitHub

The Studio SDK is a library for creating and editing videos in the browser. It provides a fully interactive editing environment which work with the Shotstack data model.

Interactive Examples​

Try the Shotstack Studio in your preferred framework:

TypeScript React Vue Angular

Installation​

npm install @shotstack/shotstack-studio
yarn add @shotstack/shotstack-studio

Quick Start​

import { Edit, Canvas, Controls } from "@shotstack/shotstack-studio";

// 1. Retrieve an edit from a template
const templateUrl =
  "https://shotstack-assets.s3.amazonaws.com/templates/hello-world/hello.json";
const response = await fetch(templateUrl);
const template = await response.json();

// 2. Initialize the edit with dimensions and background color
const edit = new Edit(template.output.size, template.timeline.background);
await edit.load();

// 3. Create a canvas to display the edit
const canvas = new Canvas(template.output.size, edit);
await canvas.load(); // Renders to [data-shotstack-studio] element

// 4. Load the template
await edit.loadEdit(template);

// 5. Add keyboard controls
const controls = new Controls(edit);
await controls.load();