Theatre.js

Keyframe animation editor that scrubs any JS object property on a timeline

Tier A · StrongAnimation LibraryTooltheatrejs.com

Theatre.js pairs a runtime animation core (@theatre/core) with a browser-based visual editor (@theatre/studio) that overlays your running app. You get a sequence editor, dope sheet, graph editor with bezier easing, and a property inspector, and any JS object property you register becomes keyframable. It is stack-agnostic: THREE.js, React Three Fiber, WebGPU, and plain HTML/CSS/SVG are all documented entry points. Built for developers who want After-Effects-style motion control without hand-tuning numbers in code.

Install

npm install @theatre/core @theatre/studio

For an agent

Reach for Theatre.js when a timeline of choreographed keyframes across many properties is the actual requirement — GSAP or Framer Motion are better when motion is a reaction to state or scroll. The workflow is two-phase: ship @theatre/studio in dev only, author the sequence by hand in the browser, export the JSON state and load it in production so the editor bundle never reaches users. Watch the staleness: the last public commit and npm publish are both from 2024 at v0.7.2, the promised 1.0 moved to a private repo, and the studio half is AGPL — check that against your licensing before you commit.

Why it is here. The only mature open-source attempt at a real motion-design timeline for the web, and nothing has replaced it. Its two-year public stall is the one thing to weigh before adopting it.

Install command, framework, licence and component list.

Facts

License: Apache 2.0, AGPL
Pricing: Free, Open source
Framework: React, Vanilla JS
Styling: Not applicable
Distribution: npm package, GitHub repository
Platform: Web
Content type: Code
Agent readiness: Readable open source, Structured documentation
Accessibility: Not applicable
Maturity: Stable
GitHub stars: 12,600
Package: @theatre/core

Notable for

visual timeline over live JS objects
dope sheet and bezier graph editor
THREE.js and R3F integration
export animation state as JSON
studio is AGPL, core is Apache-2.0

Provenance

Verified 2026-08-15. HTTP 200. https://www.theatrejs.com/, https://github.com/theatre-js/theatre, https://github.com/theatre-js/theatre/commits/main, npm registry metadata for @theatre/core

Also in Motion & Interaction

theatrejs.comTier A