Skip to main content
This guide is for you if you know some HTML, CSS and JavaScript and want to build a theme from scratch, without starting from a built-in one. Together we will build a theme that is small but complete:
  • a grid of your games’ covers,
  • used with mouse, keyboard or controller,
  • with a page for each game (description, Play/Install, favorite),
  • with options anyone can change in Settings → Appearance without touching code,
  • and that adapts to Big Picture.
The finished result is in examples/ejemplo-tema/: four files you can copy as they are. This guide is practical. To see everything the SDK offers, use the reference.
The example writes its interface in Spanish. That Spanish text is the translation key: English, and the other languages, come from a dictionary, with no code changes. See Languages.

​
Before you start: what a theme is

A theme is an ordinary web page that ejGames opens fullscreen. It runs in a closed box (an isolated iframe): no internet, and no access to the disk. Everything it needs, it asks ejGames for through an object that appears on your page on its own, window.ejg (the SDK): the list of games, notices when something changes, launching a game, opening settings… The launcher’s own screens (settings, search, the game editor, the quick menu, profiles) are drawn by ejGames on top of your theme. You only take care of showing the library your way.

​
Chapters

1. Where the theme goes, and how to turn it on

The theme folder, the gallery and developer mode.

2. The smallest theme.json

The manifest that makes ejGames recognize your theme.

3. index.html and the first main.js

The page, a little style, and the first data from the SDK.

4. Cover grid

Draw the library fast, even with thousands of games.

5. Controller and keyboard

Spatial navigation with the kit, and the hint bar.

6. The game page

Description, Play or Install, favorite, and back.

7. Options without code, and Big Picture

Settings anyone can edit from Appearance, and TV mode.

8. Sounds and launcher colors

Sounds, host screen colors, achievement notices and window buttons.

9. Explore and downloads

Open the store, show what is downloading, or draw your own store.

10. Debugging and common mistakes

See the errors, the theme’s limits, and the most common failures.

11. Export and share

Pack the theme into a .ejtheme, and what to do next.