@studio-dev/vsdk-plugin-example

A minimal, heavily-commented plugin scaffold. Use it as a starting point for building your own VSDK plugin.

What it demonstrates

• Registering a sidebar panel that adds items to the timeline
• Registering an inspector section for image items
• Registering a toolbar action
• Registering a context-menu action (right-click on a timeline item)
• Registering a keyboard shortcut
• Reading & mutating the store via useStudioStore and ctx.store
• Lazy-loading panel code so it only ships when opened
• Passing plugin options to lazy-loaded components via a module-level config store

File tour

| File | What to learn from it | | ---- | --------------------- | | src/plugin.ts | The PluginDefinition — registration of every extension point lives here. Read this first. | | src/panel.tsx | Reading state with useStudioStore, adding items to the timeline, finding/creating tracks, using SDK UI primitives and icons. | | src/inspector-section.tsx | Mutating a selected item via updateItemProperties (top-level fields and nested transform). | | src/config-store.ts | Pattern for passing plugin options to lazy-loaded components. | | src/index.ts | What to export publicly. |

Cloning this plugin

1. Copy packages/plugin-example to packages/plugin-<your-name>
2. Rename the package in package.json (name, description)
3. Change the plugin id in src/plugin.ts to something unique (e.g. mycompany:foo)
4. Edit examplePlugin → <yourThing>Plugin and rename the export
5. Replace the sticker list / inspector controls with your real features
6. Add it to your consumer app:

import { yourThingPlugin } from '@studio-dev/vsdk-plugin-your-thing'

<VideoStudioProvider plugins={[yourThingPlugin()]}>
  <StudioEditor />
</VideoStudioProvider>

Useful SDK references

• Store API — packages/vsdk/docs/03-store-api.md
• Plugin system — packages/vsdk/docs/04-plugin-system.md
• Timeline & animation — packages/vsdk/docs/07-timeline-and-animation.md

Key store actions you'll reach for

| Action | What it does | | ------ | ------------ | | addItem(item) | Insert a new timeline item; returns its id | | removeItem(id) | Remove an item | | updateItemProperties(id, partial) | Patch fields on an item (transform, style, filters, flags, …) | | moveItem(id, trackId, startFrame) | Move an item to a track + frame | | splitItem(id, frame) | Split a clip at a frame | | duplicateItem(id) | Duplicate; returns the new id | | addTrack(track) | Create a new track; returns its id | | setCurrentFrame(frame) | Move the playhead | | selectItem(id) / deselectAll() | Selection management | | undo() / redo() | History — every action above is reversible |

All of these are available off useStudioStore in components, or off ctx.store.getState() in plugin lifecycle callbacks.