SDK Overview

Headless, framework-neutral composition editing engine — query, mutate, patch, and persist without a browser UI.

Use @hyperframes/sdk when your application must inspect or change a HyperFrames composition without opening Studio.

npm install @hyperframes/sdk

If you only need to play a composition, use the Player. If you only need to render a project, use the CLI or Producer.

Make one edit

Open HTML, change a stable element, and serialize the result:

import { openComposition } from "@hyperframes/sdk";

const html = `<h1 class="clip" data-hf-id="hf-title"
  data-start="0" data-duration="3">Old title</h1>`;

const composition = await openComposition(html);
composition.setText("hf-title", "Launch day");

const updatedHtml = composition.serialize();
composition.dispose();

openComposition() adds stable data-hf-id values where they are missing. Every edit then targets an ID rather than a temporary UI selection.

What the SDK owns

Need	SDK surface
Find elements	getElements(), getElement(), and find()
Change source	Typed methods such as setText(), setStyle(), and setTiming()
Apply data-driven operations	dispatch() and batch()
Undo, sync, or audit changes	Forward and inverse RFC 6902 patch events
Save to your own storage	Persistence adapters
Keep a base template untouched	Embedded override mode

Start with the SDK quickstart, which extends the edit above with querying and autosave. The guide and reference pages in this section cover patches, adapters, canvas integration, animation operations, and the complete API.