Bitsy Tutorial: Tiny Browser Games for Beginners

Bitsy is the smallest viable game engine for browser games. Adam Le Doux released it in 2017 as a tool for making “little games, worlds, and stories” — and the constraints (8×8 pixel tiles, 16×16 tile rooms, two-color palette per scene, no scripting) make it the friendliest entry point into game development that exists. This Bitsy tutorial walks through building your first tiny browser game from scratch: rooms, sprites, dialogue, exits, and export to a playable HTML file.

What Bitsy is

Bitsy is an in-browser game editor and engine. Open make.bitsy.org and the entire tool is there — no signup, no download, no install. You build a tiny game with the editor, hit “Export Game,” and download an HTML file. That HTML file is the whole game. Upload it anywhere or share the file directly.

The output is a single, top-down, tile-based browser game. Player walks around. Player talks to sprites. Player picks up items. Player walks through exits to other rooms. That’s the entire vocabulary of mechanics. The depth is in how you compose them.

The Bitsy aesthetic — chunky pixels, two-color palettes, short dialogue — has become a recognizable style in itch.io game jams and personal-narrative game communities. Thousands of Bitsy games exist; many are excellent.

Why Bitsy is the right beginner engine

Three reasons. First, you can’t get lost in tools. Every feature is on one of five tabs. You see everything. Second, you can’t break anything. No scripting means no syntax errors, no engine crashes, no performance problems. Third, the constraints force focus. With 8×8 tiles you can’t waste hours on art detail; with no scripts you can’t waste hours on combat systems. You make a game about a place and the things in it.

For beginners, that focus is the whole point. The fastest way to ship a first browser game is the engine that lets you do the least.

The Bitsy interface

Open make.bitsy.org. The screen has:

• Room view (center): The 16×16 grid of one room. The current room is what you’re editing.
• Tab buttons (left): Tile, Sprite, Item, Avatar, Dialog. Switch between editing modes.
• Object editor (top right): Where you draw the 8×8 pixels of the currently selected tile/sprite/item.
• Palette and color controls: Background color, tile color, sprite color — three colors per palette.
• Game data / Export: Where you copy out the game data string or export the HTML.

Click on the Room view to place whatever you have selected. Click on the Object editor’s 8×8 grid to draw pixels. That’s the entire interaction model.

Step 1: Draw a tile

Click the Tile tab on the left. You’ll see one tile already created (a default solid block). Click “+” to add a new tile. Name it (Tree, Wall, Path — anything).

In the Object editor, click pixels in the 8×8 grid to toggle them on/off. Build a small image — say, a tree: a triangle of trunk pixels with a leafy top.

Toggle “wall” on or off for the tile. Walls block the player; non-walls are passable.

Now go to the Room view. Click somewhere in the grid; your tree appears. Click multiple cells to place multiple trees.

Step 2: The avatar

Click the Avatar tab. The avatar is your player character. There’s only ever one. Draw their 8×8 sprite — a person, an animal, a ghost, a sentient blob, whatever fits the story.

Click in the Room view to place the avatar. They appear where you click. When you export the game, the player starts at this position.

Step 3: A sprite to talk to

Sprites are NPCs and decorations. Click the Sprite tab. Click “+” to add. Name it (Old Man, Cat, Strange Door). Draw the 8×8 sprite.

Place the sprite in the room by clicking. Now the room has the avatar and another sprite.

The Bitsy-specific feature: every sprite can have dialogue. Click the sprite, then go to the Dialog box for that sprite. Type the line(s) the sprite will say when the player walks into it. Save.

Test it: hit the play button at the top. You’re the avatar; arrow keys move you. Walk into the sprite. Their dialogue pops up. Press Space to advance.

Step 4: Adding rooms

One room is fine for a tiny game; multiple rooms make a world. In the Room editor, click the room dropdown → “+ add new room.”

You’re now editing a blank room. Draw some tiles, place some sprites — make it different from the first room.

To connect rooms: click the Exit tool at the top of the Room editor. Click a tile in Room A to place the exit entry point. Then click on Room B’s view to set the destination. The player walks onto the exit tile, the screen fades, they appear in Room B at the destination.

This is the entire navigation system. Multi-room Bitsy games are built by chaining rooms with exits.

Step 5: Items

Items are pickup-able things. Click the Item tab. Click “+”. Name (Key, Apple, Mysterious Diary). Draw the 8×8 sprite.

Place an item in a room. When the player walks over it, they pick it up. Bitsy tracks how many of each item the player has.

You can use items as gates: a sprite’s dialogue can check whether the player has an item, and respond differently. The dialog editor has a “branching” feature where you write something like:

{item "key" >= 1}
  You unlock the door.
  {exit "Throne Room" "5" "5"}
{else}
  The door is locked.
{/item}

That’s the closest Bitsy gets to scripting — a few inline dialog tags for branching, sounds, and exits. The full list is in Adam’s documentation.

Step 6: Multi-frame sprite animation

Sprites can have two frames (an idle frame and an animation frame). Click the sprite, click “animation” → add frame, draw the second frame. The sprite cycles between them as the game runs. This adds a lot of life — a cat that twitches its tail, a fire that flickers.

The avatar can also have an animated walk. Same process.

Step 7: Palette and aesthetic

Each room can use a different palette. Three colors: background, tile, sprite. Switch palettes for different rooms to convey mood — a green forest, a dark cave, a beige desert.

Click the Palette dropdown in the Room editor. “+ add new palette” to create one. Edit the three colors via the color pickers. Assign the palette to whichever rooms should use it.

This is the entire art-direction system. The aesthetic discipline forced by three colors is real — Bitsy games look like Bitsy games because they have to.

Step 8: Export

Click “Export Game” (top right). A dialog appears with download options. Pick HTML. A self-contained HTML file downloads.

Open the file in any browser. The game plays. Upload it to itch.io, embed it in a blog, share it on a forum — the single file is the entire game.

For more sharing, itch.io is the standard place for Bitsy games. There’s a thriving Bitsy community there and dozens of game jams a year.

Game design notes

The constraints reward certain kinds of games. Things Bitsy is good for:

• Personal stories and memoir-y games. Walking through a room of significant objects, each with a paragraph of dialogue. Bitsy games of this kind on itch.io are some of the most moving short games on the web.
• Tiny puzzles. An item gates a door; collecting things in order unlocks a final room.
• Walking simulators. Atmospheric exploration with no fail state, just rooms to find and sprites to read.
• Game jams. A 48-hour Bitsy game can be polished and complete in a way a 48-hour Unity game can’t.

Things Bitsy is not for: action games, combat, real-time anything, large worlds, online multiplayer. The engine isn’t a fit for those and trying to force it produces worse games than picking a different tool.

Resources

Adam Le Doux maintains documentation and example games at ledoux.itch.io. Mod versions of Bitsy (Bitsy 3D, Bitsy HD, several community forks) expand the engine in different directions; they’re worth exploring once you’ve shipped one game in vanilla Bitsy. The Bitsy community on itch.io is active and friendly — search “bitsy” on itch.io for hundreds of example games to play and learn from.

Frequently asked questions

Is Bitsy free?

Yes. The editor at make.bitsy.org is free. Adam Le Doux accepts donations on itch.io but you don’t need to pay to use it.

How long does it take to make a Bitsy game?

A focused short Bitsy game (one or two rooms, one or two sprites, a few minutes of play) can be built in under an hour once you know the editor. Longer atmospheric games take a weekend.

Can Bitsy games have sound?

Limited. The engine has minimal audio support. Some forks add fuller sound; vanilla Bitsy is mostly silent except for the typing sound during dialogue.

Where do I share my Bitsy game?

itch.io is the standard. Create a free itch.io account, upload the exported HTML file, set the game to “play in browser,” publish. Bitsy game jams on itch.io are a great way to find an initial audience.

Is Bitsy good for learning game design?

Yes. The constraints force you to think about pacing, atmosphere, and storytelling rather than systems. Many designers credit Bitsy as their entry point into game development.

The takeaway

This Bitsy tutorial covers the entire engine: rooms, tiles, sprites, items, dialogue, exits, palettes, export. The whole tool fits on one screen. The constraints are the feature. You’ll ship a first game faster than in any other engine, and you’ll learn what designing a tiny browser game is actually about. For a Bitsy-adjacent browser break — minimal art, minimal mechanics, maximum focus — the Chrome Dino game is the spiritual cousin: one button, one rule, infinite runtime.

Related: Phaser Tutorial for Beginners: Your First Game · How to Play Crossword Puzzles for Beginners · How to Play Wordle — Strategy Guide for Beginners to Experts