# ๐พ 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
- follow the getting started guides of a bundler like webpack (opens new window), esbuild (opens new window) or Parcel (opens new window); or
- download a starter project that includes a bundler, theatreHelloWorld.zipโค; or
- proceed without a bundler by following the Theatre.js quick start page instead.
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:
@theatre/core
(opens new window), the core animation library; and@theatre/studio
(opens new window), the visual editor.
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.
โ ๐ The Guide ๐ Learn the basics โ