### Complete Shotstack Studio SDK Setup Example (HTML & TypeScript)
Source: https://context7.com/shotstack/shotstack-studio-sdk/llms.txt
A full application setup example demonstrating the integration of various Shotstack Studio SDK components, including Edit, Canvas, Timeline, Controls, and VideoExporter. It shows how to initialize the editor, load a template, set up UI elements like an export button, and listen for editor events. This example requires an HTML file with specific container elements.
```html
Video Editor
```
```typescript
import { Edit, Canvas, Timeline, Controls, VideoExporter } from "@shotstack/shotstack-studio";
async function initializeEditor() {
// 1. Create edit
const edit = new Edit({ width: 1920, height: 1080 }, "#000000");
await edit.load();
// 2. Load template
const response = await fetch("https://example.com/template.json");
const template = await response.json();
await edit.loadEdit(template);
// 3. Create canvas
const canvas = new Canvas({ width: 1920, height: 1080 }, edit);
await canvas.load();
canvas.centerEdit();
canvas.zoomToFit();
// 4. Create timeline
const timeline = new Timeline(edit, { width: 1280, height: 300 });
await timeline.load();
// 5. Add keyboard controls
const controls = new Controls(edit);
await controls.load();
// 6. Setup export functionality
const exportButton = document.getElementById("export-btn");
exportButton?.addEventListener("click", async () => {
const exporter = new VideoExporter(edit, canvas);
await exporter.export("output.mp4", 30);
});
// 7. Listen to events
edit.events.on("clip:selected", ({ clip, trackIndex, clipIndex }) => {
console.log("Selected clip:", clip);
});
edit.events.on("clip:updated", ({ previous, current }) => {
console.log("Clip updated");
});
}
initializeEditor().catch(console.error);
```
--------------------------------
### Install Shotstack Studio SDK
Source: https://github.com/shotstack/shotstack-studio-sdk/blob/main/readme.md
Instructions for installing the Shotstack Studio SDK using npm or yarn package managers. Ensure you have Node.js and npm/yarn installed to use these commands.
```bash
npm install @shotstack/shotstack-studio
```
```bash
yarn add @shotstack/shotstack-studio
```
--------------------------------
### Initialize and Load Timeline - TypeScript
Source: https://github.com/shotstack/shotstack-studio-sdk/blob/main/readme.md
Provides an example of creating and loading the Timeline component for visual editing. It requires an 'edit' object and configuration for dimensions, and utilizes the Timeline class from '@shotstack/shotstack-studio'.
```typescript
import { Timeline } from "@shotstack/shotstack-studio";
const timeline = new Timeline(edit, { width: 1280, height: 300 });
await timeline.load();
// Timeline features:
// - Visual track and clip representation
// - Drag-and-drop clip manipulation
// - Clip resizing with edge detection
// - Playhead control for navigation
// - Snap-to-grid functionality
// - Zoom and scroll controls
```
--------------------------------
### Initialize Shotstack Studio Edit, Canvas, Timeline, and Controls
Source: https://github.com/shotstack/shotstack-studio-sdk/blob/main/readme.md
A comprehensive TypeScript example demonstrating the initialization of key Shotstack Studio components. It covers loading a template, setting up the edit, rendering the canvas, and initializing the timeline and playback controls. This snippet requires a template JSON file and HTML elements with specific data attributes.
```typescript
import { Edit, Canvas, Controls, Timeline } from "@shotstack/shotstack-studio";
// 1. Load a template
const response = await fetch("https://shotstack-assets.s3.amazonaws.com/templates/hello-world/hello.json");
const template = await response.json();
// 2. Initialize the edit
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. Initialize the Timeline
const timeline = new Timeline(edit, { width: 1280, height: 300 });
await timeline.load(); // Renders to [data-shotstack-timeline] element
// 6. Add keyboard controls
const controls = new Controls(edit);
await controls.load();
```
--------------------------------
### Initializing Edit Instance in Shotstack Studio SDK
Source: https://github.com/shotstack/shotstack-studio-sdk/blob/main/readme.md
Constructs a new `Edit` instance, which represents a video editing project. It requires `size` dimensions and an optional `backgroundColor`. This is the starting point for building a video.
```typescript
constructor(size: Size, backgroundColor: string = "#ffffff")
```
--------------------------------
### Create Interactive Visual Timelines with Shotstack SDK
Source: https://context7.com/shotstack/shotstack-studio-sdk/llms.txt
Provides an example of initializing the Timeline component for visual video editing. It outlines the required HTML structure and explains the core features such as drag-and-drop manipulation, resizing, and playback scrubbing. The dispose method is used for cleanup.
```typescript
import { Timeline } from "@shotstack/shotstack-studio";
// HTML setup required
//
// Create timeline
const timeline = new Timeline(edit, { width: 1280, height: 300 });
await timeline.load();
// The timeline provides:
// - Visual track and clip representation
// - Drag-and-drop clip manipulation
// - Clip resizing with handles
// - Playhead scrubbing
// - Snap-to-grid functionality
// - Zoom and scroll controls
// Clean up when done
timeline.dispose();
```
--------------------------------
### Add Audio Clip to Video Template (JSON)
Source: https://context7.com/shotstack/shotstack-studio-sdk/llms.txt
Demonstrates adding an audio asset to a video template. This includes the source URL for the audio file and volume control. The clip specifies its start time and duration within the timeline.
```json
{
"timeline": {
"tracks": [
{
"clips": [
{
"asset": {
"type": "audio",
"src": "https://example.com/music.mp3",
"volume": 0.5
},
"start": 0,
"length": 10
}
]
}
]
},
"output": {
"format": "mp4",
"size": {
"width": 1920,
"height": 1080
}
}
}
```
--------------------------------
### Add Rich Text Clip with Animation (JSON)
Source: https://context7.com/shotstack/shotstack-studio-sdk/llms.txt
Illustrates adding animated rich text to a video template. This example includes custom font loading, advanced text styling (letter spacing, transform, line height), background options, alignment, and animation presets like 'typewriter'. Pixel ratio and caching are also configurable.
```json
{
"timeline": {
"fonts": [
{
"src": "https://example.com/Roboto-Regular.ttf"
}
],
"tracks": [
{
"clips": [
{
"asset": {
"type": "rich-text",
"text": "Welcome to Text Animation!",
"width": 800,
"height": 400,
"font": {
"family": "Roboto",
"size": 48,
"weight": "400",
"style": "normal",
"color": "#ffffff",
"opacity": 1
},
"style": {
"letterSpacing": 0,
"lineHeight": 1.5,
"textTransform": "none"
},
"background": {
"color": "#1a1a2e",
"opacity": 1,
"borderRadius": 0
},
"align": {
"horizontal": "center",
"vertical": "middle"
},
"animation": {
"preset": "typewriter",
"speed": 1,
"duration": 3,
"style": "character"
},
"pixelRatio": 2,
"cacheEnabled": true
},
"start": 0,
"length": 4
}
]
}
]
},
"output": {
"format": "mp4",
"size": {
"width": 1920,
"height": 1080
}
}
}
```
--------------------------------
### Add Text Clip to Video Template (JSON)
Source: https://context7.com/shotstack/shotstack-studio-sdk/llms.txt
Shows how to add a text overlay to a video template. This includes text content, dimensions, font styling (family, size, color, weight, line height), alignment, background, and stroke properties. It also defines start time, duration, position, and transitions for the text clip.
```json
{
"timeline": {
"tracks": [
{
"clips": [
{
"asset": {
"type": "text",
"text": "Hello World",
"width": 800,
"height": 200,
"font": {
"family": "Arial",
"size": 72,
"color": "#ffffff",
"weight": 700,
"lineHeight": 1.2
},
"alignment": {
"horizontal": "center",
"vertical": "center"
},
"background": {
"color": "#000000",
"opacity": 0.8
},
"stroke": {
"width": 2,
"color": "#ff0000"
}
},
"start": 1,
"length": 3,
"position": "center",
"transition": {
"in": "fade",
"out": "fade"
}
}
]
}
]
},
"output": {
"format": "mp4",
"size": {
"width": 1920,
"height": 1080
}
}
}
```
--------------------------------
### Dynamically Add, Update, and Remove Clips with Shotstack Studio SDK (TypeScript)
Source: https://context7.com/shotstack/shotstack-studio-sdk/llms.txt
Demonstrates how to programmatically manipulate video clips and tracks within an editing session using the Shotstack Studio SDK. This includes adding new tracks and clips, specifying asset sources, start times, lengths, and styling for text overlays. It also covers deleting clips and tracks, exporting the edit as JSON, and sending it to an API endpoint.
```typescript
import { Edit } from "@shotstack/shotstack-studio";
const edit = new Edit({ width: 1920, height: 1080 }, "#000000");
await edit.load();
// Add a new track
edit.addTrack(0, { clips: [] });
// Add clips programmatically
edit.addClip(0, {
asset: {
type: "video",
src: "https://example.com/intro.mp4"
},
start: 0,
length: 3
});
edit.addClip(0, {
asset: {
type: "video",
src: "https://example.com/main.mp4"
},
start: 3,
length: 7
});
// Add text overlay on another track
edit.addTrack(1, { clips: [] });
edit.addClip(1, {
asset: {
type: "text",
text: "Chapter 1",
font: {
family: "Arial",
size: 60,
color: "#ffffff"
}
},
start: 0,
length: 2,
position: "bottomLeft",
offset: { x: 0.05, y: -0.05 }
});
// Delete a clip
edit.deleteClip(0, 1); // Remove second clip from first track
// Delete a track
edit.deleteTrack(1);
// Get current edit as JSON
const exportJson = edit.getEdit();
console.log(JSON.stringify(exportJson, null, 2));
// Save to file or API
fetch("https://api.example.com/save", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(exportJson)
});
```
--------------------------------
### Export Video to MP4 in Browser (TypeScript)
Source: https://context7.com/shotstack/shotstack-studio-sdk/llms.txt
Exports an edited video to MP4 format directly in the browser using the VideoExporter. This functionality requires the browser to support the WebCodecs API. The example shows how to create an exporter instance and initiate the export process with a specified filename and frame rate, including error handling for browser compatibility.
```typescript
import { VideoExporter } from "@shotstack/shotstack-studio";
// Create exporter with edit and canvas
const exporter = new VideoExporter(edit, canvas);
// Export to MP4 (requires WebCodecs API support)
try {
await exporter.export("my-video.mp4", 30); // filename, fps
console.log("Export complete!");
} catch (error) {
if (error.name === "BrowserCompatibilityError") {
console.error("Browser does not support WebCodecs API");
} else {
console.error("Export failed:", error);
}
}
```
--------------------------------
### Shotstack Studio Edit Class: Initialization and Playback
Source: https://github.com/shotstack/shotstack-studio-sdk/blob/main/readme.md
Demonstrates the initialization of the Shotstack Studio `Edit` class, loading edits from JSON, and controlling playback. This involves creating an `Edit` instance, loading it, and using methods like `play`, `pause`, `seek`, and `stop`.
```typescript
// 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
```
--------------------------------
### Initializing Controls Instance in Shotstack Studio SDK
Source: https://github.com/shotstack/shotstack-studio-sdk/blob/main/readme.md
Constructs a new `Controls` instance, linking it to an existing `Edit` object to provide keyboard-based playback control. The `load` method activates the event listeners.
```typescript
constructor(edit: Edit)
```
--------------------------------
### Initializing Timeline Instance in Shotstack Studio SDK
Source: https://github.com/shotstack/shotstack-studio-sdk/blob/main/readme.md
Creates a new `Timeline` instance, which visualizes the video editing process. It requires an `Edit` object, a `size` for the timeline display, and optional `themeOptions`.
```typescript
constructor(edit: Edit, size: { width: number, height: number }, themeOptions?: TimelineThemeOptions)
```
--------------------------------
### Create and Manage Video Edits with Shotstack Studio SDK
Source: https://context7.com/shotstack/shotstack-studio-sdk/llms.txt
Demonstrates how to create a new video edit, load templates, add various asset types (video, text), control playback, retrieve edit information, and manage undo/redo operations. It also shows how to listen for editing events.
```typescript
import { Edit } from "@shotstack/shotstack-studio";
// Create a new edit with dimensions and background color
const edit = new Edit({ width: 1920, height: 1080 }, "#000000");
await edit.load();
// Load a template from JSON
const response = await fetch("https://example.com/template.json");
const template = await response.json();
await edit.loadEdit(template);
// Add clips to tracks
edit.addClip(0, {
asset: {
type: "video",
src: "https://example.com/video.mp4"
},
start: 0,
length: 5
});
edit.addClip(1, {
asset: {
type: "text",
text: "Hello World",
font: {
family: "Arial",
size: 72,
color: "#ffffff"
}
},
start: 1,
length: 3,
position: "center"
});
// Playback controls
edit.play();
edit.pause();
edit.seek(2500); // Seek to 2.5 seconds (in milliseconds)
edit.stop();
// Get edit information
const currentClip = edit.getClip(0, 0);
const track = edit.getTrack(0);
const totalDuration = edit.totalDuration; // in milliseconds
const editJson = edit.getEdit();
// Undo/Redo operations
edit.undo();
edit.redo();
// Listen to events
edit.events.on("clip:selected", ({ clip, trackIndex, clipIndex }) => {
console.log(`Clip selected at track ${trackIndex}, position ${clipIndex}`);
});
edit.events.on("clip:updated", ({ previous, current }) => {
console.log("Clip updated from:", previous, "to:", current);
});
```
--------------------------------
### Controls Class API
Source: https://github.com/shotstack/shotstack-studio-sdk/blob/main/readme.md
Documentation for the `Controls` class, which adds keyboard controls for video playback.
```APIDOC
## Controls Class
The `Controls` class adds keyboard controls for playback.
### Constructor
```typescript
constructor(edit: Edit)
```
Creates a new controls instance for the provided Edit.
### Methods
- `async load()` - Set up event listeners for keyboard controls
```
--------------------------------
### Initialize and Control Canvas - TypeScript
Source: https://github.com/shotstack/shotstack-studio-sdk/blob/main/readme.md
Demonstrates how to create, load, center, zoom, and dispose of the Canvas component for visual rendering of an edit. Requires an 'edit' object and manages rendering resources.
```typescript
const canvas = new Canvas(edit.size, edit);
await canvas.load();
canvas.centerEdit();
canvas.zoomToFit();
canvas.setZoom(1.5); // 1.0 is 100%, 0.5 is 50%, etc.
canvas.dispose(); // Clean up resources when done
```
--------------------------------
### Keyframe Animations for Images with Shotstack Studio SDK
Source: https://context7.com/shotstack/shotstack-studio-sdk/llms.txt
Demonstrates how to apply keyframe animations to an image, controlling properties like scale, opacity, offset, and rotation over time. This allows for dynamic visual effects within video scenes.
```json
{
"timeline": {
"tracks": [
{
"clips": [
{
"asset": {
"type": "image",
"src": "https://example.com/image.jpg"
},
"start": 0,
"length": 5,
"position": "center",
"scale": [
{
"from": 1,
"to": 1.5,
"start": 0,
"end": 2.5,
"curve": "easeInOut"
},
{
"from": 1.5,
"to": 1,
"start": 2.5,
"end": 5,
"curve": "easeInOut"
}
],
"opacity": [
{
"from": 0,
"to": 1,
"start": 0,
"end": 1,
"curve": "easeIn"
},
{
"from": 1,
"to": 0,
"start": 4,
"end": 5,
"curve": "easeOut"
}
],
"offset": {
"x": [
{
"from": -0.5,
"to": 0.5,
"start": 0,
"end": 5,
"curve": "linear"
}
],
"y": 0
},
"transform": {
"rotate": {
"angle": [
{
"from": 0,
"to": 360,
"start": 0,
"end": 5,
"curve": "linear"
}
]
}
}
}
]
}
]
},
"output": {
"format": "mp4",
"size": {
"width": 1920,
"height": 1080
}
}
}
```
--------------------------------
### Initialize Keyboard Controls for Video Editing (TypeScript)
Source: https://context7.com/shotstack/shotstack-studio-sdk/llms.txt
Initializes keyboard controls for video editing and playback within the Shotstack Studio SDK. It loads the controls and provides a list of available keyboard shortcuts for common editing actions like play/pause, seeking, undo/redo, and deletion.
```typescript
import { Controls } from "@shotstack/shotstack-studio";
// Initialize keyboard controls
const controls = new Controls(edit);
await controls.load();
// Available keyboard shortcuts:
// Space - Play/Pause toggle
// J - Stop and return to beginning
// K - Pause
// L - Play
// Left Arrow - Seek backward
// Right Arrow - Seek forward
// Shift + Arrow - Seek larger amount
// Cmd/Ctrl + Left Arrow - Seek to beginning
// Cmd/Ctrl + Right Arrow - Seek to end
// Comma (,) - Step backward one frame
// Period (.) - Step forward one frame
// Cmd/Ctrl + Z - Undo
// Cmd/Ctrl + Shift + Z - Redo
// Delete/Backspace - Delete selected clip
```
--------------------------------
### Add Keyboard Controls for Playback - TypeScript
Source: https://github.com/shotstack/shotstack-studio-sdk/blob/main/readme.md
Shows how to instantiate and load the Controls class to enable keyboard shortcuts for video playback within the Shotstack Studio editor. It relies on an existing 'edit' object.
```typescript
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 frame
// Cmd/Ctrl + Z - Undo
// Cmd/Ctrl + Shift + Z - Redo
// Cmd/Ctrl + E - Export/download video
```
--------------------------------
### Initializing Canvas Instance in Shotstack Studio SDK
Source: https://github.com/shotstack/shotstack-studio-sdk/blob/main/readme.md
Creates a new `Canvas` instance used for rendering the video edit visually. It requires `size` dimensions and an `Edit` object to render. The `load` method adds it to the DOM.
```typescript
constructor(size: Size, edit: Edit)
```
--------------------------------
### Multi-track Video Composition using Shotstack Studio SDK
Source: https://context7.com/shotstack/shotstack-studio-sdk/llms.txt
Defines a video composition with multiple tracks, including background video, overlay images, text scenes with transitions, and background audio. This structure allows for layered content and synchronized playback.
```json
{
"timeline": {
"background": "#000000",
"tracks": [
{
"clips": [
{
"asset": {
"type": "video",
"src": "https://example.com/background.mp4",
"volume": 0.3
},
"start": 0,
"length": 10,
"position": "center",
"fit": "cover"
}
]
},
{
"clips": [
{
"asset": {
"type": "image",
"src": "https://example.com/logo.png"
},
"start": 0,
"length": 10,
"position": "topLeft",
"scale": 0.3,
"offset": {
"x": 0.05,
"y": 0.05
}
}
]
},
{
"clips": [
{
"asset": {
"type": "text",
"text": "Scene 1",
"font": {
"family": "Arial",
"size": 48,
"color": "#ffffff"
}
},
"start": 0,
"length": 3,
"position": "center",
"transition": {
"in": "fade",
"out": "fade"
}
},
{
"asset": {
"type": "text",
"text": "Scene 2",
"font": {
"family": "Arial",
"size": 48,
"color": "#ffffff"
}
},
"start": 3,
"length": 3,
"position": "center",
"transition": {
"in": "fade",
"out": "fade"
}
}
]
},
{
"clips": [
{
"asset": {
"type": "audio",
"src": "https://example.com/background-music.mp3",
"volume": 0.6
},
"start": 0,
"length": 10
}
]
}
]
},
"output": {
"format": "mp4",
"fps": 30,
"size": {
"width": 1920,
"height": 1080
}
}
}
```
--------------------------------
### Add Video Clip with Trim, Crop, and Volume Controls (JSON)
Source: https://context7.com/shotstack/shotstack-studio-sdk/llms.txt
Illustrates how to add a video clip to a Shotstack JSON template, including detailed controls for asset source, trimming, cropping, and volume. It also covers clip timing, positioning, scaling, opacity, and transitions for both in and out effects.
```json
{
"timeline": {
"tracks": [
{
"clips": [
{
"asset": {
"type": "video",
"src": "https://example.com/video.mp4",
"trim": 2.5,
"volume": 0.8,
"crop": {
"top": 0.1,
"left": 0.1,
"right": 0.1,
"bottom": 0.1
}
},
"start": 0,
"length": 5,
"position": "center",
"fit": "crop",
"scale": 1.2,
"opacity": 1,
"offset": {
"x": 0,
"y": 0
},
"transition": {
"in": "fade",
"out": "fade"
}
}
]
}
]
},
"output": {
"format": "mp4",
"size": {
"width": 1920,
"height": 1080
}
}
}
```
--------------------------------
### Initializing VideoExporter Instance in Shotstack Studio SDK
Source: https://github.com/shotstack/shotstack-studio-sdk/blob/main/readme.md
Constructs a new `VideoExporter` instance, which facilitates the export process. It requires both an `Edit` object and a `Canvas` object representing the video content.
```typescript
constructor(edit: Edit, canvas: Canvas)
```
--------------------------------
### Define Basic Video Composition Structure (JSON)
Source: https://context7.com/shotstack/shotstack-studio-sdk/llms.txt
Defines the basic structure for video compositions using JSON templates for the Shotstack SDK. This includes setting the timeline background, defining custom fonts, and structuring tracks with an array of clips. It also specifies output format, FPS, and video dimensions.
```json
{
"timeline": {
"background": "#000000",
"fonts": [
{
"src": "https://example.com/custom-font.ttf"
}
],
"tracks": [
{
"clips": []
}
]
},
"output": {
"format": "mp4",
"fps": 30,
"size": {
"width": 1920,
"height": 1080
}
}
}
```
--------------------------------
### HTML Structure for Shotstack Studio
Source: https://github.com/shotstack/shotstack-studio-sdk/blob/main/readme.md
Basic HTML structure required to host the Shotstack Studio canvas and timeline. The `div` elements with `data-shotstack-studio` and `data-shotstack-timeline` attributes serve as mounting points for the SDK components.
```html
```
--------------------------------
### Template Structure for Video Editing JSON
Source: https://github.com/shotstack/shotstack-studio-sdk/blob/main/readme.md
Defines the JSON structure for creating video templates. It includes timeline settings, assets, tracks, clips, transitions, and output configurations. Dependencies include basic JSON data types.
```typescript
{
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
}
}
}
```
--------------------------------
### Importing Canvas and Size Types from Shotstack Studio SDK
Source: https://github.com/shotstack/shotstack-studio-sdk/blob/main/readme.md
Imports the `Canvas` class and the `Size` type from the '@shotstack/shotstack-studio' package. These are necessary for creating and configuring the visual rendering component of the video editor.
```typescript
import { Canvas } from "@shotstack/shotstack-studio";
import type { Size } from "@shotstack/shotstack-studio";
```
--------------------------------
### Apply Dark Theme to Timeline - TypeScript
Source: https://github.com/shotstack/shotstack-studio-sdk/blob/main/readme.md
Shows how to apply a pre-built dark theme to the Timeline component during its initialization. It imports the Timeline class and the darkTheme JSON object from the SDK.
```typescript
import { Timeline } from "@shotstack/shotstack-studio";
import darkTheme from "@shotstack/shotstack-studio/themes/dark.json";
import minimalTheme from "@shotstack/shotstack-studio/themes/minimal.json";
// Apply a theme when creating the timeline
const timeline = new Timeline(edit, { width: 1280, height: 300 }, { theme: darkTheme });
```
--------------------------------
### Timeline Class API
Source: https://github.com/shotstack/shotstack-studio-sdk/blob/main/readme.md
API reference for the `Timeline` class, offering a visual interface for video editing timelines.
```APIDOC
## Timeline Class
The `Timeline` class provides a visual timeline interface for video editing.
### Constructor
```typescript
constructor(edit: Edit, size: { width: number, height: number }, themeOptions?: TimelineThemeOptions)
```
Creates a new timeline interface for the provided Edit.
### Methods
- `async load()` - Initialize the timeline and add it to the DOM
- `setTheme(themeOptions: TimelineThemeOptions)` - Change the timeline theme
- `setOptions(options: Partial)` - Update timeline options
- `dispose()` - Clean up resources and remove from DOM
```
--------------------------------
### Template Format
Source: https://github.com/shotstack/shotstack-studio-sdk/blob/main/readme.md
Describes the JSON structure used for defining video editing templates within the Shotstack Studio SDK.
```APIDOC
## Template Format
Templates use a JSON format with the following structure:
```typescript
{
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
}
}
}
```
```
--------------------------------
### VideoExporter Class API
Source: https://github.com/shotstack/shotstack-studio-sdk/blob/main/readme.md
Documentation for the `VideoExporter` class, used for exporting video edits to MP4 format.
```APIDOC
## VideoExporter Class
The `VideoExporter` class handles exporting the edit to MP4.
### Constructor
```typescript
constructor(edit: Edit, canvas: Canvas)
```
Creates a new exporter for the provided Edit and Canvas.
### Methods
- `async export(filename: string = "shotstack-export.mp4", fps: number = 25)` - Export the edit to an MP4 video file
```
--------------------------------
### Apply Custom Theme to Timeline - TypeScript
Source: https://github.com/shotstack/shotstack-studio-sdk/blob/main/readme.md
Illustrates how to create and apply a fully custom theme to the Timeline component by defining specific colors and dimensions for its various elements like the toolbar, ruler, and clips. Requires an 'edit' object and Timeline class import.
```typescript
const customTheme = {
timeline: {
// Main timeline colors
background: "#1e1e1e",
divider: "#1a1a1a",
playhead: "#ff4444",
snapGuide: "#888888",
dropZone: "#00ff00",
trackInsertion: "#00ff00",
// Toolbar styling
toolbar: {
background: "#1a1a1a",
surface: "#2a2a2a", // Button backgrounds
hover: "#3a3a3a", // Button hover state
actived: "#007acc", // Button active state
divider: "#3a3a3a", // Separator lines
icon: "#888888", // Icon colors
text: "#ffffff", // Text color
height: 36 // Toolbar height in pixels
},
// Ruler styling
ruler: {
background: "#404040",
text: "#ffffff", // Time labels
markers: "#666666", // Time marker dots
height: 40 // Ruler height in pixels
},
// Track styling
tracks: {
surface: "#2d2d2d", // Primary track color
surfaceAlt: "#252525", // Alternating track color
border: "#3a3a3a", // Track borders
height: 60 // Track height in pixels
},
// Clip colors by asset type
clips: {
video: "#4a9eff",
audio: "#00d4aa",
image: "#f5a623",
text: "#d0021b",
shape: "#9013fe",
html: "#50e3c2",
luma: "#b8e986",
default: "#8e8e93", // Unknown asset types
selected: "#007acc", // Selection border
radius: 4 // Corner radius in pixels
}
}
// Canvas theming will be available in future releases
// canvas: { ... }
};
const timeline = new Timeline(edit, { width: 1280, height: 300 }, { theme: customTheme });
```
--------------------------------
### Importing Controls Class from Shotstack Studio SDK
Source: https://github.com/shotstack/shotstack-studio-sdk/blob/main/readme.md
Imports the `Controls` class from the '@shotstack/shotstack-studio' package. This class enables keyboard controls for video playback within the editor.
```typescript
import { Controls } from "@shotstack/shotstack-studio";
```
--------------------------------
### Edit Class API
Source: https://github.com/shotstack/shotstack-studio-sdk/blob/main/readme.md
Reference for the `Edit` class, which manages video editing projects including timelines, clips, and properties.
```APIDOC
## Edit Class
The `Edit` class represents a video editing project with its timeline, clips, and properties.
### Constructor
```typescript
constructor(size: Size, backgroundColor: string = "#ffffff")
```
Creates a new Edit instance with the specified dimensions and background color.
### Properties
- `assetLoader` - Asset loader instance for managing media assets
- `events` - Event emitter for handling events
- `playbackTime` - Current playback position in milliseconds
- `totalDuration` - Total duration of the edit in milliseconds
### Methods
- `async load()` - Initialize and prepare the edit for rendering
- `async loadEdit(edit: EditType)` - Load an edit from a JSON template
- `play()` - Start playback
- `pause()` - Pause playback
- `seek(target: number)` - Seek to a specific time in milliseconds
- `stop()` - Stop playback and return to beginning
- `addClip(trackIdx: number, clip: ClipType)` - Add a clip to a specific track
- `deleteClip(trackIdx: number, clipIdx: number)` - Delete a clip
- `getClip(trackIdx: number, clipIdx: number)` - Get a clip by track and index
- `addTrack(trackIdx: number, track: TrackType)` - Add a new track
- `getTrack(trackIdx: number)` - Get a track by index
- `deleteTrack(trackIdx: number)` - Delete a track
- `getEdit()` - Get the full edit configuration as a JSON object
- `undo()` - Undo the last editing operation
- `redo()` - Redo the last undone operation
### Events
- `clip:selected` - Triggered when a clip is selected
- `clip:updated` - Triggered when a clip is modified
- `edit:undo` - Triggered when an undo operation is performed
- `edit:redo` - Triggered when a redo operation is performed
```
--------------------------------
### Add Image Clip to Video Template (JSON)
Source: https://context7.com/shotstack/shotstack-studio-sdk/llms.txt
Demonstrates how to add an image asset to a video template. Includes parameters for source, cropping, positioning, scaling, opacity, and transformations. This JSON structure defines a single image clip within a timeline track.
```json
{
"timeline": {
"tracks": [
{
"clips": [
{
"asset": {
"type": "image",
"src": "https://example.com/image.jpg",
"crop": {
"top": 0,
"left": 0,
"right": 0,
"bottom": 0
}
},
"start": 0,
"length": 5,
"position": "center",
"fit": "cover",
"scale": 1,
"opacity": 1,
"offset": {
"x": 0.1,
"y": -0.1
},
"transform": {
"rotate": {
"angle": 45
}
}
}
]
}
]
},
"output": {
"format": "mp4",
"size": {
"width": 1280,
"height": 720
}
}
}
```
--------------------------------
### Shotstack Studio Edit Class: Event Handling
Source: https://github.com/shotstack/shotstack-studio-sdk/blob/main/readme.md
Shows how to subscribe to events emitted by the Shotstack Studio `Edit` class, specifically for handling clip selection and updates. The `edit.events.on()` method is used to register callbacks for these events.
```typescript
// Listen for clip selection events
edit.events.on("clip:selected", data => {
console.log("Clip selected:", data.clip);
console.log("Track index:", data.trackIndex);
console.log("Clip index:", data.clipIndex);
});
// Listen for clip update events
edit.events.on("clip:updated", data => {
console.log("Previous state:", data.previous); // { clip, trackIndex, clipIndex }
console.log("Current state:", data.current); // { clip, trackIndex, clipIndex }
});
```
--------------------------------
### Render Video Edits in Browser with Shotstack Canvas
Source: https://context7.com/shotstack/shotstack-studio-sdk/llms.txt
Shows how to initialize and use the Canvas component to render a video edit within the browser. It covers loading the canvas with an edit instance and includes controls for zoom and positioning. Cleanup is handled via the dispose method.
```typescript
import { Canvas } from "@shotstack/shotstack-studio";
// HTML setup required
//
// Create canvas with edit instance
const canvas = new Canvas({ width: 1920, height: 1080 }, edit);
await canvas.load();
// Zoom and positioning
canvas.zoomToFit();
canvas.centerEdit();
canvas.setZoom(1.5); // 150% zoom
// Clean up when done
canvas.dispose();
```
--------------------------------
### Importing Timeline Class from Shotstack Studio SDK
Source: https://github.com/shotstack/shotstack-studio-sdk/blob/main/readme.md
Imports the `Timeline` class from the '@shotstack/shotstack-studio' package. This class provides a visual timeline interface for video editing.
```typescript
import { Timeline } from "@shotstack/shotstack-studio";
```
--------------------------------
### Importing Edit Class from Shotstack Studio SDK
Source: https://github.com/shotstack/shotstack-studio-sdk/blob/main/readme.md
Imports the `Edit` class and its associated schema from the '@shotstack/shotstack-studio' package. This is a prerequisite for initializing and manipulating video edits programmatically.
```typescript
import { Edit } from "@shotstack/shotstack-studio";
import { EditSchema } from "@shotstack/shotstack-studio";
```
--------------------------------
### Shotstack Studio Edit Class: Clip and Track Manipulation
Source: https://github.com/shotstack/shotstack-studio-sdk/blob/main/readme.md
Illustrates how to manipulate video clips and tracks within the Shotstack Studio `Edit` class. This includes adding, deleting, and retrieving clips and tracks, as well as managing the undo/redo history. Requires a `templateJson` variable.
```typescript
// 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);
// Undo/Redo
edit.undo();
edit.redo();
// Get edit information
const clip = edit.getClip(0, 0);
const track = edit.getTrack(0);
const editJson = edit.getEdit();
const duration = edit.totalDuration; // in milliseconds
```
--------------------------------
### Importing VideoExporter Class from Shotstack Studio SDK
Source: https://github.com/shotstack/shotstack-studio-sdk/blob/main/readme.md
Imports the `VideoExporter` class from the '@shotstack/shotstack-studio' package. This class is responsible for exporting the video edit to an MP4 file.
```typescript
import { VideoExporter } from "@shotstack/shotstack-studio";
```
--------------------------------
### Customize Shotstack Timeline Appearance with Themes
Source: https://context7.com/shotstack/shotstack-studio-sdk/llms.txt
Illustrates how to apply custom themes to the Shotstack Timeline component, including using a built-in dark theme and defining a completely custom theme object. The theme customization affects various UI elements like background, colors, and dimensions.
```typescript
import { Timeline } from "@shotstack/shotstack-studio";
import darkTheme from "@shotstack/shotstack-studio/themes/dark.json";
// Use built-in dark theme
const timeline = new Timeline(
edit,
{ width: 1280, height: 300 },
{ theme: darkTheme }
);
await timeline.load();
// Create custom theme
const customTheme = {
timeline: {
background: "#1e1e1e",
divider: "#1a1a1a",
playhead: "#ff4444",
snapGuide: "#888888",
dropZone: "#00ff00",
trackInsertion: "#00ff00",
toolbar: {
background: "#1a1a1a",
surface: "#2a2a2a",
hover: "#3a3a3a",
active: "#007acc",
divider: "#3a3a3a",
icon: "#888888",
text: "#ffffff",
height: 36
},
ruler: {
background: "#404040",
text: "#ffffff",
markers: "#666666",
height: 40
},
tracks: {
surface: "#2d2d2d",
surfaceAlt: "#252525",
border: "#3a3a3a",
height: 60
},
clips: {
video: "#4a9eff",
audio: "#00d4aa",
image: "#f5a623",
text: "#d0021b",
"rich-text": "#9d4edd",
shape: "#9013fe",
html: "#50e3c2",
luma: "#b8e986",
default: "#8e8e93",
selected: "#007acc",
radius: 4
}
}
};
const customTimeline = new Timeline(
edit,
{ width: 1280, height: 300 },
{ theme: customTheme }
);
await customTimeline.load();
```
--------------------------------
### Export Video to MP4 - TypeScript
Source: https://github.com/shotstack/shotstack-studio-sdk/blob/main/readme.md
Demonstrates how to use the VideoExporter class to export an Edit object, along with its associated Canvas, to an MP4 file with specified frames per second. This process encodes the video using h264 and AAC.
```typescript
const exporter = new VideoExporter(edit, canvas);
await exporter.export("my-video.mp4", 25); // filename, fps
```
--------------------------------
### Canvas Class API
Source: https://github.com/shotstack/shotstack-studio-sdk/blob/main/readme.md
API for the `Canvas` class, responsible for the visual rendering of the video edit.
```APIDOC
## Canvas Class
The `Canvas` class provides the visual rendering of the edit.
### Constructor
```typescript
constructor(size: Size, edit: Edit)
```
Creates a new canvas with specified dimensions for rendering the edit.
### Methods
- `async load()` - Initialize the canvas and add it to the DOM
- `centerEdit()` - Center the edit in the canvas
- `zoomToFit()` - Zoom to fit the entire edit
- `setZoom(zoom: number)` - Set zoom level
- `dispose()` - Clean up resources and remove the canvas from the DOM
```
--------------------------------
### Validate Edit Templates and Clips with Zod Schemas (TypeScript)
Source: https://context7.com/shotstack/shotstack-studio-sdk/llms.txt
Illustrates how to use Zod schemas provided by the Shotstack Studio SDK to validate the structure and content of edit templates and individual clips. This ensures data integrity before processing or rendering.
```typescript
import { EditSchema, ClipSchema, TrackSchema } from "@shotstack/shotstack-studio";
// Validate entire edit template
const template = {
timeline: {
background: "#000000",
tracks: [
{
clips: [
{
asset: {
type: "image",
src: "https://example.com/image.jpg"
},
start: 0,
length: 5
}
]
}
]
},
output: {
format: "mp4",
size: {
width: 1920,
height: 1080
}
}
};
try {
const validatedEdit = EditSchema.parse(template);
console.log("Template is valid", validatedEdit);
} catch (error) {
console.error("Validation failed", error.errors);
}
// Validate individual clip
const clipData = {
asset: {
type: "video",
src: "https://example.com/video.mp4"
},
start: 0,
length: 5,
position: "center"
};
try {
const validatedClip = ClipSchema.parse(clipData);
console.log("Clip is valid", validatedClip);
} catch (error) {
console.error("Invalid clip", error.errors);
}
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.