Is it possible to run Phaser.js game in Weweb?

Ask us anything
1

Hi, testing out a new project and would love to better understand how to create a custom component in a given page? I want to see if Weweb could render a Phaser.js game I made within a specific page but couldn’t find anything under +Add for a layout that could handle custom JS to render a mini game natively. Do I need to host it elsewhere and access via iframe? Or is there a way to do this natively? Thank you very much!

2

Running a Phaser.js game inside WeWeb isn’t fully supported natively yet. The most practical approach is to host your game externally and embed it via iframe or a custom code block. This keeps performance stable and easier to manage. It’s a similar approach used for many browser-based projects, even games like the nulls brawl game rely on proper hosting and embedding to run smoothly across platforms.

3

You can run it inside the page without an iframe. The setup that works:

  1. Give Phaser a mount point. Add a Div where the game should be, and in Settings → Attributes set id = game-root. Give it a fixed height (Phaser sizes to the parent if you use the scale manager).
  2. Load Phaser. Either add the script in Project settings → Custom code → Head:
<script src="https://cdn.jsdelivr.net/npm/phaser@3/dist/phaser.min.js"></script>

or load it on demand inside the workflow below so it’s only fetched on that page.
3. Start the game in a page “On page load” workflow with a Custom JavaScript action:

const start = () => {
  if (window.__game) window.__game.destroy(true);
  window.__game = new Phaser.Game({
    type: Phaser.AUTO,
    parent: 'game-root',
    scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, width: 800, height: 600 },
    scene: [ /* your scenes */ ],
  });
};
if (window.Phaser) start();
else {
  const s = document.createElement('script');
  s.src = 'https://cdn.jsdelivr.net/npm/phaser@3/dist/phaser.min.js';
  s.onload = start;
  document.head.appendChild(s);
}
  1. Clean up on page unload with another Custom JS action: window.__game?.destroy(true); window.__game = null;. Without it, navigating away and back stacks multiple canvases.

Put your scene code in the same action or host it as a JS file and load it like Phaser. Test in Preview, the editor canvas doesn’t always run page load workflows the same way. To pass data back to WeWeb (scores etc.), call wwLib.wwVariable.updateValue(variableId, value) from inside the game.

If the game is big and self-contained, hosting it separately and embedding it is still fine, but you lose easy access to WeWeb variables.