← All guides

How to Build Tile Maps in Your Browser

6 min read · Updated October 2026

The Map Editor turns a tileset into a paintable palette: cut the image into tiles, create a grid, and paint your level with brush, eraser and flood fill across multiple layers, with undo. Maps save in your browser as you work and download as Tiled maps or PNG images.

Open the Map Editor — free, in your browser, no signup.

  1. Get tiles into the editor. Click "Upload Tiles" in the editor header, or drop images on the tile palette. For a tileset image choose "Cut into tiles (a tileset)", set the tile width and height, and add margin and spacing if your tileset has gaps between tiles; the preview draws the cut lines. "Skip fully transparent tiles" is on by default and duplicate tiles are merged, so the Add button tells you how many new tiles you get. For separate tile images choose "Each image is one tile"; images already at the map’s tile size go straight into the palette. Sprites in your session appear in the palette too, so tiles you draw in the Pixel Art Editor and send to the session show up there.
  2. Create the map. Click "New Map" and set a name, the map size in tiles (Width and Height, 1–200 each) and the tile width and height in pixels (8–128 each), then "Create Map". Tiles of another size are stretched to fit the map’s tile size.
  3. Pick a tile. Click a tile in the palette to select it. Its size and where it came from appear in a fixed line under the tiles, so the tiles never move while you aim; "Hide" folds the palette away when you need the room.
  4. Paint. Brush paints the selected tile with a click or a drag; the Size slider widens it from 1×1 to 5×5 cells. Eraser clears cells, and right-click erases a single cell with any tool. Fill floods every connected cell that holds the same tile, on the selected layer only, so a background fill never overwrites decoration. On big maps use Pan and the zoom buttons (25–400%). Undo and redo cover every stroke, fill and layer change: Ctrl/Cmd+Z, Shift+Ctrl/Cmd+Z, or the toolbar buttons.
  5. Organize with layers. The + button in the Layers panel adds a layer on top. Layers are named Layer 1, Layer 2 and so on, and the editor can’t rename them — do that in Tiled if your game looks layers up by name. Click a layer to make it the paint target, and use its opacity slider, visibility eye and lock. If a click paints nothing, the line under the map says why, such as a locked layer or no tile picked. Deleting a layer asks first, and undo brings it back.
  6. Save and download. Maps save in your browser automatically, and the status line only says "Saved in this browser" once that has really happened; "Save" saves at once. "Load Map" reopens a saved map with its tiles. To use the map in a game, click "Download Tiled map": a .zip with the map (.tmj) and its tileset image, which holds only the tiles you painted. Keep the two files together and open the .tmj in Tiled, or load it in Phaser with load.tilemapTiledJSON plus the tileset image. "Download PNG" saves the whole map, visible layers only, as one image.

Note: The .tmj file embeds its tileset, named after the map ("Forest tiles" for a map called Forest), and points to the tileset image by file name, which is why both come in one .zip. In Phaser, that tileset name is the first argument to addTilesetImage. Godot and Unity read Tiled maps through their Tiled importer plugins.

Tips

Go deeper

Related guides