View raw

Editor SDK#

@clipkit/sdk is an embeddable timeline editor — a full visual editor over the Clipkit Protocol that you can drop into your own product as a React, Vue, Svelte, Angular, or vanilla-JS component.

The editor reads and writes the same CKP/1.0 Source that the runtime, the MCP server, the CLI, and the render service all consume. Whatever an AI agent or a human user produces in the editor is the same JSON your renderer eats.

Status#

The SDK is in development. The runtime, schema, MCP server, CLI, and render service that the SDK builds on are all shipped and stable — you can build the editor experience today against @clipkit/runtime directly. The SDK packages that ergonomic layer.

Target release. First beta in the next minor release. The API below is the shape we're building toward; treat it as a design document until the package lands on npm.

What's coming#

Framework adapters#

  • @clipkit/sdk-react — <ClipkitEditor />, useClipkitEditor() hook
  • @clipkit/sdk-vue — <ClipkitEditor /> SFC, composable
  • @clipkit/sdk-svelte — <ClipkitEditor /> component
  • @clipkit/sdk-vanilla — new ClipkitEditor(el, options) for everything else

All adapters wrap the same core editor. The Source is the only thing crossing the boundary.

API shape#

import { ClipkitEditor } from '@clipkit/sdk-react';
import type { Source } from '@clipkit/protocol';

function MyVideoTool() {
  const [source, setSource] = useState<Source>(initialSource);

  return (
    <ClipkitEditor
      source={source}
      onChange={setSource}
      theme="dark"
      onExport={async () => {
        const result = await fetch('/api/render', {
          method: 'POST',
          body: JSON.stringify(source),
        });
        return result.blob();
      }}
    />
  );
}

Surface#

  • Timeline view with track-and-element editing
  • Properties panel for the selected element
  • Live preview (the runtime, rendered in-place)
  • Asset browser (stock providers + your uploads)
  • Export bar (calls back to your render endpoint)

What it isn't#

The SDK is not a renderer. It's an authoring surface that writes Sources. To turn a Source into MP4, point the editor's onExport at:

  • A local @clipkit/render-service instance, or
  • The hosted API at api.clipkit.dev, or
  • Your own infrastructure that runs @clipkit/render-service.

The split is intentional: editing is free and runs in the user's browser; rendering is what you might charge for, on your own terms.

Until the SDK lands#

You can build a custom editor today against @clipkit/runtime's live-preview hooks. The playground at apps/playground/ in the repo is exactly that — a minimal editor over the Source — and is licensed Apache-2.0. Fork it.

For pre-built layouts and theming, you'll want to wait for the SDK proper. Star the GitHub repo to get the release notification.