melonJS TypeScript Boilerplate

A simple TypeScript + Vite boilerplate to create games with melonJS.

Built with:

• melonJS 2 — lightweight HTML5 game engine
• TypeScript — type-safe JavaScript
• Vite — fast dev server and bundler
• melonJS debug plugin — auto-loaded in development mode

Prerequisites

Ensure you have Node.js installed, then install dependencies:

npm install

Usage

• npm run dev — start the dev server at localhost:5173
• npm run build — generate a production build in the dist folder
• npm run preview — preview the production build locally

If everything goes well, you should see this:

Folder structure

src/
├── data/                  # game assets
│   ├── bgm/               # background music
│   ├── fnt/               # bitmap fonts
│   ├── img/               # images and spritesheets
│   ├── map/               # Tiled map files
│   └── sfx/               # sound effects
├── scripts/
│   ├── renderables/       # game objects (player, enemies, etc.)
│   └── stage/             # game screens (title, play, etc.)
├── index.ts               # entry point
├── index.css              # base styles
└── manifest.ts            # asset list for the melonJS preloader

Prefer JavaScript?

This boilerplate works with plain JavaScript too. Just rename .ts files to .js — TypeScript is optional, not required. Vite handles both seamlessly.

Debug Plugin

The boilerplate includes the melonJS debug plugin, which is automatically loaded in development mode.

The debug panel is hidden by default and can be toggled with the S key. See the plugin docs for details.

Need Help?

• Discord — chat with the community
• Forum — ask questions
• API Docs — full API reference
• Wiki — tutorials and guides

Credits

• Thank you @edmundg for the original TypeScript x Vite boilerplate