@shotstack/shotstack-studio 1.0.0 → 1.1.1

package/package.json

@@ -5,7 +5,7 @@
 		"cpuccino",
 		"dazzatron"
 	],
-	"version": "1.0.0",
+	"version": "1.1.1",
 	"description": "A video editing library for creating and editing videos with Shotstack",
 	"type": "module",
 	"main": "dist/shotstack-studio.umd.js",
@@ -31,6 +31,9 @@
 		"build": "vite build && tsc --emitDeclarationOnly",
 		"prepublishOnly": "npm run build"
 	},
+	"peerDependencies": {
+		"@ffmpeg/ffmpeg": "^0.12.15"
+	},
 	"devDependencies": {
 		"@types/howler": "^2.2.12",
 		"@types/node": "^22.9.0",
@@ -46,7 +49,6 @@
 		"vite": "^5.4.10"
 	},
 	"dependencies": {
-		"@ffmpeg/ffmpeg": "^0.12.15",
 		"howler": "^2.2.4",
 		"opentype.js": "^1.3.4",
 		"pixi-filters": "^6.0.5",

package/readme.md

@@ -6,6 +6,16 @@
 
 A JavaScript library for creating and editing videos in the browser.
 
+## Interactive Examples
+
+Try Shotstack Studio in your preferred framework:
+
+[![TypeScript](https://img.shields.io/badge/TypeScript-StackBlitz-blue?style=for-the-badge&logo=typescript)](https://stackblitz.com/edit/studio-sdk-typescript?file=src%2Fmain.ts)
+[![React](https://img.shields.io/badge/React-StackBlitz-blue?style=for-the-badge&logo=react)](https://stackblitz.com/edit/studio-sdk-typescript?file=src%2Fmain.ts)
+[![Vue](https://img.shields.io/badge/Vue-StackBlitz-blue?style=for-the-badge&logo=vue.js)](https://stackblitz.com/edit/shotstack-studio-vue?file=src%2FApp.vue)
+[![Angular](https://img.shields.io/badge/Angular-StackBlitz-blue?style=for-the-badge&logo=angular)](https://stackblitz.com/edit/shotstack-studio-angular?file=src%2Fmain.ts)
+[![Next.js](https://img.shields.io/badge/Next.js-StackBlitz-blue?style=for-the-badge&logo=next.js)](https://stackblitz.com/edit/shotstack-studio-nextjs?file=app%2Fpage.tsx)
+
 ## Installation
 
 ```bash
@@ -16,14 +26,23 @@ npm install @shotstack/shotstack-studio
 yarn add @shotstack/shotstack-studio
 ```
 
+### FFmpeg (peer dependency)
+
+Install FFmpeg to use the browser based `VideoExporter` class. This is kept separate to prevent WASM / Web Worker clashes in frameworks like Next.js.
+
+```bash
+npm install @ffmpeg/ffmpeg
+```
+
+You can skip this if you're using the [Shotstack Edit API](https://shotstack.io/docs/guide/getting-started/hello-world-using-curl/) for rendering videos.
+
 ## Quick Start
 
 ```typescript
 import { Edit, Canvas, Controls } from "@shotstack/shotstack-studio";
-import myTemplateJson from "hello.json"
 
 // 1. Retrieve an edit from a template
-const templateUrl = 'https://shotstack-assets.s3.amazonaws.com/templates/hello-world/hello.json'
+const templateUrl = "https://shotstack-assets.s3.amazonaws.com/templates/hello-world/hello.json";
 const response = await fetch(templateUrl);
 const template = await response.json();
 
@@ -36,7 +55,7 @@ const canvas = new Canvas(template.output.size, edit);
 await canvas.load(); // Renders to [data-shotstack-studio] element
 
 // 4. Load the template
-await edit.loadEdit(myTemplateJson);
+await edit.loadEdit(template);
 
 // 5. Add keyboard controls
 const controls = new Controls(edit);
@@ -46,13 +65,13 @@ await controls.load();
 Your HTML should include a container with the `data-shotstack-studio` attribute:
 
 ```html
-<div data-shotstack-studio class="canvas-container"></div>
+<div data-shotstack-studio></div>
 ```
 
 ## Features
 
 - Create video compositions with multiple tracks and clips
-- Use in conjunction with the Shotstack Edit API to render video
+- Use in conjunction with the [Shotstack Edit API](https://shotstack.io/docs/guide/getting-started/hello-world-using-curl/) to render video
 - Export to video using browser-based FFmpeg
 
 ## Main Components
@@ -96,6 +115,23 @@ const editJson = edit.getEdit();
 const duration = edit.totalDuration; // in milliseconds
 ```
 
+#### Events
+
+The Edit class provides an event system to listen for specific actions:
+
+```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);
+});
+```
+
+Available events:
+
+- `clip:selected` - Emitted when a clip is selected, providing data about the clip, its track index, and clip index
+
 ### Canvas
 
 The Canvas class provides the visual rendering of the edit.
@@ -233,6 +269,23 @@ Creates a new Edit instance with the specified dimensions and background color.
 - `deleteTrack(trackIdx: number)` - Delete a track
 - `getEdit()` - Get the full edit configuration as a JSON object
 
+#### Events
+
+The Edit class provides an event system to listen for specific actions:
+
+```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);
+});
+```
+
+Available events:
+
+- `clip:selected` - Emitted when a clip is selected, providing data about the clip, its track index, and clip index
+
 ### Canvas
 
 The `Canvas` class provides the visual rendering of the edit.