Keyboard & Mouse Controls

Studio-wide shortcuts

Action Keyboard input
Play / Pause Space
Hide / Show the Studio Alt/Option + \

Windows: Ctrl + Z

macOS: Cmd + Z


Windows: Ctrl + Shift + Z

macOS: Cmd + Shift + Z

Focus Range Zone controls

Action Keyboard input
Create a Focus Range

Shift + Left Mouse button drag in the top bar of the Sequence Editor

Details Panel Controls

Action Keyboard input
Scrub number props at reduced speed

alt/option + Left Mouse button drag on a number prop in the Details Panel

Dope Sheet controls

Action Keyboard input
Create a Dope Sheet selection (select Keyframes)
Shift + Left Mouse button drag in the Sequence Editor

See a demo in the Working with Sequences Manual

Context menu which can copy, paste, and delete items. Right Mouse button
Place a marker at playhead position
Right Mouse button click the playhead
Zoom in and out of the Dope Sheet

Windows: Ctrl + Scroll Up/Down

macOS: Control + Scroll Up/Down

Pinch on trackpad

Pan left and right in the Dope Sheet

Shift + Scroll Up/Down

Scroll Left/Right on trackpad

Keyframe Curve Editor Popover controls

Action Keyboard input
Navigate preset selection
/// (arrow keys)
Close popover without saving curve Escape
Close popover and save curve Enter

Color Picker Prop Editor controls

Action Keyboard input
Move the color picker pointer to adjust color
/// (arrow keys)

Learn more

Want to learn more? Take a look at some more in-depth topics from our manual:


This guide covers creating projects, managing their states, saving and loading their states, and more.


This guide covers Sheets in Theatre.js

Sheet Objects

This guide covers Sheet Objects in Theatre.js.

Prop types

Learn how to customize the props you want to animate with Theatre.js. When creating a Sheet Object, we define the props that we want to animate on it. Props can have different types which can be imported from "@theatre/core".

Working with Sequences

In this guide, we'll explore the tools that Theatre.js offers for creating animations.


Learn about assets in Theatre.js

Using Audio

Learn how to load and synchronize music or narration audio to an animation.


Learn the different parts of the Studio.

Authoring extensions

The Theatre.js Studio API enables you to define extensions that extend the Studio's UI and/or extend the functionality of Studio.

Advanced uses

Was this article helpful to you?

Last edited on February 01, 2024.
Edit this page

Theatre.js is a design tool in the making. We aim to blur the line between designer/developer, author/consumer, and artist/scientist.
© 2022 Theatre.js Oy – Helsinki.