Skip to main content
The hyperframes CLI is the primary way to work with Hyperframes. It handles project creation, live preview, rendering, linting, and diagnostics — all from your terminal. 
npm install -g hyperframes
# or use directly with npx
npx hyperframes <command>

​
When to Use

Use the CLI when you want to:
  • Create a new composition project from a template
  • Preview compositions with live hot reload during development
  • Render compositions to MP4 (locally or in Docker)
  • Lint compositions for structural issues
  • Check your environment for missing dependencies
Use a different package if you want to:
  • Render programmatically from Node.js code — use the producer
  • Build a custom frame capture pipeline — use the engine
  • Embed a composition editor in your own web app — use the studio
  • Parse or generate composition HTML in code — use core
The CLI is the recommended starting point for all Hyperframes users. It wraps the producer, engine, and studio packages so you do not need to install them separately.

​
Getting Started

1

Create a project

Scaffold a new composition from a template:
npx hyperframes init --template title-card

Creating composition in ./title-card...
  index.html
  assets/
  package.json
Done! Run `cd title-card && npx hyperframes dev` to preview.
See Templates for all available templates.
2

Preview in browser

Start the development server with live hot reload:
cd title-card
npx hyperframes dev

Hyperframes Studio v0.1.0
Local: http://localhost:3000
Watching for changes...
Edit index.html and the preview updates instantly.
3

Lint your composition

Check for structural issues before rendering:
npx hyperframes lint

Linting index.html...
No issues found.
4

Render to MP4

Produce the final video:
npx hyperframes render -o output.mp4

Rendering index.html...
[========================================] 100% (900/900 frames)
Output: output.mp4 (30s, 1920x1080, 30fps)
For deterministic output, add --docker:
npx hyperframes render --docker -o output.mp4

​
Commands

​
init

Create a new composition project from a template:
npx hyperframes init --template <name>
TemplateDescription
blankEmpty 1920x1080 composition with a GSAP timeline wired up
title-cardAnimated title and subtitle with GSAP fade-in/out
slideshowImage slideshow with crossfade transitions
lower-thirdBroadcast-style lower-third overlay
See Templates for full details and previews.

​
compositions

List all compositions in the current project:
npx hyperframes compositions

Compositions in ./my-video:
  root          index.html           (30s, 1920x1080)
  intro-anim    compositions/intro.html  (5s, 1920x1080)

Producer

The rendering pipeline the CLI calls under the hood. Use directly for programmatic rendering.

Studio

The editor UI that powers hyperframes dev. Use directly to embed in your own app.

Core

Types, linter, and runtime. Use directly for custom tooling and integrations.

Engine

The capture engine. Use directly for custom frame capture pipelines.