What is SceneryStack?

SceneryStack is the open-source TypeScript framework behind PhET Interactive Simulations. It provides everything needed to build accessible, multi-modal, interactive HTML5 applications: a scene graph renderer, a reactive state system, math utilities, UI components, and an application shell.

It is published as a single npm package, scenerystack, with each library exposed as a subpath export.

The libraries

Library	Import path	Purpose
axon	scenerystack/axon	Reactive state: Property, DerivedProperty, Emitter, Multilink
dot	scenerystack/dot	Math: Vector2, Bounds2, Matrix3, Range, Utils
kite	scenerystack/kite	Geometric shapes and boolean operations: Shape, LineStyles
scenery	scenerystack/scenery	Scene graph: Node, Path, Text, input listeners, accessibility (PDOM)
sun	scenerystack/sun	UI components: buttons, sliders, checkboxes, combo boxes
scenery-phet	scenerystack/scenery-phet	Simulation-specific reusable components: arrows, thermometers, PhetFont
twixt	scenerystack/twixt	Animation and easing
joist	scenerystack/sim (app shell classes) / scenerystack/joist (preferences panels, locale utilities)	Application shell: Sim, Screen, ScreenView, navigation bar — see Troubleshooting for why the import subpath differs from the library name
tandem	scenerystack/tandem	PhET-iO instrumentation and serialization
phetcommon	scenerystack/phetcommon	Shared utilities, notably ModelViewTransform2

Installation

npm install scenerystack

A minimal example

import { Property } from 'scenerystack/axon';
import { Circle, Node } from 'scenerystack/scenery';
import { Vector2 } from 'scenerystack/dot';

// Model: reactive state, no view knowledge
const positionProperty = new Property( new Vector2( 0, 0 ) );

// View: a scenery Node that observes the model
const ball = new Circle( 20, { fill: 'crimson' } );
positionProperty.link( position => {
  ball.translation = position;
} );

This model/view split is the foundational pattern of every SceneryStack application — see Model-View Separation.

Where to go next

• Model-View Separation — the architecture every page in Almanach assumes
• ModelViewTransform2 — mapping between model and view coordinates
• Drag Listeners — making nodes interactive
• The Parallel DOM (PDOM) — building accessible simulations