Skip to content


The client-side playground allows to easily create connections with rooms and inspect how they communicate with the server.


  • Lists all your defined room types
  • Allows to joinOrCreate / create / join into them.
  • When joinById is selected, provides a list of active rooms by id
  • Visualize the client state in JSON format
  • Table of incoming and outgoing messages
  • Table of raw events from the framework
  • Allow the client to send messages by type (auto-detected)

You can also interactively test how your room behaves during a dropped connection versus when a client leaves the room consensually.


The playground is installed by default on new projects created via npm create colyseus-app.

To manually install on an existing project, please do:

npm install --save @colyseus/playground

Then, import and bind it to your express app instance:

// import the route
import { playground } from "@colyseus/playground";

// bind it as an express middleware
app.use("/playground", playground);


This tool is built using React and TailwindCSS, making it easier for community members to contribute.

You are welcome to use the feedback thread to share ideas for features and/or improvements.

Pull-requests are also welcome!