TipTap Games

The game document

Before any single call, it helps to know the shape of the thing you're building. A TipTap game is not an app with a backend — it is one HTML file that runs in one panel of a swipeable feed, inside a strict sandbox. Every SDK page assumes this, so it's worth two minutes here first.

One self-contained file

Your whole game is a single .html file — markup, styles and script together. There is no bundler and no build step, and the file may not pull in anything from the network: no external <script src>, no CDN font, no remote image. Inline everything, or encode assets as data: URLs. The one thing you don't provide is the SDK: the platform injects window.TipTap for you before your script runs.

The smallest thing that counts as a game document

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>My Game</title>
</head>
<body>
  <canvas id="game"></canvas>
  <script>
    // window.TipTap is already here. No import, no <script src>, no build step.
    // Draw your game, then when a run ends:
    //   TipTap.submitScore(finalScore, { showLeaderboard: true });
  </script>
</body>
</html>

One panel in a feed

Your game does not own the screen. It lives in one panel of a feed the player swipes through, the way they'd scroll a video feed. That has two consequences you design around from the start:

  • It gets paused and un-paused. When your game scrolls out of view the platform pauses it, and resumes it when it comes back. Honour that so a timer doesn't drain in the background — see Game lifecycle.
  • It shares the sound. The player can mute every game at once. Check TipTap.canPlayAudio() before you ever play a sound.

Inside a sandbox

Your game runs in an isolated origin with no network access and no browser storage. This keeps every game safe to put in front of a stranger — and it changes how you do two ordinary things:

You can'tDo this instead
fetch() or any network callShip everything in the file. Talk to the platform only through window.TipTap.
localStorage / cookiesUse saveState / loadState — the only persistence you get, per player.
Load a remote font, script or imageInline it, or embed it as a data: URL.

The full model — the two origins, the exact content-security policy, and what it does and doesn't protect against — is on The security model. You don't need it to build; you need the three rules above.

From here

That's the whole model. If you haven't yet, the fastest way to feel it is Your first game — a playable file in five steps. Then the SDK pages in this section (Scores, Lifecycle, The player) are the place to look up a feature once you know you want it.