Skip to content

Getting Started

Prerequisites

  • Node.js 22 or later
  • pnpm (install with npm install -g pnpm)

Install

git clone <your-fork>
cd mapcreator
pnpm install

Start the dev server

pnpm dev

Open http://localhost:5173. The editor loads with a default empty map.

Paint your first map

  1. Select a tile tool from the left toolbar (Wall, Floor, Room, etc.)
  2. Click on the canvas to place tiles
  3. Right-click to erase
  4. Use the overlay tab to place doors and room labels on top of base tiles
  5. Switch between tabs to manage floors (add, rename, reorder)

Export

Click the Export button in the menu bar. The map is saved as a JSON file. Place it in the maps/ directory.

Customize theme colors

Edit src/theme/tileStyles.ts to change fill and stroke colors for each tile type. The file exports tileStylesLight and tileStylesDark palettes. Edit src/theme/vars.css to change the UI shell colors.

Build for production

pnpm build

Output goes to dist/.

Run tests

pnpm test

Next steps

Read Core Concepts for the data model. Read the Editor Guide for all painting features.