SDK Integration

The Workshop SDK is an embeddable vanilla TypeScript package that brings the Workshop editing experience into your own application. It provides a document-like block editor with AI copilot, browser-side preview, and full API integration.

Installation

bash
npm install workshopvideo

The SDK has zero framework dependencies. It works with React, Vue, Svelte, plain HTML, or any other frontend.

Basic Setup

typescript
import { WorkshopEditor } from 'workshopvideo';

const editor = new WorkshopEditor({
  apiKey: 'YOUR_API_KEY',
  orgId: 'YOUR_ORG_ID',
  container: document.getElementById('editor'),
  defaults: {
    mood: 'confident',
    aspect: '16:9'
  }
});

This renders a block-based editor in the target container. Users write .ws content using a guided interface — each scene, element, and modifier is a block that can be rearranged, edited, and previewed.

The Editing Experience

The SDK provides a document-like interface where each block corresponds to a .ws language construct. Users can type text, select moods from a picker, adjust timing, and preview the compiled result — all without writing raw .ws syntax.

The underlying .ws source is always accessible. Power users can switch to source mode at any time.

AI Copilot

The built-in copilot accepts natural-language prompts and generates .ws blocks inline. It uses the same author endpoint as the API but integrates directly into the editing flow.

typescript
const editor = new WorkshopEditor({
  apiKey: 'YOUR_API_KEY',
  orgId: 'YOUR_ORG_ID',
  container: document.getElementById('editor'),
  copilot: true
});

Event Hooks

The SDK emits events at key moments in the editing lifecycle:

typescript
editor.on('compile', (renderGraph) => {
  // User compiled their script — renderGraph is the result
});

editor.on('render:complete', (jobId) => {
  // Video rendering finished
});

editor.on('source:change', (source) => {
  // The .ws source was modified
});

Configuration

Option Type Default Description
apiKey string required Your Workshop API key
orgId string required Your organization ID
container HTMLElement required DOM element to mount the editor
defaults.mood string confident Default mood for new scripts
defaults.aspect string 16:9 Default aspect ratio
copilot boolean false Enable AI copilot
theme string — Default ThemePack name

Use Cases

SaaS platforms — embed the editor so customers can create video content without leaving your application.

E-commerce — let merchants produce product videos from their catalog data using templates and the editor.

CRM and marketing tools — integrate video creation into campaign workflows.

Internal tools — give non-designers a guided interface for creating approved video content.

Next Steps