Installation

VSDK is published as @studio-dev/vsdk. It has a small set of mandatory peer dependencies (React, Remotion, and the Remotion player/transitions packages) and one optional peer (Remotion Lambda, only needed if you render in the cloud).

Package + peers

pnpm add @studio-dev/vsdk
pnpm add react react-dom remotion @remotion/player @remotion/transitions zod

npm install @studio-dev/vsdk
npm install react react-dom remotion @remotion/player @remotion/transitions zod

yarn add @studio-dev/vsdk
yarn add react react-dom remotion @remotion/player @remotion/transitions zod

bun add @studio-dev/vsdk
bun add react react-dom remotion @remotion/player @remotion/transitions zod

Required peer versions

The SDK pins exact Remotion versions for compatibility — match them in your own dependencies.

Import the stylesheet

The SDK ships its theme tokens, component styles, and Tailwind v4 utilities in one CSS file. Import it once at the top of your app (or in your global stylesheet) — without it the editor renders unstyled.

import '@studio-dev/vsdk/styles.css'

Optional: official plugins

Every plugin is published as its own package and installed independently — the SDK doesn't bundle them.

pnpm add @studio-dev/vsdk-plugin-filters
pnpm add @studio-dev/vsdk-plugin-typography
pnpm add @studio-dev/vsdk-plugin-stock
pnpm add @studio-dev/vsdk-plugin-gif
pnpm add @studio-dev/vsdk-plugin-animation
pnpm add @studio-dev/vsdk-plugin-mask
pnpm add @studio-dev/vsdk-plugin-transition

You register them on the provider via the plugins prop. See Configuration.

Next.js App Router

The editor mounts client-side only — disable SSR for the page that hosts it.

import dynamic from 'next/dynamic'

const Editor = dynamic(() => import('./editor'), { ssr: false })

export default function Page() {
  return <Editor />
}

'use client'

import { StudioEditor, VideoStudioProvider } from '@studio-dev/vsdk'
import '@studio-dev/vsdk/styles.css'

export default function Editor() {
  return (
    <VideoStudioProvider theme="dark">
      <StudioEditor className="h-screen" />
    </VideoStudioProvider>
  )
}

Subpath imports (recommended)

The package ships several entry points. Prefer subpath imports for better tree-shaking — your bundler only pulls the modules you actually use.

// Good — only the store types ship to the client
import type { StudioState, ProjectBundle } from '@studio-dev/vsdk/core'

// Also fine — uses the unified entry
import { VideoStudioProvider } from '@studio-dev/vsdk'

TypeScript

The package is shipped with bundled .d.ts files. No @types package is needed. The SDK targets TypeScript 5+ and uses Draft<T> from Immer in command signatures — make sure your tsconfig.json has "moduleResolution": "Bundler" (or "NodeNext") so subpath types resolve.

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "jsx": "preserve",
    "strict": true
  }
}

Done — next step

Head to Configuration for the full VideoStudioProvider prop reference, or jump to Quickstart for a working example you can copy.