What is Theatre.js?

Updated

Theatre.js is a JavaScript animation library that pairs code with a visual editor running in the browser. It is built for motion design work: cinematic 3D scenes, UI interactions, and anything else you can drive by changing JavaScript variables. You define and control animations in code, then use the browser-based editor to block out timing, adjust curves, and fine-tune individual frames. It is a good fit if you already work with a JavaScript stack (THREE.js, WebGPU, or a custom setup) and want a professional motion-design toolset without leaving the browser.

How it works

The core idea is that Theatre.js only changes JavaScript variables. What you do with those variables is up to you. That is why it works with any stack: a custom THREE.js scene, your own WebGPU library, or plain UI state.

The workflow splits into two halves:

  • Create in code — you set up the objects and properties you want to animate.
  • Perfect in the browser — you use the visual editor to shape the motion.

This is not an either/or choice. The library is designed so code and the visual editor complement each other.

The editor toolset

The browser editor provides the tools you would expect from professional motion design software:

Tool What it does
Sequence editor Block out your sequence in seconds
Dope sheet Manage keyframes across properties
Graph editor Fine-tune every frame with curve control
Easing presets Add quick flare without hand-tuning curves
Outline / Property editor Navigate and adjust the properties you are animating

A typical loop: block out the sequence quickly, apply easing presets for immediate polish, then dive into the graph editor when you need frame-level precision.

Extensibility

Theatre.js is extensible, so you can build your own workflow around it:

  • Move the camera for the perfect shot
  • Adjust lights
  • Tweak shaders
  • Use official extensions or your own custom tools

You can build custom UI, custom tools, and custom workflows on top of the core library.

When to choose it

Theatre.js makes sense when:

  • You want visual motion-design control over animations that live in JavaScript.
  • You are working with THREE.js, WebGPU, or a custom rendering setup.
  • You want to iterate quickly in the browser rather than re-running code for every timing tweak.
  • You prefer to keep animation logic in code while shaping it visually.

It is less of a fit if you need a purely declarative, code-only animation approach with no editor, or if your stack is not JavaScript-based.

Getting started

The project is open source and has gathered 7,700 GitHub stars, with development happening in the open. The site points to a "Get started with Theatre.js" entry point for installation and first steps. From there, the intended path is to set up your animatable properties in code, open the editor, and start blocking out a sequence.