Tiled Map Editor Online — A Free Browser Alternative to Tiled

A tiled map editor is a program that assembles a level from a small set of repeated tile images instead of one large hand-painted background. Tiled, the desktop application from mapeditor.org, is the reference implementation of that idea: free, offline, flexible about grid types, and old enough that a lot of shipped projects still carry .tmx files. This page covers the case where you want the same painting workflow without installing anything, and you want to press Play and walk around inside the map you just painted.

Neta Studio runs the editor in a browser tab. You import a tileset, set the tile size, paint a ground layer and a detail layer, mark collision, then play. The grid becomes a 3D world rendered with Three.js, with a controllable character and real collision. Nothing to download, no project folder to keep in sync between machines, and a link you can hand to someone else so they open the same map.

Tiled vs an Online Tiled Map Editor

Tiled, from mapeditor.org, does a lot well. It is free and open source, it runs offline, and it has supported orthogonal, isometric, staggered and hexagonal grids for years. Layers, object layers with rectangles, ellipses, polygons and polylines, custom properties, templates, tile animations, collision shapes and terrain/Wang sets are all in there. It reads and writes TMX/TSX XML plus JSON variants, and the format is old enough that exporters exist for most engines. If your pipeline already consumes .tmx, Tiled is the safest place to author it.

The friction is not the editing. It is everything around it. Tiled is a desktop application, so every machine that touches the project needs the install. Tilesets are usually referenced as external .tsx files with relative paths, and those break the moment a folder moves or a collaborator's checkout sits at a different depth. There is no play button: you export, then open a second program to find out whether the map works. Sharing means zipping a project and hoping the paths line up on the other end.

An online tiled map editor changes those three things and nothing else. No install, because the editor ships with the page. No file juggling, because the tileset and the layers live in one project you can reopen. And no export-to-test loop, because the map is playable in the tab you painted it in. What you give up is real: no native plugins, no scripted maps, and very large projects are heavier in a browser than on the desktop. For a map that has to be seen and walked through rather than shipped into a compiled engine, the trade is worth it.

What a Tiled Map Is (and Why the Name Confuses Everyone)

The word does two jobs and they collide. Tiled with a capital T is a product name. A tiled map, lowercase, is any map built from repeated tiles. You can make a tiled map in Tiled, but you can also make one in Godot's TileMap nodes, in Unity's Tilemap system, in Phaser, in a custom importer, or here, without ever opening Tiled.

That split is why searches for a tiled map editor land in two different places. Half the people want the specific desktop application and its file formats. The other half want to build a tile-based map and do not care which tool does it. Both are reasonable. If you are in the second group, the question is not which editor has the longer feature list; it is which one puts a playable result in front of you fastest.

Mechanically, a tiled map is small data. A tileset image, a tile width and height, a grid size in tiles, and then one array of tile IDs per layer where zero means empty. On top of that: an optional object layer holding rectangles and polylines, and a property table of key/value strings. That is the whole structure. An editor is a good interface for editing those arrays, which is the only reason formats move between tools at all.

Draw Your First Tiled Map Online

The first screen has three regions: the tileset panel on the left, the map canvas in the middle, the layer list on the right. Start by creating a map. Choose an orthogonal grid, set the grid to 40 by 30 tiles, and set the tile size to match your tileset exactly. At 32 by 32 pixels that is a 1280 by 960 pixel canvas, which is a reasonable working size and stays responsive while painting.

Then import the tileset image. The two settings that break imports are margin and spacing. Margin is the empty border around the whole sheet; spacing is the gap between tiles. If your sheet was exported with either, type the number. If you skip it, every column shifts by a pixel or two and the map looks subtly, infuriatingly wrong. After that, painting is painting: fill the ground layer, then add detail on a layer above it.

Tiled Map Examples — Maps You Can Open Right Now

Six scenes ship as playable maps, not screenshots. Each one opens in the browser and you can drive a character through it, which is the only reliable way to check whether a tiled map works.

Three of them are full projects. The others are small demo maps inside the editor that exist to show one mechanic each. Open them when you want to see how layers, collision and tile size were configured rather than read about it.

Importing a TMX / Tileset Into the Browser

Import is a parser, not a converter. We read the map element for orientation, width, height, tile width and tile height, then the tileset entries with their firstgid and either an embedded image or a reference to an external .tsx. Then each layer in order, with its tile data. The encodings that matter are CSV and base64, with or without gzip or zlib compression. If the file uses an encoding we do not decode, the import stops and names it rather than loading a blank grid.

What survives is the structural part. The tileset reference is re-pointed at an uploaded image, so the external .tsx path from your desktop project is replaced instead of followed. Tile size, margin and spacing carry over. Layer order, visibility and opacity carry over. Tile IDs keep their relative positions inside each layer, which is what makes a map look the same after import. Object layers arrive as rectangles and polygons with their properties flattened to key/value strings. Declared tile animations are kept.

What does not survive is anything that was code. Tiled supports JavaScript extensions, custom property classes and C++ plugins, and none of them run in a browser tab. A map produced by a script is just its output tiles here. Custom property types degrade to strings. Infinite maps with chunked storage get flattened into a fixed grid, which changes memory behaviour on very large maps. And an image-collection tileset, where every tile is a separate PNG, works but costs one image request per tile. If your map depends on a plugin, keep authoring it in Tiled.

Tiled Free vs Tiled Paid

Tiled is free. It is open source desktop software and there is no paid tier to compare against, so a page describing a free versus paid Tiled is describing something else, usually a commercial tileset pack or the editor bundled inside an engine. We are not claiming Tiled costs money, because it does not.

The real split is install versus no install. Tiled asks for a download on every machine, keeps tilesets as relative paths that break when folders move, and offers no built-in playtest, so you export and open another program. A browser editor asks for a tab, keeps the project in one place, and plays the map in the same window. That is the trade, and it has nothing to do with price.

There are things the desktop wins. Plugins, scripted maps, working with no network at all, and very large maps with many layers are all desktop advantages, and pretending otherwise would be dishonest. If your pipeline already consumes .tmx and you have people who maintain it, stay in Tiled. Use the browser editor when the map needs to be seen, shared by link, or walked through by someone who will never install an editor.

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