Theatre.js

In this article

# 💾 Install Theatre.js

# Prerequisites

This page describes how to install and import Theatre.js into a web project with a bundler (opens new window). If you don't already have a project with a bundler set up then (no worries) you can

Got your bundler set up? Let's go!

# Install Theatre

See this step in the video tutorial

Fist, navigate to the folder of the project that has a bundler set up in the terminal. Make sure your dependencies are up to date with npm i.

Now, Theatre.js comes in two packages:

Let's add @theatre/core as a dependency.

Then add @theatre/studio as a dev dependency. @theatre/studio is added as a dev dependency since we only need it during development to create animations.

# "Hello World": Import and run Theatre.js

Here's a minimal Theatre.js "hello world" html page and script. Don't worry about what a project, sheet, or object is just yet, we'll break that down in the next part of the guide.

<!-- dist/index.html -->
<body>
    <script type="text/javascript" src="./index.js">
</body>

// src/index.js
import { getProject } from "@theatre/core";
import studio from "@theatre/studio";

// initialize the studio so the editing tools will show up on the screen
studio.initialize();

// create a project, sheet, and object
const objValues = { foo: 0, bar: true, baz: "A string" };
const obj = getProject("First project")
  .sheet("Sheet")
  .object("First Object", objValues);

Now, make sure your bundler runs so that src/index.js is built into dist/index.js. Once the bundler has finished bundling, navigate to dist/index.html in your browser. You should see:

Getting stuck or want some help? No worries, join our Discord Community (opens new window) or try the Theatre.js quick start page instead of using a bundler. Otherwise, you've now got Theatre.js installed, imported, and up and running! Feel free to start playing around or → continue on in the guide to learn more about projects, sheets, objects and animation.

← 🎓 Learn the basics →