mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-14 18:01:20 +08:00
ukimsanov
51 lines
1.7 KiB
Plaintext
51 lines
1.7 KiB
Plaintext
---
|
|
title: "SDK Overview"
|
|
description: "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.
|
|
|
|
```bash
|
|
npm install @hyperframes/sdk
|
|
```
|
|
|
|
If you only need to play a composition, use the [Player](/packages/player). If
|
|
you only need to render a project, use the [CLI](/developers/cli) or
|
|
[Producer](/packages/producer).
|
|
|
|
## Make one edit
|
|
|
|
Open HTML, change a stable element, and serialize the result:
|
|
|
|
```ts
|
|
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](/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.
|