VibeGames

Publisher guide

Build a game with plain web tech.

A VibeGames app is a zip of HTML, JavaScript, CSS and assets. No SDK to install, no build step, no backend to run. Upload it, the platform validates it, and it appears in the store.

Why publish on VibeGames

  • Distribution. Your game is listed in the store the moment it passes validation. Players install it in a tap and receive every update automatically.
  • No backend to run. Cloud saves, device storage, player search, friends lists, messaging and push notifications come from the platform. You ship files, nothing else.
  • Offline by default. Installed games live on the player's device and work in airplane mode; saves sync when the connection is back.
  • Trust without review queues. The sandbox makes every game safe to install, so publishing is self-service and immediate.

What a guest app is

Your app runs inside the VibeGames shell in an isolated frame. It cannot reach the internet, read cookies, use browser storage or navigate anywhere. Everything it needs from the outside world goes through one object, window.vibe: save data in the cloud, store files on the device, find other players or let the player choose a friend, send them messages, open an external link, go fullscreen and exit.

  • Plain files. HTML fragment, scripts, stylesheets, images, audio, video, fonts and JSON. Any static web game fits.
  • Validated once. Every upload is checked server-side. Errors come back with file and line.
  • Installed, not streamed. Players download your app once; it starts from their device and works in airplane mode.
  • Private by design. You see app-scoped player ids and nicknames, never e-mail addresses or account ids.

Quick start

Five files make a complete app. Create a folder and add them.

1. The manifest

vibe-app.json
{
  "name": "Tap Counter",
  "version": "1.0.0",
  "description": "Count your taps, saved in the cloud on every device.",
  "icon": "icon.png",
  "orientation": "any"
}

2. The entry fragment

Not a full document: no <html>, <head> or <body>. Stylesheet links, script tags and exactly one <div data-vibe-root> that wraps your markup.

index.html
<link rel="stylesheet" href="style.css">
<div data-vibe-root>
  <h1>Tap Counter</h1>
  <p id="greeting">Connecting…</p>
  <p>You tapped <strong id="count">0</strong> times.</p>
  <button id="tap">Tap me</button>
  <button id="exit">Exit</button>
</div>
<script type="module" src="main.js"></script>

3. The script

Scripts run after the root div exists, so there is no DOMContentLoaded to wait for. Modules may use top-level await.

main.js
const $ = (id) => document.getElementById(id);

const ctx = await vibe.ready;                        // handshake done, assets available
$('greeting').textContent = `Hi ${ctx.player.nickname}!`;

let count = Number((await vibe.cloud.get('taps')) ?? 0);   // per player, synced across devices
$('count').textContent = count;

$('tap').onclick = async () => {
  $('count').textContent = ++count;
  await vibe.cloud.set('taps', count);               // works offline, syncs later
};

$('exit').onclick = () => vibe.exit();               // required: every app offers a way out

4. Styles and icon

Add a stylesheet and an icon.png (PNG, 32 to 512 pixels square). Relative paths in CSS url() and in HTML attributes just work.

style.css
[data-vibe-root] {
  min-height: 100vh;
  display: grid;
  place-content: center;
  gap: 12px;
  text-align: center;
  font-family: system-ui, sans-serif;
}

button {
  font: inherit;
  padding: 12px 24px;
  border-radius: 12px;
}

5. Zip and upload

Zip the files so that vibe-app.json sits at the root of the archive. In the app, open Publish, create an app entry and upload the zip. Validation runs in the background; when it passes, the version goes live.

Where to go next