Online Tool Store
Tilemap Editor
Paint tile-based game maps with undo, flood fill, and touch support. Resize without losing your work, then export or import JSON, or export PNG.
🔒 This tool runs entirely in your browser. Your files are never uploaded to a server.
Click and drag to paint tiles (or tap and drag on touch). Right-click, shift-click, or the Eraser button erases. Fill floods a connected area with the selected tile.
How it works
- Choose a grid size and click "Resize grid" (a sample map is shown by default) — existing tiles are kept wherever the new size still covers them.
- Select a tile from the palette, then click and drag on the canvas to paint — or tap and drag on a touchscreen.
- Use the Eraser button to erase, or Fill to flood an entire connected area with the selected tile. Right-click or Shift-click also erases on desktop. Undo steps back through your last 20 changes.
- Export the finished map as PNG for a preview image or JSON for game engine data, or Import a previously exported JSON file to keep editing it.
FAQ
How do I paint tiles onto the grid?
Pick a tile from the palette, then click and drag across the grid to paint — or tap and drag on a touchscreen. Right-click, hold Shift while clicking, or the Eraser button erases a tile back to empty.
Can I resize the map after I start painting?
Yes — change the Columns and Rows fields and click "Resize grid". Existing tiles are kept at their same position wherever the new size still covers them; only newly added rows or columns start empty. Undo restores the previous size and content if you resize by mistake.
Can I fill a large area in one click?
Yes — select a tile, click "Fill", then click any cell to flood-fill every connected tile of the same type with the selected tile, similar to a paint bucket tool.
What does exporting as JSON give me?
A JSON file with the grid dimensions, tile size, palette names, and a flat array of tile indices — ready to load into a game engine or custom renderer. Use "Import JSON" to load that same file back in and keep editing it later.
Can I export the map as an image instead?
Yes — "Export PNG" saves exactly what you see on the canvas, useful for level design documents or quick previews.
Does the tilemap editor work on a phone or tablet?
Yes — painting responds to touch the same way it responds to a mouse: tap and drag a finger across the grid to paint, and use the Eraser or Fill buttons since there's no right-click or Shift key on a touchscreen.
Is my map data uploaded anywhere?
No. The grid lives in memory in your browser tab, and both exports and the JSON import are handled locally — nothing is sent to a server.
How we compare
| Feature | Online Tool Store | Tiled (desktop app) | Sprite Fusion / PixLab / Wayline (browser tileset editors) |
|---|---|---|---|
| No install, works in any browser | ✓ | ✗ | ✓ |
| Simple color-tile palette — no tileset image to prepare first | ✓ | Requires custom tilesets | Requires a custom tileset image |
| Free, no account needed to save or reopen a map | ✓ | ✓ | Wayline requires an account to save or publish |
| Works with touch, not just mouse | ✓ | Not stated | Wayline confirms desktop and mobile; others not stated |
Sprite Fusion, PixLab, and Wayline are full tileset/multi-layer level editors built for shipping real game levels — a different, bigger job than this tool's. This editor stays a lightweight, zero-setup color-palette grid for quick prototyping and teaching tile-based map concepts, with plain JSON/PNG export any renderer can read.