Theatre.js

In this article

# 🚀 Quick start

Theatre is framework agnostic and can be used in any frontend web project. Theatre can animate DOM elements, THREE.js objects, any JavaScript variable... or even IOT devices. This page gives some ways to play around with Theatre.js or quickly add Theatre.js to your web page.

# Online playgrounds

If you just want to try Theatre.js, an online playground is the easiest option. Fork or play around with one of the following starter playgrounds to get started.

Once you've gotten comfortable with the Theatre.js animation editor, check out the following cool (and a bit complicated) examples of using Theatre.js to animate a 3D visualization in sync with music ( tutorial video (opens new window)) and to animate and manipulate an SVG.

# Download a starter project folder or HTML file

If you want to try out Theatre.js on your local computer you can download this starter JS project: theatreHelloWorld.zip⤓. Once you've downloaded the zip file, unzip it, navigate to the unzipped folder in your terminal, and run these commands:

npm install
npm run start

You should see a "Hello World" Theatre.js web page in your browser after running the above commands.

You can also download this simple HTML file and open it in your browser and favorite code editor: theatreHelloWorld.html⤓.

# Quickly add Theatre.js to a web page

A prebundled package called @Theatre/browser-bundles (opens new window) is available in case you do not want to use a bundler. @Theatre/browser-bundles can be loaded into a web page or JS file via a CDN like JSDelivr (opens new window) either with an empty ES6 import (opens new window) or a script tag:

You can also download the prebundled JavaScript file⤓ instead of using a CDN and load it using one of the two methods above.

Advanced: if you do not need the Theatre.js UI you can download the minified core JavaScript file⤓.

← 🎓 Learn the basics →