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

# @hyperframes/studio-server

> Mount the Studio project and preview API in your own server.

`@hyperframes/studio-server` is the backend used by Studio. It serves projects
and previews, applies source mutations, creates thumbnails, and starts render
jobs.

Most users do not need it. The CLI wires the server and Studio together when
you run `npx hyperframes preview`. Use this package only when your own
application must host the Studio backend.

```bash theme={null}
npm install @hyperframes/studio-server
```

## Mount the API

`createStudioApi()` returns a Hono application. The adapter is the boundary
between Studio and your project storage, bundler, linter, and renderer.

```ts theme={null}
import type { Hono } from "hono";
import {
  createStudioApi,
  type StudioApiAdapter,
} from "@hyperframes/studio-server";

export function mountStudioApi(
  app: Hono,
  adapter: StudioApiAdapter,
) {
  app.route("/api", createStudioApi(adapter));
}
```

A `StudioApiAdapter` supplies:

* project listing and resolution;
* composition bundling and linting;
* render output storage and job startup;
* optional thumbnails, sessions, registry installation, and background removal.

Use the interface exported by your installed version as the exact contract. It
changes as Studio gains capabilities.

## Other entry points

| Import                                                   | Purpose                                          |
| -------------------------------------------------------- | ------------------------------------------------ |
| `@hyperframes/studio-server/source-mutation`             | Apply guarded changes to composition source      |
| `@hyperframes/studio-server/screenshot-clip`             | Calculate element screenshot geometry            |
| `@hyperframes/studio-server/manual-edits-render-script`  | Reapply Studio manual edits during render        |
| `@hyperframes/studio-server/studio-motion-render-script` | Reapply Studio motion edits during render        |
| `@hyperframes/studio-server/draft-markers`               | Work with draft gesture markers                  |
| `@hyperframes/studio-server/finite-mutation`             | Guard source mutations against non-finite values |
| `@hyperframes/studio-server/media-proxy-preview`         | Support proxied media in preview                 |

`@hyperframes/core/studio-api` remains a deprecated compatibility re-export.
New integrations should import from `@hyperframes/studio-server`.

<CardGroup cols={2}>
  <Card title="@hyperframes/studio" icon="palette" href="/packages/studio">
    Embed lower-level Studio interface components.
  </Card>

  <Card title="Studio guide" icon="display" href="/studio">
    Use the complete editor that ships with HyperFrames.
  </Card>
</CardGroup>