---
hide:
  - navigation
  - toc
---
<style>
  .md-typeset h1 {
    display: none;
  }

  .md-button {
    font-size: 1.2rem;
  }
</style>

# SceneryStack

![SceneryStack with rocket logo](about/assets/png/scenerystack-banner.png)

## Create Highly Interactive Content for a Multimodal and Accessible Web

[SceneryStack](./learn/overview.md) is an open-source TypeScript framework designed to create powerful, interactive, and accessible web experiences. SceneryStack offers front-end web development libraries for building engaging simulations, educational tools, or next-generation web applications. Included is support for robust accessibility features like dynamic screen-reader descriptions and alternative input (e.g., keyboard navigation).

??? abstract "**Learn about SceneryStack's features and capabilities**"
    For a full list of features and capabilities, check out all of the [**FEATURES**](./learn/features.md).

    | _Rendering and Data Handling_ | _Input and Accessibility Features_ |
    |-----------------------------|----------------------------------|
    | **Cross-Platform Capabilities**: Shield from bugs and quirks of modern browsers. | **Screen Reader Access**: Novel and effective access using the research-backed Parallel Document Object Model (PDOM) ([Experience "Interactive Description"](https://youtu.be/gj55KDRdhM8)). |
    | **Offline Support**: Downloadable, fully offline, single-file artifacts. | **Dynamic Spoken Content**: Customizable through Web Speech ([Experience "Voicing"](https://youtu.be/mwCc_NDmqx4)). |
    | **Pixel-Perfect Design**: Optimized for high pixel density devices with color profile support. | **Interactive Highlighting**: Extends visual accessibility features to pointer/touch input. |
    | **CSS Abstraction & Animation**: Utilize the `Twixt` library for advanced animations. | **In-App Zooming**: Features like pinch-to-zoom and panning. |
    | **TypeScript Integration**: Ensures type safety and autocomplete. | **Multimodal Libraries**: Integrate Web Audio with `Tambo`, computer vision with `Tangible`, and experimental Vibration API support with `Tappi`. |
    | **Real-Time Updates**: Trace dependencies and updates using the `Axon` library. | **Enhanced Touch and Mouse Areas**: Extended touch handling including Swipe-to-Snag functionality. |
    | **Rich Component Library**: Build accessible components with ease. | **Extendable Input System**: Upholds foundational accessibility. |
    | **Multiple Rendering Support**: Seamless functionality across SVG, Canvas, and increasing WebGL support. | **Keyboard Traversal Order**: API to specify keyboard traversal order. |
    | **Innovative Layout Engine**: Advanced layout, shape computations, and CAG for interface components. | |
    | **Enhanced iframe Support**: Easier user interaction within iframes. | |
    | **Charts and Graphs**: Support using the `Bamboo` library. | |
    | **Declarative APIs**: Optimize performance and quality adjustments. | |

    **SceneryStack is also ready to be implemented with your favorite JS libraries and frameworks, such as React, Three.js, and more.**

<iframe id="accessible-interactive" style="height: 270px; width: 75%; border: none;" scrolling="no" src="/demos/accessible-interaction-demo/"></iframe>
<figcaption> <a href="https://scenerystack.org/learn/tutorials/accessible-interaction/">SceneryStack demo</a> with keyboard navigation, interactive screen-reader accessible descriptions, and pan and zoom</figcaption>

SceneryStack is the development framework behind [PhET Interactive Simulations](https://phet.colorado.edu/), where it powers STEM-focused interactives used by millions around the world. PhET continues to maintain and contribute to SceneryStack for the purposes of creating multimodal and accessible STEM interactives.

{==
**SceneryStack is currently a project of PhET Interactive Simulations at University of Colorado Boulder, with the goal of transitioning to an independent open-source community, driven by a collective passion for a more people-friendly web.**
==}

## Ready to use SceneryStack?

[GET STARTED :octicons-rocket-24:{ .rocket }](./learn/overview.md){ .md-button .md-button--primary }

Learn how to use SceneryStack in your web project or leverage the entire stack for your next highly interactive experience.

<figure markdown>
  ![Animated image highlighting keyboard navigation through interactive simulation about statistical measures of center through play with soccer balls](assets/centerandvariabilitykeyboard.gif)
  <figcaption><a href="https://phet.colorado.edu/en/simulations/center-and-variability">Keyboard-friendly interactive simulation</a> created by @phetsims using SceneryStack</figcaption>
</figure>

## Community 🌍

Looking to chat with others using SceneryStack, contribute to the community, or just need to ask some questions?

[Join the Community](community/join.md){ .md-button .md-button--primary }

<iframe src="https://phet.colorado.edu/sims/html/friction/latest/friction_all.html" height="400" width="800" style="border:none;" title="Friction Simulation - made with SceneryStack"></iframe>
<figcaption> <a href="https://phet.colorado.edu/sims/html/friction/latest/friction_all.html">Interactive Physics Simulation with Inclusive Features</a> by @phetsims using SceneryStack</figcaption>

## Accessibility and Inclusive Features

Want to learn more about the accessibility and inclusive design features of SceneryStack and how to create accessible content for all users?

[:octicons-rocket-24: Learn about Accessibility and Inclusive Design](./accessibility/a11y_guides.md){ .md-button .md-button--primary }

## Contributing 🤝

We encourage contributions from the community! Whether you're a seasoned developer or just starting, there are many ways to contribute to SceneryStack.

[Help Develop SceneryStack](./CONTRIBUTING.md){ .md-button .md-button--primary }

<figure markdown>
  ![""](assets/energyskatepark.gif)
  <figcaption><a href="https://phet.colorado.edu/en/simulations/energy-skate-park">Energy Skate Park</a>, dynamic and game-like simulation created by @phetsims using SceneryStack</figcaption>
</figure>


[:octicons-heart-fill-24:{ .heart } Donate to SceneryStack](https://giveto.colorado.edu/campaigns/59135/donations/){ .md-button .md-button--primary }