> ## Documentation Index
> Fetch the complete documentation index at: https://hyperframes-codex-docs-human-first-refactor.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

```bash theme={null}
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 theme={null}
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.