Build your first ExoJS project
Start with a TypeScript project, learn the Scene and rendering model, then move into input, audio, effects, debugging, and deployment.
npm create exo-app@latest my-game Recommended learning path
Follow these in order to go from an empty folder to a deployable game.
- What is ExoJS?
See what ExoJS is and how its pieces fit together.
- Setup
Scaffold a typed project and run the dev server.
- Deployment
Build and host the finished project.
Browse by topic
Build games
Scenes, input, collision, and a full game walkthrough.
Create visuals
Graphics, sprites, text, filters, and particles.
Work with audio
Playback, spatial audio, effects, and beat detection.
Load assets
Declare, load, and cache textures, audio, and data.
Build UI
HUDs, dialog systems, pause menus, and typewriter text.
Debug & optimize
Overlays, profiling, and render-pipeline inspection.
Ship your game
Build, troubleshoot, and deploy to production.
Guides, Playground, and API
Guides
Explain concepts and workflows, step by step.
Playground
Run and edit every example live in the browser.
API reference
Documents every class, method, and option.
All chapters
46 chapters across 10 parts.
01 Getting Started
What is ExoJS?
A short tour of what ExoJS is, where it fits, how a project is shaped, and how to read this guide.
Setup
Create a typed ExoJS project with create-exo-app, run the dev server, and produce a production build.
Project structure
Find your way around a create-exo-app project: the entry point, scenes, assets, and how main.ts wires an Application to a Scene.
Your first scene
Build a working scene from scratch — load a texture, position a sprite, draw it, and animate it across frames.
Resize, DPR & the canvas
Fit the canvas to the window, render crisply on high-DPI displays, and re-lay-out content when the size changes.
02 Runtime
Application
How the application owns canvas, render backend, resources, input, scene management, and the frame loop.
Scenes & lifecycle
How scenes split runtime work, compose into a stack, and the order their lifecycle hooks run in.
Scene graph
Parent-child structure, transform inheritance, render order, masks, and how the tree stays composable.
Coordinates and views
World space, canvas space, and how the active view maps between them — plus camera movement, zoom, and split rendering.
03 Assets
04 Rendering
Graphics
Draw procedural shapes and mesh-based geometry.
Sprites
Render image-based content from textures, sheets, SVG, and video.
Text
Control layout, styling, and visual effects for runtime text.
Animation
Animate transforms and values with tweens and frame updates.
Render targets
Render into intermediate textures and reuse those outputs in scene composition.
Pixel snapping
Keep sprites, panels, and tilemaps crisp by snapping rendered output to the device-pixel grid — render-only, camera- and DPR-aware.
05 Effects
Filters
Stack shader and color effects to control final image style.
Particles
Spawn and tune particle systems for environmental and reactive effects.
Post-processing
Build multi-pass render flows for bloom, trails, and mirror effects.
Custom mesh shaders
Attach a custom GLSL or WGSL shader to a Mesh through a MeshMaterial for backend-portable visual effects.
06 Input
07 Audio
Audio basics
Play sounds and music with reliable runtime controls.
Spatial audio
Place listener and sources in space for directional sound behavior.
Audio effects
Shape sound with filters and bus-level processing.
Beat detection
Drive visuals from beat and frequency information.
Audio-reactive visualization
Bridge audio analysis and beat-detection state into the render pipeline via DataTexture and BeatDetector polling.
08 Recipes
HUD overlay
Compose gameplay and UI layers without coupling scene logic.
Camera follow & parallax
Create depth and motion parallax from camera and pointer movement.
Pause menu
Pause scene updates while keeping clear visual context for players.
Split screen
Render multiple viewpoints in a shared scene timeline.
Audio reactive scene
Map audio analysis to movement, particles, and camera response.
Game feel
Add feedback cues that make interaction feel responsive.
UI patterns
Build reusable dialog and text-flow UI behavior in-scene.
Cinematics
Coordinate timing, camera, and audio for scripted scene beats.
Collision detection
Validate collision flow and response with interactive shapes.
Build Orb Dodge
Build a complete small game from scratch: player movement, spawning orbs, collision, scoring, a HUD, and a game-over screen — all without external assets.
09 Debugging & Performance
Debugging & inspection
Inspect scene state and runtime behavior with overlay layers, and trace filter chains and render passes with the in-engine inspector.
Performance
Measure scene limits with focused stress examples.
Backend comparison
Compare backend behavior and decide what to ship.
Custom renderers
Extend rendering with custom passes and backend-specific logic.
10 Shipping
Troubleshooting
Diagnose and fix the most common ExoJS problems: blank canvas, API errors, missing assets, audio, input, and performance.
Deployment
Build and host an ExoJS app: local production build, Vite base path, static hosting, assets, CDN bundles, and browser support.
v0.8.x to v0.9.0
Migrate ExoJS projects from v0.8.x to v0.9.0 with mechanical API rename and cleanup steps.