A JavaScript library for creating and editing videos in the browser.
Try Shotstack Studio in your preferred framework:
npm install @shotstack/shotstack-studioyarn add @shotstack/shotstack-studioimport { 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();Your HTML should include a container with the data-shotstack-studio attribute:
<div data-shotstack-studio></div>- Create video compositions with multiple tracks and clips
- Use in conjunction with the Shotstack Edit API to render video
- Export to video using browser-based FFmpeg
The Edit class represents a video project with its timeline, clips, and properties.
// Create an edit with dimensions and background
const edit = new Edit({ width: 1280, height: 720 }, "#000000");
await edit.load();
// Load from template
await edit.loadEdit(templateJson);
// Playback controls
edit.play();
edit.pause();
edit.seek(2000); // Seek to 2 seconds (in milliseconds)
edit.stop(); // Stop and return to beginning
// Editing functions
edit.addClip(0, {
asset: {
type: "image",
src: "https://example.com/image.jpg"
},
start: 0,
length: 5
});
edit.addTrack(1, { clips: [] });
edit.deleteClip(0, 0);
edit.deleteTrack(1);
// Get edit information
const clip = edit.getClip(0, 0);
const track = edit.getTrack(0);
const editJson = edit.getEdit();
const duration = edit.totalDuration; // in millisecondsThe Canvas class provides the visual rendering of the edit.
// Create and load the canvas
const canvas = new Canvas(edit.size, edit);
await canvas.load();
// Zoom and positioning
canvas.centerEdit();
canvas.zoomToFit();
canvas.setZoom(1.5); // 1.0 is 100%, 0.5 is 50%, etc.The Controls class adds keyboard controls for playback.
const controls = new Controls(edit);
await controls.load();
// Available keyboard controls:
// Space - Play/Pause
// J - Stop
// K - Pause
// L - Play
// Left Arrow - Seek backward
// Right Arrow - Seek forward
// Shift + Arrow - Seek larger amount
// Comma - Step backward one frame
// Period - Step forward one frameThe VideoExporter class exports the edit to a video file.
const exporter = new VideoExporter(edit, canvas);
await exporter.export("my-video.mp4", 25); // filename, fpsTemplates use a JSON format with the following structure:
{
timeline: {
background: "#000000",
fonts: [
{ src: "https://example.com/font.ttf" }
],
tracks: [
{
clips: [
{
asset: {
type: "image", // image, video, text, shape, audio
src: "https://example.com/image.jpg",
// Other asset properties depend on type
},
start: 0, // Start time in seconds
length: 5, // Duration in seconds
transition: { // Optional transitions
in: "fade",
out: "fade"
},
position: "center", // Positioning
scale: 1, // Scale factor
offset: {
x: 0.1, // X-axis offset relative to position
y: 0 // Y-axis offset relative to position
}
}
]
}
]
},
output: {
format: "mp4",
size: {
width: 1280,
height: 720
}
}
}PolyForm Shield License 1.0.0
The Edit class represents a video editing project with its timeline, clips, and properties.
import { Edit } from "@shotstack/shotstack-studio";
import { EditSchema } from "@shotstack/shotstack-studio";constructor(size: Size, backgroundColor: string = "#ffffff")Creates a new Edit instance with the specified dimensions and background color.
assetLoader- Asset loader instance for managing media assetsevents- Event emitter for handling eventsplaybackTime- Current playback position in millisecondstotalDuration- Total duration of the edit in milliseconds
async load()- Initialize and prepare the edit for renderingasync loadEdit(edit: EditType)- Load an edit from a JSON templateplay()- Start playbackpause()- Pause playbackseek(target: number)- Seek to a specific time in millisecondsstop()- Stop playback and return to beginningaddClip(trackIdx: number, clip: ClipType)- Add a clip to a specific trackdeleteClip(trackIdx: number, clipIdx: number)- Delete a clipgetClip(trackIdx: number, clipIdx: number)- Get a clip by track and indexaddTrack(trackIdx: number, track: TrackType)- Add a new trackgetTrack(trackIdx: number)- Get a track by indexdeleteTrack(trackIdx: number)- Delete a trackgetEdit()- Get the full edit configuration as a JSON object
The Canvas class provides the visual rendering of the edit.
import { Canvas } from "@shotstack/shotstack-studio";
import type { Size } from "@shotstack/shotstack-studio";constructor(size: Size, edit: Edit)Creates a new canvas with specified dimensions for rendering the edit.
async load()- Initialize the canvas and add it to the DOMcenterEdit()- Center the edit in the canvaszoomToFit()- Zoom to fit the entire editsetZoom(zoom: number)- Set zoom level
The Controls class adds keyboard controls for playback.
import { Controls } from "@shotstack/shotstack-studio";constructor(edit: Edit)Creates a new controls instance for the provided Edit.
async load()- Set up event listeners for keyboard controls
The VideoExporter class handles exporting the edit to mp4.
import { VideoExporter } from "@shotstack/shotstack-studio";constructor(edit: Edit, canvas: Canvas)Creates a new exporter for the provided Edit and Canvas.
async export(filename: string = "shotstack-export.mp4", fps: number = 25)- Export the edit to a video file
