RPG Tile Map Level Editor

h w

compress

Object Library

Object Type

Direction

Saved map templates will appear here.

Show grid Grid size Grid color Grid opacity

Passability

Minimap

Coord0,0

Layertop

Tilegrass

Size12×16

Zoom100%

Help Center

Build tile-based RPG maps: paint tiles on layers, place objects (player / NPC / enemy), import sprite sheets, and export the result as PNG or JSON.

Interface layout

Left panel: map type & size, file actions, and the Objects / Maps / Grid tabs.
Center: toolbar, canvas, minimap, and a status bar showing coordinates, layer, tile, size and zoom.
Right panel: layer list — add tile / object layers, reorder, rename, toggle visibility, adjust opacity & offset.

Typical workflow

Choose a map type and set width / height, then click Apply.
Add a tile layer, pick a tile in the left panel, and paint it on the canvas with the Draw tool.
Add an object layer, choose a type & direction, then place objects on the map.
Optionally import a sprite sheet to paint custom art.
Export: save map (PNG), save json, or save template for reuse.

Tools live in the toolbar above the canvas. Select one, then click or drag on the map. Most tools can be switched with a keyboard shortcut.

Tool reference

Tool	Description
`Draw` D	Left-click paints the selected tile; drag to paint continuously.
`Erase` E	Removes tiles (on an object layer it removes objects).
`Random`	Paints a random tile from the current category each click.
`Replace` T	Overwrites only cells that already contain a tile; empty cells are skipped.
`Fill` G	Flood-fills the connected area with the selected tile.
`Select` M	Drag a rectangle to select an area — Ctrl+C copies, Ctrl+V pastes at the cursor, Delete clears it.
`Pick` I	Eyedropper: click a tile to select it; on an object layer it copies the object's type / direction.
`Rect` R	Drag to fill a rectangle with the selected tile.
`Line` L	Drag to draw a straight line.
`Move Map`	Drag anywhere to pan the viewport.

Mouse operations

Gesture	Description
Right-drag	On a tile layer: copies a region; the next left-click pastes it centered on the cursor (Esc cancels).
Middle-drag	Pans the viewport.
Ctrl + wheel	Zooms in / out toward the cursor (25% – 400%).
Space (hold)	Temporary hand tool — drag to pan; release Space to restore the previous tool.

Layers are stacked in the right panel. The list is drawn top-to-bottom: the first layer renders on top of the rest. Drag the ⠿ handle to reorder.

Two layer types

Type	Description
`Tile Layer`	Holds painted tiles; opacity and pixel offsets are available per layer.
`Object Layer`	Holds placed objects (player / NPC / enemy) plus ID prefix / suffix / auto-index options.

Per-layer controls

Click a layer to make it active — all drawing happens on the active layer.
✎ or double-click the name to rename.
🧹 clears every cell of that layer.
👁 toggles visibility; hidden layers are skipped when exporting PNG.
🗑 deletes the layer.
Opacity slider (0–100%) and OX / OY pixel offsets for tile layers.
ID shows the current library object; Pre / Suf / Idx control how object IDs are generated on this layer.
⚠ Erase all layers wipes every layer at once (asks for confirmation).
Play Music On toggles the background music.

Objects are placed on object layers. The left panel manages the object library, the object type and the facing direction.

Object library

+ Add opens a dialog: name, type (Player / NPC / Enemy) and marker style (circle, square, diamond, triangle, star, hexagon).
Click an object in the list to select it, then draw on an object layer to place it.
The Object Type buttons set the type for objects placed next.
The Direction buttons set the facing: up / down / left / right.

Placing & removing

With an object layer active, use Draw / Fill / Rect / Line to place objects; Erase or right-click removes the object under the cursor.
Pick on an object copies its type and direction for the next placement.
Object IDs are generated as prefix + base name + suffix + index; the index is appended only when the layer's Idx auto-increment is enabled.

A sprite sheet (tileset) is an image cut into equal cells. Import one to paint custom art alongside the built-in tiles.

Importing

Click import sheet and choose an image (PNG recommended).
Set the Cell size (8–64 px) so it matches the grid of your image; tiles are cut by this size.
The Tileset dropdown switches between imported sheets.

Selecting & painting

Click a cell to select it; drag across the sheet to multi-select a region. Drawing stamps the whole region centered on the cursor.
Use − / + to zoom the tileset view and ↺ to reset.
Esc clears a multi-cell selection back to single-cell mode.

Passability

The Pass bar sets the passability of the selected cell(s): all / none / up / down / left / right / horizontal / vertical. It is saved into the exported JSON.
Turn on Passability in the Grid tab to visualize blocked cells on the map.

All file actions live in the left panel, under the map settings.

Actions

Action	Description
`save map ▾`	Two options: Full map exports one PNG with all visible tile layers composited; Layered maps exports one PNG per visible, non-empty tile layer.
`save json`	Exports the map as a JSON file — see the JSON Fields tab for every field. Check compress to output a minified single line.
`upload json`	Loads a previously exported JSON file (auto-detects the v3 readable format).
`new map`	Clears every layer and starts over (asks for confirmation).
`save template`	Stores the current map in the Maps tab for reuse; click load on a saved template to restore it.

The JSON export is a clean, self-describing format. Fields that equal their default value are omitted to keep the file small.

Top-level structure

{
  "version": 3,
  "map": { ... },
  "sheets": [ ... ],
  "tileLayers": [ ... ],
  "objectLayers": [ ... ]
}

Field	Type	Description
`version`	number	Format version, currently 3.
`map`	object	Map base info (type, size).
`sheets`	array	Sprite-sheet metadata array.
`tileLayers`	array	Tile layers, each with placed cells.
`objectLayers`	array	Object layers, with placed objects.

`map` — map base info

"map": { "type": "forest", "width": 12, "height": 16, "tileSize": 32 }

Field	Type	Description
`type`	string	Theme: none/forest/desert/water/dungeon/snow/lava/cave.
`width`	number	Map width in tiles.
`height`	number	Map height in tiles.
`tileSize`	number	Pixel size per tile (e.g. 32 = 32x32).

`sheets[]` — sprite-sheet metadata

Sheets are referenced by array index & matched by name on reload — no unstable runtime id is exported.

"sheets": [{
  "name": "Fantasy",
  "cellSize": 16, "cols": 32, "rows": 24,
  "imageWidth": 512, "imageHeight": 384,
  "passability": [ ["3:5","none"], ["4:5","up"] ]
}]

Field	Type	Description
`name`	string	Sheet name (from import filename).
`cellSize`	number	Pixel size of one tile.
`cols`	number	Tile columns in the sheet.
`rows`	number	Tile rows in the sheet.
`imageWidth`	number	Source image width (px).
`imageHeight`	number	Source image height (px).
`passability`	array	Tile-level passability: ["col:row", value]. "all" omitted.

`tileLayers[]` — tile layers

"tileLayers": [{
  "name": "top",
  "cells": [ { "x": 3, "y": 5, "sheet": 0, "col": 3, "row": 5, "passability": "none" } ]
}]

Field	Type	Description
`name`	string	Layer name.
`index`	number	Layer z-order position (0 = bottom).
`cells`	array	Cells in this layer (see below).
`visible`	boolean	Visible (default true, omitted if true).
`opacity`	number	Opacity 0-1 (default 1, omitted if 1).
`offsetX/Y`	number	Layer pixel offset (default 0, omitted if 0).

`cells[]` — map cells (self-describing, no internal id)

Sheet tiles use sheet+col+row; builtin tiles use tile. Source pixel rect = col x cellSize, derivable, omitted.

Field	Type	Description
`x, y`	number	Cell column/row in map (0-based).
`sheet`	number	Sheet tile: index into sheets array.
`col, row`	number	Sheet tile: col/row in source image. Pixel x = col x cellSize.
`tile`	string	Builtin tile: semantic name (e.g. "grass").
`passability`	string	Cell passability (default 'all', omitted). Values: all/none/up/down/left/right/horizontal/vertical.

Example: {"x":3,"y":5,"sheet":0,"col":3,"row":5,"passability":"none"}, {"x":0,"y":0,"tile":"grass"}

`objectLayers[]` — object layers

"objectLayers": [{
  "name": "objects",
  "objects": [ { "x": 2, "y": 3, "id": "hero", "type": "player" } ]
}]

Field	Type	Description
`name`	string	Layer name.
`index`	number	Layer z-order position (0 = bottom).
`objects`	array	Objects in this layer (see below).
`objectIdPrefix/Suffix`	string	ID affix options (only if set).
`objectIdIndex`	boolean	Enable auto-numbering (only if true).

`objects[]` — placed objects

"objects": [ { "x": 5, "y": 8, "id": "goblin_01", "type": "enemy", "direction": "up" } ]

Field	Type	Description
`x, y`	number	Object tile col/row (0-based).
`id`	string	Object ID (user-entered or auto).
`type`	string	Type (default npc): player/npc/enemy.
`direction`	string	Facing (default down): up/down/left/right.

Passability values

Value	Meaning
`all`	Passable (default, not exported)
`none`	Fully impassable
`up`	Up passable only
`down`	Down passable only
`left`	Left passable only
`right`	Right passable only
`horizontal`	Left-right passable
`vertical`	Up-down passable

Complete example

{
  "version": 3,
  "map": { "type": "forest", "width": 12, "height": 16, "tileSize": 32 },
  "sheets": [{
    "name": "Fantasy", "cellSize": 16, "cols": 32, "rows": 24,
    "imageWidth": 512, "imageHeight": 384,
    "passability": [ ["3:5","none"], ["4:5","up"] ]
  }],
  "tileLayers": [
    { "name": "top", "cells": [
        { "x": 3, "y": 5, "sheet": 0, "col": 3, "row": 5, "passability": "none" },
        { "x": 4, "y": 5, "sheet": 0, "col": 4, "row": 5, "passability": "up" },
        { "x": 0, "y": 0, "tile": "grass" },
        { "x": 1, "y": 0, "tile": "water", "passability": "none" }
    ]},
    { "name": "bottom-ground", "opacity": 0.8, "cells": [
        { "x": 0, "y": 0, "sheet": 0, "col": 0, "row": 0 }
    ]}
  ],
  "objectLayers": [
    { "name": "objects", "objects": [
        { "x": 2, "y": 3, "id": "hero", "type": "player" },
        { "x": 5, "y": 8, "id": "goblin_01", "type": "enemy", "direction": "up" },
        { "x": 7, "y": 2, "id": "villager" }
    ]}
  ]
}

General

Key	Description
Ctrl + Z	Undo the last action.
Ctrl + Y	Redo the last undone action.
Ctrl + C / Ctrl + V	Copy the selected area / paste the clipboard at the cursor (tile layers).
Delete / Backspace	Clear the selected area.
Esc	Cancel a right-drag copy buffer / multi-cell tileset selection.

Tool switching

Key	Tool
D	Draw
E	Erase
T	Replace
M	Select
G	Fill
I	Pick
L	Line
R	Rect

Navigation & view

Key	Description
Space (hold)	Temporary hand tool — drag to pan.
Ctrl + wheel	Zoom in / out toward the cursor.
Middle-drag	Pan the viewport.
Right-drag	Copy a region; left-click pastes it.

Interface layout

Typical workflow

Tool reference

Mouse operations

Two layer types

Per-layer controls

Object library

Placing & removing

Importing

Selecting & painting

Passability

Actions

Top-level structure

map — map base info

sheets[] — sprite-sheet metadata

tileLayers[] — tile layers

cells[] — map cells (self-describing, no internal id)

objectLayers[] — object layers

objects[] — placed objects

Passability values

Complete example

General

Tool switching

Navigation & view

`map` — map base info

`sheets[]` — sprite-sheet metadata

`tileLayers[]` — tile layers

`cells[]` — map cells (self-describing, no internal id)

`objectLayers[]` — object layers

`objects[]` — placed objects