Quickstart

This page builds the smallest game that is complete on Remix: it boots, reports a score once per run and restarts when the host asks. Everything else on the platform is optional and layered on top of this.

1. Pick How You Want to Build

Remix Desktop does all of this for you. Open the app, describe a game, and the agent scaffolds a project, wires the SDK, previews it and publishes it. Come back to these docs when you want to understand what it built or extend it by hand.

By hand means one HTML file. You do not need a bundler, a package manager or a framework. The rest of this page is the by-hand path.

2. Write the Game

Save this as index.html. The game reads the Remix SDK as window.RemixSDK; step 3 covers the script tag that loads it.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, viewport-fit=cover"
    />
    <style>
      html, body { margin: 0; height: 100%; background: #060b0f; color: #fff; }
      body { font-family: system-ui; }
      #tap { position: fixed; inset: 0; display: grid; place-items: center; }
      #tap { font-size: 48px; user-select: none; }
    </style>
  </head>
  <body>
    <div id="tap">0</div>
    <script>
      const sdk = window.RemixSDK
      const el = document.getElementById('tap')
      let score = 0
      let deadline = 0
      let over = true

      function startRun() {
        score = 0
        over = false
        deadline = performance.now() + 5000
        el.textContent = '0'
        requestAnimationFrame(tick)
      }

      function tick(now) {
        if (over) return
        if (now >= deadline) {
          over = true
          // Exactly once per run. The host draws the results screen.
          sdk.singlePlayer.actions.gameOver({ score })
          return
        }
        requestAnimationFrame(tick)
      }

      el.addEventListener('pointerdown', () => {
        if (over) return
        score += 1
        el.textContent = String(score)
        sdk.hapticFeedback()
      })

      // The host asks for another run; reset state, never reload the page.
      sdk.onPlay(() => startRun())

      sdk.ready().then(() => startRun())
    </script>
  </body>
</html>

Three things make it a Remix game:

• sdk.ready() waits for the host handshake before the first run starts.
• gameOver is called exactly once when the run ends. The host scores the first call it sees.
• onPlay resets the run in place. A reload would lose the host connection.

3. Upload It

Sign in to remix.gg, open the Studio and create a game with this file as its code. The Studio does not add the SDK, so first put the SDK script tag from SDK Overview in the file's <head>. Or upload from a terminal with an API key from your API console, which adds the tag for you:

curl -X POST "https://remix.gg/api/v1/games" \
  -H "Authorization: Bearer sk_live_your_api_key" \
  -H "Content-Type: application/json" \
  -d "$(jq -n --arg code "$(cat index.html)" '{ name: "Tap Five", code: $code }')"

The response's game.id is the new game's id. Each later upload is a new version:

curl -X POST "https://remix.gg/api/v1/games/GAME_ID/versions" \
  -H "Authorization: Bearer sk_live_your_api_key" \
  -H "Content-Type: application/json" \
  -d "$(jq -n --arg code "$(cat index.html)" '{ code: $code }')"

4. Test and Go Live

Open the game in the Studio. The preview runs your latest version inside the real player frame, so ready, gameOver and play behave the way they will in production. Play it once yourself, then launch it from the game page. A launch needs a name and an icon, and the version must pass an automated review first.

Next Steps

• Add a named leaderboard for a second thing worth ranking.
• Keep lifetime numbers in a save and unlock a few achievements when they cross a milestone.
• Read Publishing for what an upload does and what a launch needs.