Build your first SDK game

What you need

A creator account with Studio access and a desktop browser for the full Code editor. The Studio provides the SDK and builds your project. You do not need a terminal, a package installation or access to the platform source.

Create the project

1. Choose New game, then Start from a blank project.
2. Name the project and open it in Code mode.
3. Open Files > src/main.ts. Replace its contents with the complete example below.
4. Open llvls.json and check that entry is src/main.ts, engine is canvas, and keyboard and touch inputs are enabled. Keep the remaining generated settings.
5. Return to src/main.ts, choose Save, and confirm.

Complete example

Copy this entire block into the entry file. The SDK import is resolved by the Studio; do not install it with npm.

import llvls from '@llvls/sdk';

const canvas = document.createElement('canvas');
canvas.width = 640;
canvas.height = 360;
canvas.style.width = '100%';
canvas.style.height = '100%';
canvas.style.display = 'block';
canvas.style.touchAction = 'none';
document.body.style.margin = '0';
document.body.append(canvas);
const draw = canvas.getContext('2d');
if (draw === null) throw new Error('Canvas is unavailable');

let taps = 0;
let active = false;
let hostPaused = false;

function render(): void {
  if (draw === null) return;
  draw.fillStyle = '#141824';
  draw.fillRect(0, 0, canvas.width, canvas.height);
  draw.fillStyle = '#ffffff';
  draw.textAlign = 'center';
  draw.font = '32px system-ui';
  draw.fillText(`Taps: ${taps} / 10`, 320, 150);
  draw.font = '20px system-ui';
  const message = hostPaused
    ? 'Paused'
    : taps === 10
      ? 'Run complete'
      : 'Tap the canvas or press Space';
  draw.fillText(message, 320, 205);
}

function tap(): void {
  if (!active || hostPaused) return;
  taps += 1;
  if (taps === 10) {
    active = false;
    llvls.gameOver();
  }
  render();
}

canvas.addEventListener('pointerdown', tap);
addEventListener('keydown', (event) => {
  if (event.code !== 'Space' || event.repeat) return;
  event.preventDefault();
  tap();
});

// Subscribe before init can deliver host events. There is no audio in this example.
llvls.on('pause', () => {
  hostPaused = true;
  render();
});
llvls.on('resume', () => {
  hostPaused = false;
  // A completed run stays completed when a host overlay closes.
  render();
});

await llvls.init();
render();
llvls.loadingProgress(1);
await llvls.ready();
active = true;
llvls.gameplayStart();
render();

Run and check it

1. Choose Run and wait for the preview to finish building.
2. If Problems lists a build issue, fix it before continuing. Check that Preview is not showing last good build.
3. Activate the tap-to-play gate. Tap the canvas or press Space ten times.
4. Check that the tenth input shows Run complete, and further input does not change the count.
5. Choose Restart the game to start fresh.
6. Open the SDK panel, enable Pause the game, and check that input does not count. Resume and check that an unfinished run continues.
7. Choose Test on your phone to verify real touch input when that option is available.

Check your code

Read the TypeScript diagnostics shown by the full Code editor as well as Problems, Console and Build output. A successful preview build does not guarantee that every TypeScript issue is resolved. A plain text fallback editor does not provide the full editor diagnostics.

This example has no audio, external assets, ad requests or player-account requirements. A completed run stays completed when a host overlay closes. The host may offer next-game actions in public play; the Studio preview does not promise that panel.