MLMap is a browser-based projection mapping application built with TypeScript. It runs entirely on the client with no server required, making it easy to deploy as a static site or run directly from local files.
Important
The project is still in development, so there may be some bugs or errors.
- Layer system with shapes (square, circle, triangle), video, and iframe layers
- Perspective transform using CSS
matrix3dfor precise corner-pin mapping - Multi-selection with Ctrl+Click and rubber band selection
- Layer ordering via context menu (move up/down/top/bottom)
- Clipping masks (Photoshop-style): shapes clip video layers, rendering video only through the mask geometry
- Video sources: local files, URLs, screen/tab/window capture (
getDisplayMedia), webcam (getUserMedia) - Transport controls: play, pause, stop, seek, next/previous, volume
- Audio routing: choose where audio plays (Editor, Output, or Both)
- Playlists with loop and ordering controls
- Dual-window output: editor window for control + separate fullscreen display window for projection
- Display sync via
BroadcastChannel(layout, playback state, video data) - Multi-monitor support with screen selection
- Workspaces with save/load, duplicate, rename, reset, and delete
- Workflow import/export as
.mlmapfiles or shareable URL - Undo/redo with full history
- Snap to edges for precise alignment
- Zoom with workspace scaling
- Collapsible panels for a clean editing view
- Node.js (for building)
- A modern browser (Chrome, Edge, Firefox)
npm install
npm run build # Production build (minified)
npm run dev # Development build
npm run dev:watch # Development build with file watchingOpen index.html in your browser. No web server is required (file:// works).
To project on an external display, click Launch Output in the toolbar. The output window (display.html) opens separately and receives all layout and video data via BroadcastChannel.
Press SHIFT + Space to toggle edit mode.
| Action | Key / Mouse |
|---|---|
| Toggle edit mode | Shift + Space |
| Move layer | Drag |
| Precise move | Shift + Drag |
| Rotate / Scale | Alt + Drag |
| Multi-select | Ctrl + Click |
| Rubber band select | Drag on empty area |
| Move (arrows) | Arrow keys |
| Solo / Unsolo | S |
| Toggle crosshairs | C |
| Rotate 90 | R |
| Flip H / V | H / V |
| Toggle bounds | B |
| Toggle snap | G |
| Delete layer | Delete |
| Undo / Redo | Ctrl+Z / Ctrl+Y |
| Context menu | Right-click on layer |
Build uses esbuild via build.js (supports --watch and --minify flags).
- FJRG2007
- Email: fjrg2007@tpeoficial.com
The founder of the project, FJRG2007, reserves the right to modify the license at any time. This project is licensed under the terms of the Apache-2.0.