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 provides keyboard shortcuts in both the map (tilemap) editor and the sprite editor. Shortcuts are designed to keep your hands on the keyboard while painting, reducing the need to reach for toolbar buttons. The two editors share some conventions — for example Ctrl+Z undoes in both — but each editor has its own tool shortcuts that reflect the capabilities available in that context.
Keyboard shortcuts are active when the editor canvas has focus. If you click a UI element such as a menu, modal, or input field, keyboard focus moves away from the canvas and shortcuts will no longer fire until you click back on the canvas area. Some shortcuts (such as Ctrl+Z) are wired globally in HomePage.jsx and remain active regardless of focus.

Map Editor Shortcuts

The map editor (TilemapGrid) supports painting, erasing, flood-filling, zooming, and undo. Tool shortcuts are single-key; modifier shortcuts use Ctrl.
Key / ActionDescription
SSwitch to the Stamp tool — left-drag to paint the selected tile onto cells
FSwitch to the Fill tool — flood-fills all contiguous cells that share the same tile as the clicked cell (BFS algorithm)
ESwitch to the Eraser tool — left-drag to clear cells (sets them to -1)
DToggle double-width mode — stretches each tile cell to 2× its natural pixel width
Ctrl+ZUndo — reverts to the previous tile state (history stack holds up to 50 snapshots)
Ctrl++Zoom in — steps up through zoom levels 0.25 → 0.5 → 1 → 2 → 4 → 8
Ctrl+-Zoom out — steps down through the same zoom levels
Left-dragPaint tile — paints the selected tile (Stamp tool) or erases cells (Eraser tool) as you drag across the grid
Right-clickErase cell — clears the clicked cell regardless of the active tool
Scroll wheelZoom — scrolling up zooms in, scrolling down zooms out

Sprite Editor Shortcuts

The sprite editor (SpriteEditor) provides shortcuts for tool selection, undo, clipboard operations, and display toggles. The pencil tool is the default; Escape always returns to it.
Key / ActionDescription
FSwitch to the Fill tool — BFS flood-fill; constrained to the active selection rectangle if one is defined
RSwitch to the Select tool — drag to define a rectangular selection in sprite-pixel coordinates
DToggle double-width display — stretches pixels 2× horizontally to preview the wide-pixel CPC Mode 0 aspect ratio
Ctrl+ZUndo — reverts to the previous sprite state (history stack holds up to 50 snapshots)
Ctrl+CCopy selection — copies the pixels within the active selection rectangle to the clipboard
Ctrl+VPaste — enters paste-preview mode; click on the canvas to stamp the clipboard contents at that position
EscapeClear selection / exit paste / revert to Pencil — clears the active selection rectangle, cancels paste-preview mode, and returns the active tool to Pencil
Shift+clickDraw line (Pencil tool only) — draws a Bresenham straight line from the previous click point to the current cursor position

Quick-Reference Card

Map Editor — Tools

KeyTool
SStamp
FFill
EEraser

Map Editor — View & Edit

KeyAction
DToggle double-width
Ctrl+ZUndo
Ctrl++Zoom in
Ctrl+-Zoom out
ScrollZoom

Sprite Editor — Tools

KeyTool
FFill
RSelect
Shift+clickDraw line
EscapeBack to Pencil

Sprite Editor — Edit & Clipboard

KeyAction
DToggle double-width
Ctrl+ZUndo
Ctrl+CCopy selection
Ctrl+VPaste

Build docs developers (and LLMs) love