Mudlet Map Editor

A browser-based visual editor for Mudlet .dat binary map files. Load, edit, and save MUD maps directly in your browser — no installation required.

Features

• Visual editing — add, move, and delete rooms on an interactive canvas
• Exit management — create bidirectional or one-way exits between rooms in 14+ directions
• Labels — place text labels with custom fonts, colors, and optional images
• Custom lines — draw waypoint-based paths with configurable colors and arrowheads
• Area & environment management — organize rooms into areas, customize terrain colors
• Swatches / Paint tool — define symbol+environment presets and paint them onto rooms in one click
• Undo/redo — full command history with descriptive labels
• Binary I/O — load and save Mudlet .dat files directly in the browser; also load from URL
• Session persistence — work is auto-saved to IndexedDB and restored on next visit

Tools

| Key | Tool | Description | |-----|------|-------------| | 1 | Select | Click rooms to view/edit properties; nudge with arrow keys | | 2 | Connect | Click source then target to create an exit | | 3 | Unlink | Click an exit stub to remove that exit | | 4 | Add Room | Click an empty grid cell to create a room | | 5 | Add Label | Place a text label on the map | | 6 | Delete | Remove rooms, exits, or labels | | 7 | Pan | Drag to move the viewport | | 8 | Paint | Apply the active swatch (symbol + environment) to rooms |

The Custom Line tool is activated from the side panel (on a selected exit), not the toolbar. Hold Space to temporarily pan from any tool.

Keyboard Shortcuts

| Shortcut | Action | |----------|--------| | Ctrl+Z | Undo | | Ctrl+Y | Redo | | G | Toggle grid snap | | F | Fit area in view | | Delete | Remove selection | | Ctrl+A | Select all rooms in current area/z-level | | Esc | Cancel current operation |

Getting Started

npm install
npm run dev

Then open the app, click Load in the toolbar to open a .dat file, or click New to start from scratch. Use Download to save your changes.

Commands

npm run dev       # Vite dev server with HMR
npm run build     # Type-check and bundle for production
npm run preview   # Preview the production build

Using as a library

The published package ships only dist-lib, and everything the editor renders with is left external rather than bundled — so a host application resolves one copy of each and the editor renders through the same React, Konva and renderer instances the host already uses. They are declared as peer dependencies and must be installed alongside it:

npm install mudlet-map-editor \
  react react-dom konva mudlet-map-renderer mudlet-map-binary-reader \
  i18next react-i18next

npm 7+ installs peers for you; Yarn 1 does not, so add them to your own dependencies there. Resolving any of them twice re-introduces the duplicate-instance failures this avoids — two Reacts break hooks, two Konvas split the stage registry, two renderers disagree on scene structure.

Extending with plugins

Drop a file at src/plugins/<name>/index.ts with a default export implementing EditorPlugin and it is picked up automatically at build time. Plugins can add sidebar tabs, room panel sections, swatch presets, map check warnings, and lifecycle hooks (map open/close/save, app ready, custom overlay UI).

See docs/plugins.md for the full interface reference and examples.

Tech Stack

• React 19 + TypeScript
• Vite for bundling
• Konva for canvas rendering (via mudlet-map-renderer)
• mudlet-map-binary-reader for parsing and serializing Mudlet .dat files

Architecture

Binary .dat file
  → mudlet-map-binary-reader  →  MudletMap (in-memory model)
  → EditorMapReader (adapter, Y-flip)
  → MapRenderer (Konva canvas) + LiveEffect overlays

All map mutations go through a command system (applyCommand) that records operations for undo/redo. State is managed in a single centralized store.

Bulk operations (multi-room delete, move rooms to area, undo/redo of the above) go through optimized paths in EditorMapReader that perform a single rebuildPlanes/rebuildExits per affected area rather than one per room, keeping large selections responsive.