Getting Started
1. Upload a battle map image
2. Adjust grid size to match your map
3. Use calibration if your map has a printed grid
4. Add tokens from presets or upload custom images
5. Enable fog of war and start revealing areas
Navigation
Pan: Space+Drag or Middle Mouse Button
Zoom: Mouse Wheel
Pinch Zoom: Two fingers on touchscreen
Center/Fit: Use buttons in Map & Grid section
Tokens
Add: Choose preset or upload image, then click "Add Token"
Move: Click and drag (snaps to grid when enabled)
Rotate: Select token, press R
Resize: Select token, press +/− keys
Layer order: Select token, press [ (back) or ] (forward)
Delete: Select token, press Delete/Backspace or use context menu
Right-click (desktop): Opens context menu
Long-press (mobile/touch): Opens context menu
Context menu options: Rename, toggle label, set HP, add status conditions, set aura, set vision cone, add to Initiative Tracker, duplicate, delete
Fog of War
Enable: Click "Fog: Off" to turn on
Reveal Mode: Erase fog to show areas
Cover Mode: Paint fog to hide areas
Brush: Shift+Drag (desktop) or "Brush Mode" button (mobile)
Brush Size: Adjust with Brush input field
Clear All: Removes all fog and shapes
Fog Shapes
Types: Rectangle, Square, Circle
Modes:
• Cover — Hides the map area (use black for classic fog)
• Reveal — Cuts through any cover shapes beneath it
Color: Any color — use black for fog, colors for zones/auras
Size: Set in grid cells before adding
Add: Configure shape type, mode, color, and size, then click "Add Shape"
Move: Click and drag the shape interior
Resize (keyboard): Select shape, press +/− keys
Resize (mouse):
• Rectangles/Squares — Drag any corner or edge handle
• Circles — Drag the blue handle on the right edge
Rotate (rectangles): Select shape, drag the orange circle handle above it
Delete: Select shape, press Delete or click "Delete Shape"
Layering: Reveal shapes always cut through cover shapes
Brush + shapes: Brush fog and shapes are independent — moving a shape never erases your brush work
⚠ Clear Fog: Removes both brush fog and all shapes — you will be asked to confirm
Tip: Cover the whole map with a black rectangle, then add reveal circles for torchlight or spell areas!
Measurement
Quick Measure:
• Desktop: Hold Alt, click and drag
• Mobile: Toggle "Measure" button
Shows distance in feet and grid cells
Tip: Use reveal circle fog shapes for persistent spell areas and ranges!
Grid Calibration
When to use: Your map has a printed grid
How: Enter number of cells, click "Start Calibration"
Click two grid intersections that distance apart
Grid Origin: Set (0,0) point for alignment
Snap to Map: Align grid to clicked intersection
Saving & Loading
Save: Click "Save Session" or press Ctrl+S — session auto-loads on refresh
Export JSON: Downloads current session as a file (always up-to-date)
Import JSON: Loads a previously exported session file
Reset: Clears everything and starts fresh
Tip: Save before making large changes so you can re-import if needed!
Tips & Tricks
• Fog of War: Cover entire map with black fog, then add reveal circles for line-of-sight
• Spell Areas: Use reveal circles for Fireball, Darkness, or other area effects
• Colored Zones: Use colored cover shapes to mark traps, difficult terrain, or auras
• Layering: Reveal shapes always cut through cover - perfect for windows in walls!
• Circle Resize: Drag the blue handle to adjust spell/vision radius dynamically
• Combine brush and shapes for precise fog control
• Export your session before major changes
• Grid size affects token and shape sizing
• On mobile: Use toggle buttons for brush/measure modes