Mipui Developer Guide

Mipui is a free web app for creating and editing maps for tabletop and role-playing games. This is the developer's guide; for a proper "about" page see the main site, or just jump right into the editor.


Mipui is a hobby project implemented by just one developer with little background in web development; please don't judge the code quality :-) in particular while some areas underwent extensive planning (like operation_center.js) others were completely hacked together in an hurry (like menu.js).

It's a client-side web application, written entirely in Javascript. The server-side database is handled using Firebase. With the exception of Firebase and a couple of Javascript libraries used for exporting to image, no external code libraries are used.

Some Implementation Pointers

  1. Gestures are used for drawing content on the map; but content can also come from non-gesture sources (e.g. loaded from the server), so every cell must know how to correctly draw its content even when no gestures are involved. This is why cells contain the "setImage", "setText" etc. methods, instead of those being a part of the image or text gestures.
  2. Map synchronization is guaranteed by serializing the operations, so all clients agree on the order of all operations. Never break that invariant.
  3. Two important global variables are content (from content.js) and state (from state.js). Go over these if you plan on doing any changes to content saved on the map.
  4. Methods and fields which are intended to only be used inside the declaring class are marked with trailing underscore_ (but I occasionally break this convention myself).

Firebase Servers

There are three live firebase database repositories: mipui-prod, mipui-dev and mipui-test.

Local Storage

Currently, downloading and uploading the map file is intentionally not formally supported, primarily because it means I can no longer do non-backward-compatible changes. However there is a way to download and upload files, so if you want to experiment with running scripts / random generation / anything else, you can.

These options are exposed via the debug menu, which is automatically visible when developing locally, and can be made visible in the production version by entering "state.menu.addDebugMenu()" in the console.

Be warned, though: the server is not hardened against malformed files, so playing with a map can make it invalid and bring it to a state in which it could no longer be succesfully loaded. Don't do that on maps you care about (unless you fork first).


This software is published under an MIT license.


Testing is mostly manual, though a couple of tricky-to-test components have their own sets of unit tests. As a personal challenge I tried to write them without any test framework;I know it's a terrible practice but I just wanted to try. I do recommend using existing frameworks!