How to Build Tile Maps in Your Browser
6 min read · Updated August 2026
The Map Editor turns your sprites into a paintable tile palette: create a grid, choose a tile, and draw your level with brush, eraser, and flood-fill tools across multiple layers. Maps save to your browser and export as JSON.
Open the Map Editor — free, in your browser, no signup.
- Get tiles into the editor. The palette uses the sprites in your session — split a tileset in Sprite Detection first (Grid Slice is perfect for tilesets), or click "Upload Tiles" in the editor header to load individual tile images directly. You can also draw tiles from scratch in the Pixel Art Editor — a 16×16 or 32×32 canvas is a quick way to make a tileset — then click "Send to Session" to make them available here.
- Create the map. Click "New Map" and set a name, the map size in tiles (Width and Height, 1–100 each; default 20×15), and the tile size in pixels (8–128; default 32×32). The tile size is written into your exports, and the canvas draws cells at that size too (kept between 16 and 48 px on screen so tiny tiles stay clickable).
- Open the palette and arm a tile. In the toolbar, click the palette icon, then click "Show" to expand the sprite grid. Hover a swatch to preview it at full size, and click to select. The "Selected:" row keeps showing your armed tile even if you collapse the grid again.
- Paint. Left-click paints the selected tile; click-drag paints continuously; right-click erases any tile under the cursor, regardless of the active tool. The Size slider widens the brush and eraser footprint from a single tile up to a 5×5 block around the cursor (flood fill ignores it). The eraser tool turns left-click into erasing, and the flood-fill tool fills every connected cell of the same type — clicking an empty region fills that whole region, which is the fastest way to lay down a background.
- Organize with layers. Open the Layer Panel to add layers (background, decoration, collision…), click a layer name to make it the paint target, and use the per-layer controls: an opacity slider (0–1), a visibility eye, and a lock. Locked layers silently ignore painting — if clicks seem dead, check the lock first. The last remaining layer can’t be deleted.
- Save and export. Save writes the map to your browser’s storage immediately — reopen it anytime with "Load Map". "Export" downloads SpritePilot’s own JSON: map dimensions, tile size, and per-layer sparse tile lists with x/y grid coordinates and sprite ids, plus each layer’s opacity, visibility, and lock state.
Note: The exported JSON is SpritePilot’s own format, meant for your engine’s loading code — its sprite ids match the tiles you painted with. There is no direct Tiled (.tmj) export, since your tiles live in the browser rather than in a tileset image file Tiled could reference.
Tips
- The search box in the palette matches sprite numbers — type "12" or "sprite_0012" to jump to the twelfth sprite. Naming happens at export time, not in the palette.
- Keep collision tiles on their own layer and hide it before taking screenshots — your engine can read the layer’s tiles while players never see them.
- Flood fill respects layer boundaries: it fills on the selected layer only, so a background fill never overwrites decoration.
- Detected sprites and uploaded tiles both appear in the palette — detected sprites first, your uploads after them.
Related guides
- How to Split a Sprite Sheet into Individual Sprites
- Sprite Sheet Export Formats Explained
- How to Make a Sprite Sheet from Separate Images