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.