# Online playground for Phaser

**URL:** <https://phaser.discourse.group/t/online-playground-for-phaser/14605>\
**Category:** Showcase\
**Created:** [August 2, 2024, 5:34pm UTC](https://phaser.discourse.group/t/online-playground-for-phaser/14605 "2024-08-02T17:34:15Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![hatemhosny](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/hatemhosny/32/8445_2.png) [@hatemhosny](https://phaser.discourse.group/u/hatemhosny)\
**Post date:** [August 2, 2024, 5:34pm UTC](https://phaser.discourse.group/t/online-playground-for-phaser/14605/1 "2024-08-02T17:34:16Z")

</div>

[LiveCodes](https://livecodes.io/) now has a starter template for Phaser:

> **[Phaser Starter - LiveCodes](https://livecodes.io/?template=phaser)**
>
> Phaser starter template on LiveCodes

 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/f/f81e9adb9bdec92b5f03d146857eef9994be0833.jpeg)

[LiveCodes](https://livecodes.io/) is a [feature-rich](https://livecodes.io/docs/features/), [open-source](https://github.com/live-codes/livecodes), [client-side](https://livecodes.io/docs/why/#client-side), code playground that supports [90+ languages and frameworks](https://livecodes.io/docs/why/#language-support). The [announcement post](https://blog.livecodes.io/introducing-livecodes/) gives a general overview and you can find here [what makes LiveCodes different](https://livecodes.io/docs/why).

Check starter templates: [LiveCodes](https://livecodes.io/?new)

npm modules are automatically loaded (from CDNs) when imported in code (with typescript type definitions) without any `npm install`s. No bundling is needed. Type definitions provide great editor features like auto-completions and show info on hover even when using JS (TS is obviously also supported).

 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/5/564f1c11b6272a9cb62adde9f4bcf91289c87d41.png)

These are examples for the official starter templates running in LiveCodes:

- Phaser sandbox: [LiveCodes](https://livecodes.io/?x=id/ivdyq3paeat)  
(based on [Phaser GitHub Example Phaser Sandbox Entry](https://phaser.io/sandbox/XyqPcjNr))
- TypeScript template: [LiveCodes](https://livecodes.io/?x=id/5qytr8rbf6q)  
(based on [GitHub - phaserjs/template-vite-ts: A Phaser 3 project template that uses TypeScript and Vite for bundling](https://github.com/phaserjs/template-vite-ts))
- React TypeScript template: [LiveCodes](https://livecodes.io/?x=id/26duem5v9k5&view=result)  
(based on based on [GitHub - phaserjs/template-react-ts: A Phaser 3 TypeScript project template that demonstrates React communication and uses Vite for bundling](https://github.com/phaserjs/template-react-ts))
- Vue TypeScript Template: [LiveCodes](https://livecodes.io/?x=id/bnwer5asbwd&view=result)  
(based on [GitHub - phaserjs/template-vue-ts: A Phaser 3 TypeScript project template that demonstrates Vue communication and uses Vite for bundling](https://github.com/phaserjs/template-vue-ts))
- Solid Template: [LiveCodes](https://livecodes.io/?x=id/dw86rx8ckn9&view=result)  
(based on [GitHub - phaserjs/template-solid: A Phaser 3 project template that combines SolidJS, TypeScript and uses Vite for bundling](https://github.com/phaserjs/template-solid))

LiveCodes is a client-side app, with no backend. All processing (including compilation, code formatting, running tests and automatic loading of modules and types) occurs in the browser. This allows LiveCodes to be totally free for unlimited usage with no account required. It also allows [self-hosting](https://livecodes.io/docs/features/self-hosting) on any static file server.

Projects can be:

- [shared](https://livecodes.io/docs/features/share/) (see examples above)
- [exported](https://livecodes.io/docs/features/export/) (e.g. GitHub gist)
- [deployed](https://livecodes.io/docs/features/deploy/) (to GitHub Pages): e.g. [Phaser&nbsp;](https://hatemhosny.github.io/phaser-demo/)

 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/4/41996a818424a9e7674c32f03b65eb692a9446c5.png)

LiveCodes also has a guide for adding assets: [Assets | LiveCodes](https://livecodes.io/docs/features/assets)

Playgrounds can be [embedded](https://livecodes.io/docs/features/embeds) in any webpage, using a powerful, yet easy-to-use, [SDK](https://livecodes.io/docs/sdk).

This is an example for an embedded playground: ([open in LiveCodes](https://livecodes.io/?x=id/9pax57z5hiy&view=result))

```html
<h1>Phaser Demo</h1>

<div id="container" style="height: 500px"></div>

<script type="module">
import { createPlayground } from "https://unpkg.com/livecodes";

const options = {
  config: {
    mode: "simple",
    // layout: "vertical",
    activeEditor: "script",
    editor: "monaco",
    tools: {
      status: "none",
    },
    script: {
      language: "js",
      content:
        "import * as Phaser from 'phaser';\n\nclass Example extends Phaser.Scene {\n constructor() {\n super();\n }\n\n preload() {\n this.load.setBaseURL('https://labs.phaser.io');\n\n this.load.image('sky', 'assets/skies/space3.png');\n this.load.image('logo', 'assets/sprites/phaser3-logo.png');\n this.load.image('red', 'assets/particles/red.png');\n }\n\n create() {\n this.add.image(400, 300, 'sky');\n\n const particles = this.add.particles(0, 0, 'red', {\n speed: 100,\n scale: { start: 1, end: 0 },\n blendMode: 'ADD',\n });\n\n const logo = this.physics.add.image(400, 100, 'logo');\n\n logo.setVelocity(100, 200);\n logo.setBounce(1, 1);\n logo.setCollideWorldBounds(true);\n\n particles.startFollow(logo);\n }\n}\n\nconst config = {\n type: Phaser.AUTO,\n width: 800,\n height: 600,\n physics: {\n default: 'arcade',\n arcade: {\n gravity: { y: 200 },\n },\n },\n parent: 'game-container',\n scene: Example,\n autoFocus: false,\n};\n\nconst game = new Phaser.Game(config);\n",
    },
    markup: {
      language: "html",
      content: '<div id="app">\n <div id="game-container"></div>\n</div>\n',
    },
    style: {
      language: "css",
      content: 'body {\n margin: 0;\n padding: 0;\n color: rgba(255, 255, 255, 0.87);\n background-color: #000000;\n}\n\n#app {\n width: 100%;\n height: 100vh;\n overflow: hidden;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n',
    },
  },
};
createPlayground("#container", options);
</script>

```

The SDK is also available for [react](https://livecodes.io/docs/sdk/react), [vue](https://livecodes.io/docs/sdk/vue) and [svelte](https://livecodes.io/docs/sdk/svelte).

In addition, the SDK allows communication with the embedded playgrounds using [multiple methods](https://livecodes.io/docs/sdk/js-ts#sdk-methods) (e.g. set/get code or config, watch for code change or console output, run tests and get results, etc)

This allows making interactive tutorials. See the blog post: [Let’s Make an Interactive Coding Tutorial](https://blog.livecodes.io/lets-make-an-interactive-coding-tutorial)

LiveCodes is mobile friendly, has responsive (vertical vs horizontal) layout and supports multiple code editors: the powerful Monaco editor on desktop and the lighter-weight, touch-friendly codemirror6 on mobile. There are also light and dark modes.

I believe this can make it easier for more people to try Phaser and get started.

Disclosure: I’m the author of LiveCodes.

(also posted on [GitHub discussions](https://github.com/phaserjs/phaser/discussions/6881))  
Thank you.