What is ExoJS?

ExoJS is a TypeScript-first, zero-dependency 2D runtime for browser games and interactive apps.

It gives you the core pieces of a small engine — scenes, sprites, graphics, input, audio, effects, render targets, and a frame loop — while staying close to regular web development. You can use it from JavaScript or TypeScript, render into a canvas, and keep project structure in code.

Where ExoJS fits

Use ExoJS when you want to build a browser-based 2D game, visualization, toy, editor, or interactive scene with code.

It gives you engine-level building blocks without forcing a particular app framework or editor workflow. If you’re building a mostly DOM-based interface, keep using your UI framework of choice. If you’re building an interactive canvas surface, ExoJS can own that part.

How a project is shaped

A typical ExoJS project starts with two pieces: an Application and a Scene.

The application owns the runtime configuration — render backend, canvas size, asset path, frame loop. The scene loads resources, updates state, and draws each frame.

import { Application, Scene } from '@codexo/exojs';

class MyScene extends Scene {
    draw(context) {
        context.backend.clear();
    }
}

const app = new Application();
app.start(new MyScene());

From there, the same shape scales up: add sprites, split logic across multiple scenes, attach input, play audio, render effects, and move code into reusable objects as the project grows.

Distribution

ExoJS ships as ESM with TypeScript declarations. JavaScript projects can use the runtime directly; TypeScript users get typed APIs out of the box. A standalone browser bundle for <script>-tag use is on the roadmap.

Browser support

ExoJS targets evergreen browsers: current Chrome, Firefox, Edge, and Safari. Some examples in this guide need browser features beyond rendering — audio playback, gamepad APIs, or multi-touch input. Capability badges above each example list what it expects; when a feature is missing, the embedded preview shows a clear overlay instead of failing silently.

How to read this guide

Read Getting Started and Core Concepts in order — they build the mental model the rest of the guide assumes. After that, jump by topic.

Three resources work together: the guide explains concepts and workflows, the playground runs and edits every example live, and the API reference documents exact constructor options, method signatures, and return types.

Next Create a project

Scaffold a typed project with create-exo-app and run it in the browser.