MLMap: Open Source Browser-Based Projection Mapping

The Idea

Since always I loved projection mapping and it caught my attention. Since I have a projector, I was looking for some software that would allow me to do it, but all the options out there are paid and quite expensive.

I searched for open source alternatives, but they didn't work well, they were very confusing to use, and so on. That's why I decided to create an online program that allows doing things not too complex (at least for now) that allows managing a projector/monitor as a screen and being able to use with timeline to put videos, control them OBS-style, adjust formats to real object shapes, etc.

What is MLMap?

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.

Features

• Layer system with shapes (square, circle, triangle), video, and iframe layers
• Perspective transform using CSS matrix3d for 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 .mlmap files 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

Getting Started

Requirements

• Node.js (for building)
• A modern browser (Chrome, Edge, Firefox)

Install & Build

npm install
npm run build        # Production build (minified)
npm run dev          # Development build
npm run dev:watch    # Development build with file watching

Run

Open 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.

Why This Project?

I've always been fascinated by projection mapping. Finding that all the professional tools were expensive and the free alternatives were either broken or too complicated, I knew there had to be a better way.

MLMap is my solution to this problem - a free, accessible tool that anyone with a projector can use to create stunning visual experiences.

Future Plans

The project is still in development, so there may be some bugs or errors. I'm constantly working on adding new features and improving the existing ones. Some things on the roadmap include:

• More shape options
• Advanced timeline controls
• Audio reactive effects
• Integration with more input sources
• Mobile/tablet support for the editor

Try It Out

Live demo: https://fjrg2007.github.io/mlmap/

Source code: https://github.com/FJRG2007/mlmap

Give it a try and let me know what you think!