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

Bash

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!