Guide

Setup

Create a typed ExoJS project with create-exo-app, run the dev server, and produce a production build.

Intro ~1 min read

What you'll learn

  • create a typed project with create-exo-app
  • choose between the minimal, game-starter, and audio-reactive templates
  • run the dev server and a production build

Before you start

Setup

The fastest way to start is create-exo-app. It scaffolds a Vite + TypeScript project that already imports @codexo/exojs, runs a scene, and is ready for dev and build.

Create a project

Run the scaffolder and follow the prompts:

npm create exo-app@latest my-game

Then install dependencies and start the dev server:

cd my-game
npm install
npm run dev

The dev server prints a local URL. Open it and you’ll see a running scene with hot reload.

Choose a template

create-exo-app ships three templates. Pass one with --template, or pick it interactively:

TemplateStarts with
minimalOne scene drawing and animating a single shape — the smallest real project.
game-starterA player object, a game scene, and a game-over scene with restart.
audio-reactiveAn analyser-driven scene that turns sound into a live spectrum.
npm create exo-app@latest my-game -- --template game-starter

The Project structure chapter walks through what each file does.

Build for production

Vite produces a static bundle you can host anywhere:

npm run build     # output in dist/
npm run preview   # serve the production build locally

The Deployment chapter covers hosting, base paths, and assets.

Add ExoJS to an existing project

If you already have a bundler-based project, install the runtime directly:

npm install @codexo/exojs

The package ships as ESM with TypeScript declarations, so any modern bundler (Vite, esbuild, Rollup, webpack, Parcel) picks up both the code and the types. ExoJS renders into a regular HTMLCanvasElement; create one yourself or let Application create it for you:

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

// Pass an existing canvas...
const canvas = document.querySelector<HTMLCanvasElement>('#scene')!;
const app = new Application({ canvas: { element: canvas } });

// ...or let the application create one and mount app.canvas yourself.
Next Tour the project structure

See where the entry point, scenes, and assets live in a generated project.