index.html and the first main.js

The page

This is the theme’s complete index.html. It will not change for the rest of the guide, so here it is in full:

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <title>Mi primer tema</title>
    <link rel="stylesheet" href="style.css" />
    <script type="module" src="main.js"></script>
  </head>
  <body>
    <header class="barra" data-ejg-drag>
      <h1>Mis juegos <span id="total" class="total"></span></h1>
      <nav class="acciones" data-ejg-nodrag>
        <button data-focus data-ui="search">Buscar</button>
        <button data-focus data-ui="settings">Ajustes</button>
      </nav>
    </header>

    <main id="rejilla" class="rejilla" data-focus-group="rejilla"></main>

    <section id="ficha" class="ficha" hidden data-focus-trap></section>

    <footer id="pistas" class="pistas"></footer>
  </body>
</html>

What matters:

Leave the <head> tag as it is, with no attributes. ejGames inserts the SDK (<script src="/_sdk/ejg.js">) right after <head>, before your scripts. If it cannot find the tag, it puts the script at the very start, ahead of the <!doctype>, and the page drops into quirks mode.
type="module" on your script, so you can use import and await outside functions.
data-ejg-drag turns the bar into the handle for dragging the window (double-click maximizes). Anything that should not drag, such as the buttons, gets data-ejg-nodrag.
#rejilla will hold the covers, #ficha will be the game page (step 6) and #pistas the control bar (step 5). The data-focus… attributes are explained in step 5.

The visible strings (Buscar, Ajustes, and the ones in later steps) stay in Spanish. That text is the translation key. See Languages.

A little style

Start style.css with the base: colors in variables, the page fullscreen, and the top bar.

:root {
  --fondo: #12141b;
  --panel: #1c1f29;
  --texto: #eceef4;
  --tenue: #9aa0ae;
  --acento: #7c5cff;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { height: 100%; background: var(--fondo); }
body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--texto);
  font: 15px/1.45 "Segoe UI", system-ui, sans-serif;
  user-select: none;
}

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }

/* Leave a strip free at the top: the launcher's window buttons appear there. */
.barra { display: flex; align-items: center; gap: 16px; padding: 40px 32px 14px; }
.barra h1 { margin: 0; font-size: 1.6em; font-weight: 600; }
.total { margin-left: 6px; font-size: 0.6em; font-weight: 400; color: var(--tenue); }
.acciones { margin-left: auto; display: flex; gap: 6px; }
.acciones button { padding: 6px 14px; border-radius: 8px; color: var(--tenue); }

That free strip is there because ejGames draws minimize, maximize and close in the top-right corner (they appear when the mouse passes over) and that area receives the clicks. In step 8 you will see how to draw them yourself if you prefer.

The first `main.js`

const ejg = await window.ejg.ready();
const rejilla = document.querySelector("#rejilla");

function pintar() {
  document.querySelector("#total").textContent = ejg.library.all.length;
  rejilla.replaceChildren(
    ...ejg.library.all.map((g) => {
      const p = document.createElement("p");
      p.textContent = g.title;
      return p;
    }),
  );
}

ejg.library.onChange(pintar);
pintar();

await window.ejg.ready() waits until ejGames has sent the data (library, profile, options). Always start this way.
ejg.library.all is the list of games, already sorted by name. It is an in-memory copy: reading it costs nothing.
ejg.library.onChange(fn) tells you when something changes: new games, a favorite, a cover that just finished downloading… Here we draw everything again. In the next step we will do it without rebuilding what did not change.

Save, choose the theme, and you should see your games’ names. Each game (Game) carries, among other things:

Field	What it is
`id`, `title`	identifier and name
`source`	where it came from: `folder` (a folder), `manual` (an `.exe` added by hand) or `repack` (Downloads)
`favorite`, `hidden`	favorite / hidden by the user
`playtime`, `lastPlayed`	seconds played, and the last session (Unix time, in seconds)
`developer`, `releaseDate`, `genres`	page data
`media`	art URLs: `coverThumb`/`cover` (2:3 cover), `heroThumb`/`hero` (wide background), `logo`, `header`, `icon`…

The full list is in the reference.

Themes

Step by step

index.html and the first main.js

The page

A little style

The first `main.js`

​The page

​A little style

​The first main.js

The page

A little style

The first `main.js`