Multiplayer HTML5 games on itch.io

itch.io hosts HTML5 games for free, and with GameRelay they can be multiplayer without a server of your own. Upload the game as usual, allow itch.io's game domain on your key, and get players together with quick match and room codes.

How it works on itch.io

itch.io serves an HTML5 game from its own domain, itch.zone, inside a frame on your game's page. The game connects to GameRelay from that frame like it would from any website. Nothing runs on a server you manage, so it suits game jams and small games that need to stay up for years.

1. Add GameRelay to your game

Create an instance at gamerelay.io/app and copy its public key (gr_pub_…). Add the SDK with a script tag, or bundle @gamerelay/sdk from npm:

<script src="https://gamerelay.io/sdk/gamerelay.js"></script>

Then follow the guide for your engine (Phaser, Three.js, Kaplay) or the quickstart.

2. Get players into the same room

On your own site, the easiest way to invite friends is a link with the room in it. On itch.io the address bar shows your itch.io page, not the game's frame, so a link with ?room= doesn't reach the game. Use quick match for strangers and short room codes for friends instead:

<div id="lobby">
  <button id="quick">Quick match</button>
  <button id="host">Host a private game</button>
  <input id="code" placeholder="Room code" maxlength="8"> <button id="join">Join</button>
  <p id="status"></p>
</div>
<script type="module">
  const status = document.getElementById('status');
  const relay = await GameRelay.connect({ publicKey: 'gr_pub_…' });

  async function enter(join) {
    try {
      const room = await join();
      status.textContent = `Room ${room.code}: tell your friends this code`;
      startGame(room); // your game
    } catch (err) {
      status.textContent = err.code === 'room_not_found' ? 'No room with that code' : err.message;
    }
  }
  document.getElementById('quick').onclick = () => enter(() => relay.quickMatch({ maxPlayers: 4 }));
  document.getElementById('host').onclick = () => enter(() => relay.createRoom({ maxPlayers: 4, public: false }));
  document.getElementById('join').onclick = () => enter(() => relay.joinRoom(document.getElementById('code').value));
</script>

For a server browser, tag rooms by game mode and list them with relay.listRooms(tag); see the docs.

3. Upload

1. Zip your game with index.html at the top level of the zip.
2. On itch.io, create a new project, set Kind of project to HTML, upload the zip and tick This file will be played in the browser.
3. Set the embed size to your game's canvas size, and save as a draft while you test.

4. Lock your key to itch.io

On the instance in the dashboard, add https://*.itch.zone under Allowed origins, plus http://localhost for testing on your machine. Other sites can then no longer use your key. If the game won't connect after uploading, this list is the first thing to check: the origin is itch.zone, not itch.io.

5. Test it

Open your project's page in two browser windows and join the same room. Anonymous players are per tab, so two windows are two players. Then publish.

Tips

• Empty rooms are the real problem for a small game. Show how many players are online with relay.online(), offer a single-player mode while people wait, and let quick match fill rooms.
• Leaderboards work on itch.io too (relay.leaderboard.submit), and give players a reason to come back without anyone else online.
• Game jams: multiplayer games stand out in a jam, and a hosted backend means the game still works after the jam ends.

Try it

GameRelay has a free plan, no card needed. Get a public key, then follow the quickstart, or point your AI coding agent at llms.txt.