Create Project
Start a new tilemap project and save it in this browser.
Canvas
Drag to paint. Right click the map to pick a tile. Hold space and drag to pan. Shortcuts: B brush, R rectangle, E erase, C copy, G grid.
Map Setup
Tile Map Editor
Browser-based 2D tile map editor for fast map building
Import tile graphics, slice a spritesheet into a selectable palette, paint layered layouts on a grid, and export project data for Phaser, Tiled, Unity-style, Godot-style, or other tile-based workflows. It is the Pixel Tools page for browser-based 2D tile map editing and quick prototype handoff.
Projects
Choose a project
Open Saved Project
Select one of the projects already stored in this browser.
Help
Keyboard shortcuts
Tools
B switch to Brush
R switch to Rectangle
E switch to Erase
G toggle Grid
Ctrl/Cmd + Z undo
Ctrl/Cmd + Shift + Z redo
Ctrl + Y redo on Windows
Zoom
Q zoom out on the map
W zoom in on the map
0 reset the view
Navigation
Arrow Left move camera left
Arrow Right move camera right
Arrow Up move camera up
Arrow Down move camera down
Space + Drag pan with the mouse
Import
Load tiles or project data
Import Spritesheet
Load one or more PNG spritesheets and rebuild the tileset palette for this map.
Import Project JSON
Import a previously saved editor project and redraw the tilemap.
Export
Download your tilemap
Save Project JSON
Keeps editor data so you can import the project back into this tool later.
Export Engine Bundle
Exports a tilemap JSON and bundles it with the spritesheet PNG.
Export CSV Bundle
Downloads the active layer CSV bundled with the spritesheet PNG.
Overview
What this editor is for
A lightweight browser tool for importing tilesets, painting layered maps, and exporting project data without leaving the page.
Workflow
Quick flow
1. Import
Load a PNG tilesheet and slice it into paintable tiles.
2. Paint
Build layouts for floor, props, or collision and reorder them as needed.
3. Export
Save project JSON or export engine bundles and CSV data.
FAQ
Questions about the map editor
Do I need a full spritesheet before I can start?
No. You can begin with a single small sheet or a rough prototype PNG, then replace it later as your art pipeline matures.
What is the difference between Project JSON and Engine ZIP?
Project JSON is for reopening and editing inside Pixel Tools. The Engine ZIP is a delivery format meant for use outside the editor.
Can I build collision or logic layers?
Yes. Create multiple layouts and use the block marker to separate structural or collision-oriented data from visual decoration.
Is this page intended as a production editor or a fast prototype tool?
It is primarily a fast browser-based prototyping tool for pixel map layout, tileset testing, and lightweight export workflows.
Does Pixel Tools include a tiled map 2D editor?
Yes. This page is the browser-based 2D tile map editor in Pixel Tools, built for tileset slicing, layered map editing, and export workflows.
Related Pages