How are tile IDs numbered, and what is the empty ID?

0 is always the empty cell. Tile 1 is the tileset's top-left tile and the IDs count left to right, then down. Each tile starts after the margin, neighbouring tiles sit the spacing apart, and a column or row counts only when a whole tile fits, so a 32 x 16 px picture cut into 16 px tiles has exactly two IDs, 1 and 2. Pixels left over on the right or bottom edge belong to no tile, and the tileset line under Load tileset image says how many there are. Tile ID 0 in the Tile ID field paints or fills with the empty tile.

What is in the JSON file, and which coordinates does it use?

The JSON carries a format name and version, a conventions block, the map size, the tileset reference (its file name, pixel size, tile size, margin, spacing, columns, rows and tile count), the layers from bottom to top with their names, visibility and data, and a collision array. x counts columns to the right and y counts rows down, both from 0 at the top-left cell, so cell (x, y) is entry y * width + x of every data array. The picture is named, never embedded or fetched. When you open a project, every field is checked first: an unknown field, a web address or folder path as the image name, a tile ID above the tile count or an array of the wrong length is refused with the reason, and your current map stays as it was.

Can I use the map in Tiled or in my game?

Download TMX writes the tile layers in the TMX layout Tiled documents, with one tileset whose first ID is 1, so the numbers match this editor's, and each layer's cells as CSV; hidden layers are marked visible="0". Collision flags are not part of the TMX file: they are in the JSON and in the collision CSV. The editor does not run your game and does not write any engine's own project format. Each CSV is one line of comma-separated tile IDs per map row, and the JSON layout is described in the answer above.

Does Fill spread to other layers or across diagonals?

No. Fill changes the cells joined to the one you pick by an edge (up, down, left or right) that hold the same tile ID on the current layer, or the same flag when you are editing collision. Other layers are never touched, and cells that only meet at a corner are not joined, so an empty cell walled in by other tiles stays empty. The readout shows how many cells the last fill changed.

What happens to hidden layers and collision flags in the PNG?

Download PNG draws the visible layers from bottom to top, blending partly transparent pixels over the tiles below, and leaves hidden layers out. Hidden layers are still kept in the project, the JSON, the TMX file, the CSVs and the ZIP. Collision flags are drawn only as a red overlay in the editor, which Show collision turns off, and never reach the PNG. The PNG is written up to 67,108,864 pixels (8192 x 8192) and 16,384 px a side; a bigger map still exports as JSON, CSV, TMX and a project ZIP.

Can I edit without a mouse?

Yes. Tab to the map and use the arrow keys to move the cursor one cell, or eight with Shift; Home and End jump to the ends of the row. Space or Enter applies the current tool at the cursor, Control or Command with Z undoes, and adding Shift, or pressing Y instead, redoes. The Left, Up, Down, Right and Apply at cursor buttons do the same by touch or pointer. In the palette the arrow keys choose a tile, and the Tile ID field takes a number directly. On a touch screen, a tap applies the tool at one cell and a drag scrolls the map.

How do I keep my map, and is my tileset uploaded?

The picture is read in this browser tab and never uploaded, and the map lives only in this tab until you save it. Save project ZIP writes tilemap.json, your tileset picture byte for byte, tilemap.tmx, one CSV per layer, collision.csv and a README, and Open project reads it back whole. A JSON on its own opens over a loaded tileset of the same pixel size. The browser remembers only the slicing and map-size fields and the two view switches. Opening a ZIP reads only tilemap.json and the picture it names; an entry that declares more than 32 MB for the JSON or 64 MB for the picture, or unpacks past the size it declares, is refused before it can fill memory.

Tilemap Editor

Load a tileset picture (PNG, JPEG, WebP, GIF or BMP, up to 4096 x 4096 px), set the tile size, margin and spacing, and the editor cuts it into numbered tiles: tile 1 is the top-left tile, IDs count left to right and then down, and 0 is the empty cell. Paint, erase and flood fill a map of up to 256 x 256 cells on as many as 8 layers, mark solid cells with collision flags that never touch the image, and undo up to the last 100 changes. It works with a mouse, a finger or the keyboard: arrow keys move a cursor and Space applies the tool. Download the flattened PNG of the visible layers, a JSON file that states its coordinate conventions, a TMX file, a CSV of any layer or of the collision flags, or a project ZIP that holds the JSON, TMX and CSV files with your tileset picture and opens here again. The picture is read in this browser tab and never uploaded.

Tileset and tools

Load tileset image

Example tileset drawn for this page. example-tileset.png: 64 x 32 px cut into 4 x 2 tiles of 16 x 16 px, IDs 1 to 8.

Slicing (px)

Tile widthTile heightMarginSpacing

A newly loaded picture is cut with these fields.

Tool

Edit

Layers, top first (2 of 8)

Layer name

Map size in cells (1 to 256 a side)

Map widthMap height

Files (made in this tab, nothing uploaded)

CSV buttons use layer Decor.

Open project (JSON or ZIP)

Map 16 x 10, paint on layer Decor

200%GridShow collision

Column 1, row 1: Ground tile 1, Decor empty, collision off. Map 16 x 10 cells of 16 x 16 px. Layers bottom to top: Ground 160 of 160 cells filled; Decor 9 of 160 cells filled. 30 cells marked solid.

Palette: 8 tiles, click or use arrow keys

Tile 1: column 1, row 1 of the tileset.

Tile ID (0 to 8; 0 is empty)

Tile IDs in tileset8

Cells per layer160

Last fill changednone yet

Empty ID0

Layers2 of 8

Data of layer Decor as text (CSV, one line per map row)

Worked cases

Tile IDs32 x 16 tileset, 16 px tiles2 tile IDs
Export size3 x 2 map, 2 layers6 cells per layer, 12 in total
Contiguous filltile 5 filled at column 4, row 2 of the board's 6 x 4 layer11 cells change; the enclosed empty cell stays 0

Common questions

How are tile IDs numbered, and what is the empty ID?: 0 is always the empty cell. Tile 1 is the tileset's top-left tile and the IDs count left to right, then down. Each tile starts after the margin, neighbouring tiles sit the spacing apart, and a column or row counts only when a whole tile fits, so a 32 x 16 px picture cut into 16 px tiles has exactly two IDs, 1 and 2. Pixels left over on the right or bottom edge belong to no tile, and the tileset line under Load tileset image says how many there are. Tile ID 0 in the Tile ID field paints or fills with the empty tile.
What is in the JSON file, and which coordinates does it use?: The JSON carries a format name and version, a conventions block, the map size, the tileset reference (its file name, pixel size, tile size, margin, spacing, columns, rows and tile count), the layers from bottom to top with their names, visibility and data, and a collision array. x counts columns to the right and y counts rows down, both from 0 at the top-left cell, so cell (x, y) is entry y * width + x of every data array. The picture is named, never embedded or fetched. When you open a project, every field is checked first: an unknown field, a web address or folder path as the image name, a tile ID above the tile count or an array of the wrong length is refused with the reason, and your current map stays as it was.
Can I use the map in Tiled or in my game?: Download TMX writes the tile layers in the TMX layout Tiled documents, with one tileset whose first ID is 1, so the numbers match this editor's, and each layer's cells as CSV; hidden layers are marked visible="0". Collision flags are not part of the TMX file: they are in the JSON and in the collision CSV. The editor does not run your game and does not write any engine's own project format. Each CSV is one line of comma-separated tile IDs per map row, and the JSON layout is described in the answer above.
Does Fill spread to other layers or across diagonals?: No. Fill changes the cells joined to the one you pick by an edge (up, down, left or right) that hold the same tile ID on the current layer, or the same flag when you are editing collision. Other layers are never touched, and cells that only meet at a corner are not joined, so an empty cell walled in by other tiles stays empty. The readout shows how many cells the last fill changed.
What happens to hidden layers and collision flags in the PNG?: Download PNG draws the visible layers from bottom to top, blending partly transparent pixels over the tiles below, and leaves hidden layers out. Hidden layers are still kept in the project, the JSON, the TMX file, the CSVs and the ZIP. Collision flags are drawn only as a red overlay in the editor, which Show collision turns off, and never reach the PNG. The PNG is written up to 67,108,864 pixels (8192 x 8192) and 16,384 px a side; a bigger map still exports as JSON, CSV, TMX and a project ZIP.
Can I edit without a mouse?: Yes. Tab to the map and use the arrow keys to move the cursor one cell, or eight with Shift; Home and End jump to the ends of the row. Space or Enter applies the current tool at the cursor, Control or Command with Z undoes, and adding Shift, or pressing Y instead, redoes. The Left, Up, Down, Right and Apply at cursor buttons do the same by touch or pointer. In the palette the arrow keys choose a tile, and the Tile ID field takes a number directly. On a touch screen, a tap applies the tool at one cell and a drag scrolls the map.
How do I keep my map, and is my tileset uploaded?: The picture is read in this browser tab and never uploaded, and the map lives only in this tab until you save it. Save project ZIP writes tilemap.json, your tileset picture byte for byte, tilemap.tmx, one CSV per layer, collision.csv and a README, and Open project reads it back whole. A JSON on its own opens over a loaded tileset of the same pixel size. The browser remembers only the slicing and map-size fields and the two view switches. Opening a ZIP reads only tilemap.json and the picture it names; an entry that declares more than 32 MB for the JSON or 64 MB for the picture, or unpacks past the size it declares, is refused before it can fill memory.

Orthogonal fixed-grid layout only; no game runtime, copyrighted tileset library or unsupported native game-engine export promise. JSON schema and coordinate conventions are explicit; imported projects cannot fetch external URLs.