Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?


Failed to load latest commit information.
Latest commit message
Commit time

p5.js SceneManager

p5.js SceneManager is used by countless of p5.js developers across the world to add scene management capabilities to their p5.js sketches. If you are using 'p5.js SceneManager' in your project, it will be great if you share the details of your project with me (I may even feature your project on this page).


  • The free coding platform is using a modified version of 'p5.js SceneManager'. is used in schools and coding clubs around the world. Check it out - is super cool!

JavaScript projects


p5.js SceneManager helps you create p5.js sketches with multiple states / scenes. Each scene is a like a sketch within the main sketch. You focus on creating the scene like a regular sketch and SceneManager ensure scene switching routing the main setup(), draw(), mousePressed(), etc. events to the appropriate current scene.

Instead of putting all your code in the main setup() and draw() like this:

function setup() {


function draw() {


... you put each scene code in the setup() and draw() methods of individual Scene classes:

// Intro scene constructor function
function Intro()
    this.setup = function() {

    this.draw = function() {

    this.keyPressed = function() {
        // switch the scene
        this.sceneManager.showScene( Game );

// Main games scene constructor function
function Game()
    this.setup = function() {

    this.draw = function() {

The SceneManager will provide you with methods necesary to switch to the appropriate scene and route the main p5.js events to your defined events.

Source Code

Source code is located in lib/scenemanager.js

Demo Code

For demo please check sample.html, sample_instance.html and game.html

Online demo

If you want to play with scenes in an online playground, just go to code editor.

If you want to try the classical standalone demostrations of SceneManager, then check-out the following examples:

Code Online version
sample.html sample.html
sample_instance.html sample_instance.html
game.html game.html

Future development

The library can be further extended with features such as:

  • routing of more / all events to the appropriate scene class
  • running of multiple scenes in parallel (overlapped)
  • running of multiple scenes in parallel in individual areas of a bigger canvas

If you are interested in these features, please open an issue here on GitHub.


CC BY 2.0



Scene manager for p5.js games and applications






No releases published


No packages published