Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/johnlobo/webtile/llms.txt

Use this file to discover all available pages before exploring further.

Webtile gets you from a blank screen to a painted tilemap in just a few steps. This guide walks through signing in, setting up a project, importing a tileset, painting tiles, and exporting your map as a .tmx file ready for your game engine.
1

Sign in

Navigate to your Webtile instance. You will land on the login page (#/login) because the editor is behind a protected route.Choose one of the two sign-in methods:
  • Sign in with Google — click the Google button to open an OAuth popup. Approve the prompt and you will be redirected to the editor automatically.
  • Email and password — enter your email address and password, then click Sign In. If you don’t have an account yet, use the registration form on the same page. Forgot your password? Follow the Forgot password link to #/forgot-password.
While Firebase Auth initialises you will briefly see a loading screen with blinking dots — this is normal.
2

Create a new project

Once you are signed in you will see the EmptyWorkspace view. Every map and sprite in Webtile belongs to a project, so the first thing to do is create one.
  1. Open the PROJECTS menu in the top navigation bar.
  2. Click New.
  3. Enter a project name in the dialog that appears and confirm.
The breadcrumb in the centre of the top bar will update to show your new project name. You are now in the NoMaps view — the project exists but has no maps yet.
3

Create a new map

  1. Open the MAPS menu.
  2. Click New.
  3. Fill in the map configuration fields:
FieldWhat it controls
tileWWidth of a single tile in pixels
tileHHeight of a single tile in pixels
mapWMap width in tiles (number of columns)
mapHMap height in tiles (number of rows)
doubleWidthWhen enabled, each tile is rendered at double its pixel width — useful for CPC Mode 0 aspect-ratio correction
  1. Confirm to create the map. The editor switches to TilemapGrid view and the centre breadcrumb shows the map name and its total pixel dimensions.
4

Import a tileset PNG

The grid is empty until you load a tileset image. The right sidebar is where you manage tilesets.
  1. Locate the import tileset button in the right sidebar (the sidebar that appears on the right edge of the editor).
  2. Click it and select a PNG file from your machine. The PNG should contain your tiles arranged in a regular grid where each cell is tileW × tileH pixels.
  3. Once imported, the right sidebar displays the tileset as a clickable grid. Individual tiles can also be edited directly inside the sidebar’s per-tile pixel editor.
The tileset is saved to Firestore automatically as a base64 data URL and will reload with your project on future visits.
5

Select a tile and paint the grid

With a tileset loaded you can start painting:
  1. Select a tile — click any tile in the right sidebar tileset panel. A highlight indicates the active selection.
  2. Paint — click and drag on the main grid to stamp the selected tile onto cells. A hover preview shows where the tile will be placed before you click.
  3. Erase — right-click on any cell to erase it. Erased cells render as a checkerboard pattern indicating they are empty.
  4. Zoom — scroll the mouse wheel over the grid to zoom in and out, or use Ctrl++ / Ctrl+-.
The grid uses CSS rendering with image-rendering: pixelated so tiles stay crisp at every zoom level.
6

Switch between tools

Webtile provides three main painting tools you can switch between at any time:
  • Stamp (S) — the default tool. Click or drag to place the selected tile.
  • Fill (F) — flood-fills all contiguous cells that share the same tile as the clicked cell, replacing them with the selected tile. Uses a breadth-first search so it wraps correctly around irregular shapes.
  • Eraser (E) — click or drag to clear cells back to empty.
You can activate any tool from the toolbar at the top of the editor, or press the keyboard shortcut shown in parentheses.
Use Ctrl+Z to undo your last tile operation. Webtile keeps up to 50 undo steps in memory.
7

Export the map as TMX

When you are happy with your map:
  1. Open the MAPS menu.
  2. Click Export TMX.
  3. Webtile generates a Tiled-compatible .tmx XML file with the tileset image path embedded and the tile data encoded as CSV. Your browser downloads the file automatically.
You can import this file into Tiled or parse it directly in your game engine. Webtile can also re-import a .tmx file later via MAPS → Import TMX to continue editing.
Webtile saves your map automatically — you do not need a save shortcut. Every time you paint a tile, a 2-second debounce timer starts. When it fires, the current state of the map (tiles, config, and tileset) is written to Firestore. The toolbar displays a save-status indicator so you can see when a save is in progress or has completed.
Press Ctrl+Z at any time to undo the last tile paint. Webtile maintains a history stack of up to 50 snapshots in memory. The UNDO button in the toolbar is greyed out when there is nothing left to undo.

​
Keyboard Shortcuts

KeyAction
SActivate Stamp tool
FActivate Fill tool
EActivate Eraser tool
DToggle double-width rendering
Ctrl+ZUndo last tile operation
Ctrl++Zoom in
Ctrl+-Zoom out

Build docs developers (and LLMs) love

Get started for freeTalk to us