--- hide: - navigation - toc --- # 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.**

SceneryStack demo with keyboard navigation, interactive screen-reader accessible descriptions, and pan and zoom
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.
![Animated image highlighting keyboard navigation through interactive simulation about statistical measures of center through play with soccer balls](assets/centerandvariabilitykeyboard.gif)
Keyboard-friendly interactive simulation created by @phetsims using SceneryStack
## 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 }
Interactive Physics Simulation with Inclusive Features by @phetsims using SceneryStack
## 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 }
![""](assets/energyskatepark.gif)
Energy Skate Park, dynamic and game-like simulation created by @phetsims using SceneryStack
[:octicons-heart-fill-24:{ .heart } Donate to SceneryStack](https://giveto.colorado.edu/campaigns/59135/donations/){ .md-button .md-button--primary }