Use SceneryStack in Your Web Project¶

Under Construction

This section and others in Getting Started with SceneryStack are under heavy revisement and will be updated by the end of 2024.

See the Stack List for all of the libraries that make up SceneryStack.

Get to know Scenery¶

When using SceneryStack, Scenery, the scene graph, will act as the foundation for your entire project. Scenery is used for representing graphics (rendering to SVG, Canvas or WebGL), handling user input (e.g. mouse, touch, keyboard, screen reader) and general abstraction for the browser and cross-platform support. Shapes are represented using kite. Observer and emitter patterns use axon. Scenery provides support for alternative input and accessibility features in your project.

Check out the links below to get familiar with Scenery and some examples using Scenery:

Tour of Scenery

General concepts that Scenery is based on.
Scenery Layout

Layout documentation for customizable containers.
Scenery Hello World

Simple Scenery examples to get you started.
Scenery API Documentation

The full Scenery documentation for reference, including installation.

`phet-lib`¶

You will probably want to make use of more than just Scenery for your project. phet-lib contains the core, simulation-core and supplemental SceneryStack libraries in one package.

Your projects can get started after creating a simple HTML

Example HTML file

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Example Project</title>
        <script src="./js/lib/phet-lib.min.js"></script>
        <script type="module" src="dist-webpack/bundle.js"></script>
    </head>
    <body>
    </body>
    </html>

Download phet-lib from the phet-lib repository (dist directory).

Any examples found in the Scenery documentation above will also work when importing phet-lib. This approach provides access through the phet global variable (e.g. phet.scenery.Node), and provides a built JavaScript file without corresponding TypeScript types.

The package is on the larger side as it includes a number of preloads - stay tuned for further optimization!

phet-lib on Node (npm)¶

phet-lib can be installed directly through Node as an NPM package, available at https://www.npmjs.com/package/phet-lib.

We have a Demo using Vite with simple steps to be able to get started (requires git/npm/node).

Using the phet-lib NPM package provides access to the raw PhET code, so it will support type-checking with TypeScript, modules, and partial tree-shaking.

Imports are provided by subpackage as shown below:

import { Property, Emitter } from 'phet-lib/axon';
import { Display, Text, AnimatedPanZoomListener } from 'phet-lib/scenery';

This package also includes all dependencies statically, so it will declare e.g. jQuery/Lodash globally as window.$ and window._ respectively.

In-Code Documentation¶

Often, the best documentation for each library is available in the code itself. As you navigate through the codebase, you'll find well-documented code with inline comments and annotations that explain how things work. We encourage you to explore the code as it can provide the most accurate and up-to-date information. If you have any questions or need further assistance, please head over to the Discussions or chat platforms.

Note

While the SceneryStack community is housed in the SceneryStack GitHub organization, all libraries for development using SceneryStack are in the phetsims GitHub organization found at https://github.com/phetsims/.

Examples¶

Check out other projects that make use of SceneryStack libraries on the Example Showcase page. You can also check out any PhET or community-created interactive simulation to learn from as well.