Tile Map Editor — Free Online Tilemap Maker & Level Editor

A tile map editor is a grid, a tileset and a brush. You import a PNG or generate a set from a prompt, set one cell size, paint cells across layers, mark the solid ones for collision, and export. The tile map editor on this page runs in the browser: no download, no account, no build step, and the editor is the first thing you see rather than a screenshot of one.

Everything below describes what the tool actually does and where it breaks. Why a sheet with a 1 px margin imports wrong if you only enter the tile size. Why a two-state-per-edge autotile rule needs 47 variants instead of 16. What TMX carries that a PNG cannot. And why being able to press play and walk the map you just painted changes how fast you can fix it.

The Tile Map Editor (Live Tool)

The live tool is the first thing on this page. The canvas is a grid, the tileset sits beside it, and the layer list is a stack of independent grids you can hide and lock one at a time. Painting a cell is a click. Dragging paints a run of cells. A rectangle tool fills an area, a flood fill handles open floor, and an eraser clears back to the layer below.

Four capabilities do the work. The grid fixes one number for the whole document, cell size in pixels, and every brush, layer and export is measured in that unit. Brushes decide what a click writes: single tile, rectangular block, flood fill, line, or erase. Layers stack separate grids so terrain, decoration and collision stay editable independently. Collision marks a cell as solid and stores it as data rather than painting it into the artwork, so repainting a wall never means redoing its blocking volume.

There is no save dialog and no compile step between painting and playing. The document the editor writes is the document the runtime reads, which removes the whole class of bugs where a map looks correct in one program and shifts by half a tile as soon as it loads in another.

Import a Tileset or Generate One

There are two routes in. Import a PNG you already own, or generate a set from a text prompt and paint with that. Both end in the same place: an aligned tile sheet sitting next to the canvas.

If you would rather not draw either, the free tilesets library is a catalog of ready sheets at common cell sizes. Agent Sprite Forge handles the other half of the problem, characters and props, which follow different rules from terrain and usually want more frames per action.

The editor asks for tile size before it loads anything, and that number has to match the artwork exactly. A 256 by 256 sheet of 16 px tiles is 16 columns by 16 rows. If the sheet has a 1 px margin around the edge and 1 px of spacing between tiles, a common default in sprite tools, the raw arithmetic gives the wrong column count, so enter the margin and spacing too or trim the sheet. Get it wrong and the grid shears: column one looks fine and every tile after it is offset by an error that grows across the sheet.

Three other things break a tileset import. Tiles that are 15 or 33 px because the artwork was scaled by a non-integer factor. Artwork drawn 1 px into its neighbour's cell, which shows as a thin line of the adjacent tile along every seam and gets worse when the engine samples with filtering on. And an alpha channel where the transparent region is actually black, which turns every empty cell into a solid block once the map is rendered.

Describe the set instead: cell size, view, palette and the tile roles you need, such as floor, wall, wall corner, door and water edge. The AI tileset generator returns a sheet already aligned to the requested cell size, so it imports without the margin arithmetic.

Treat the result as a starting point. Generated sets are strong on surface and weak on continuity: the sixteenth floor tile rarely joins seamlessly to the first, and edge tiles usually need repainting before autotiling will accept them as a connected terrain.

Paint Tiles, Add Layers and Collisions

A map that stays easy to edit is three layers, not one. Ground holds the terrain the player walks on. Detail holds everything drawn on top, such as walls, trees, crates and decals, so you can restyle or hide it without touching the ground. Collision holds nothing you can see: it is a mask of cells the player cannot enter.

Keep collision as data on its own layer, not as dark tiles baked into the terrain. If blocking volumes are painted into the ground art, editing the art changes the level design and editing the level design changes the art. With a separate layer you can repaint the floor as many times as you like and the walls stay where they were.

The failure mode to watch for is one unmarked cell in a wall run. A single missing collision cell in a forty-tile wall is a hole the player walks through, and it is invisible at normal zoom. The routine that catches it: hide every layer except collision, look at the map as a silhouette, and check that the outline is unbroken.

Autotiling & the 47-Tile Set Explained

Autotiling is the part of a tile map editor that chooses which tile to draw based on what surrounds it. Instead of picking a wall corner by hand, you paint any wall tile and the editor inspects the neighbouring cells, builds a bitmask, and swaps in the variant that matches. Paint a second wall beside the first and both cells update.

The simple version of the rule looks at four neighbours, north, east, south and west, giving two to the fourth, or 16 combinations. That set is easy to draw and it fails in one specific place: the inside corner. Take a floor cell with a wall to the north and a wall to the east, and nothing else. That is not an exotic case, it is what the inside of an L-shaped room looks like everywhere. A 16-tile set has no variant drawing an edge along both the north and east sides of one cell, so you get a stray floor pixel, a doubled border, or a visible hole.

The 47-tile blob set, also called a blob tileset, adds the four corners. Tracking all eight neighbours naively gives two to the eighth, or 256 combinations, and most of those are redundant: a corner only changes the picture when both of the edges touching it are filled. A corner sitting between two empty edges renders identically in all four of its states. Applying that one reduction collapses 256 cases into 47 distinct ones, which is where the number comes from.

Editors usually store a blob set as a lookup table indexed by an 8-bit mask: 1, 2, 4 and 8 for the edges, 16, 32, 64 and 128 for the corners. When you paint, the editor recomputes the mask of the painted cell and of every neighbour that is also autotiled, so one click can rewrite up to nine cells. The practical consequence is that autotiling wants its own terrain layer. Mix hand-placed props into that layer and every autotile update has to decide whether overwriting them is acceptable.

Tiled Map vs Tile Map — Which One Do You Mean?

Two different searches arrive here and they want different things. A tile map editor is the category: any tool that paints a grid of tiles and produces a map. Tiled is one specific program inside that category, the desktop editor published at mapeditor.org, and people often type tiled map editor when they mean that program by name.

If you meant the category, the live tool on this page is a tile map editor and it needs no install. If you meant the brand, what you probably want is something that opens the files you already have, the TMX projects and TSX tilesets a desktop workflow produces, and lets you keep working without installing anything on the machine you are on. The Tiled alternative page covers that directly: which of your files carry over, which settings do not, and how the export formats line up between the two.

Mechanically the difference is where the document lives. A desktop editor writes projects to local disk and depends on that machine having the program installed to reopen them. A browser editor keeps the document in the session and in browser storage, and depends on the export being complete enough to rebuild the map anywhere else. That makes the export formats the real bridge between the two, which is what the next section is about.

Export Your Map (PNG / TMX / JSON)

Three formats, three jobs. Choose by what is going to read the file, not by which one sounds most official.

PNG is a flat image. The exporter renders the map at cell size multiplied by map size, so a 40 by 25 map of 32 px cells becomes 1280 by 800 pixels, with layers either flattened into one image or written one file per layer. Use it for mockups, thumbnails, menu backgrounds, or a conversation with an artist. Do not use it as the handoff to an engine: a PNG carries no grid, no tile identity and no collision, so nothing downstream can tell a wall from a floor except by colour.

TMX is Tiled's XML interchange format and the closest thing the tile tool ecosystem has to a lingua franca. It carries layers, tileset references, per-tile properties, object layers and custom properties, and most engines and converters can read it. One detail causes most of the bugs: tile IDs in TMX are global across every tileset in the map, offset by a firstgid per tileset. Merge two sheets and get that offset wrong, and every cell that used the second sheet loads with a tile from the wrong sheet. Nothing errors. It simply looks wrong.

JSON is what most engines and web runtimes ingest directly. Typically it is a list of layers, each holding a flat array of tile indices plus the cell size, with collision as a separate array. Because the consumer builds the map at runtime, the row order convention matters: invert it and the whole map mirrors vertically, which is obvious on a map with a coastline and invisible on a symmetric dungeon. Empty cells also need a defined value, since some formats use 0 and some use -1, and choosing the wrong one puts a real tile in every gap.

Step Inside Your Map (Playable Demo)

The playable demo on this page is The Cyclops' Island, an isometric pixel-art game built from a tile map painted in the same editor. Press play and the camera drops into the map. The collision layer becomes walls, the ground layer becomes the floor the character walks on, and the detail layer draws behind or in front of the character depending on where it sits.

This is the step most tool pages skip. Painting a map and exporting it means the first time you see the level at player scale is in a different program, with a different camera, after a build. Playing it in place turns level design into a loop you can run ten times a minute: paint a corridor, walk it, notice it is one tile too wide, repaint it.

Isometric projections add one thing an orthogonal map never has to think about: draw order. A tile lower on screen is nearer the camera, so the renderer sorts by depth, roughly by row and then by layer, or a character gets drawn over a wall that should occlude it. The symptom is a sprite popping through the top of a wall as it walks behind it. When you see that in a demo, the cause is the depth sort, not the collision mask.

From there the map can go two directions. Keep it 2D and it stays a tile map with a player controller on top. Take it into the 3D game builder and the same grid becomes geometry, with each cell extruding into a floor slab or a wall, which is the approach behind Mini World. Agent Sprite Forge covers the character side. The grid you painted does not change either way.

Walk into the world it belongs to

A sprite is a character with nowhere to stand. The last step is the one nobody else offers: take the sheet you just built and put it in a world someone can walk around in — a small island, a planet, a rainy street corner. Every world on this site was made from one written description and published as a page you can play.

FAQ