A visual drag-and-drop designer for macOS Touch Bar presets
Build, preview, and export custom MTMR Touch Bar configurations — no JSON by hand.
Download · Installation · Features · Architecture
Visual Editor — See your Touch Bar layout in real-time. Drag elements from the palette, reorder with drag-and-drop, right-click for context menus.
39 Element Types — Buttons, media keys, native plugins (weather, CPU, battery, music, network, etc.), sliders, groups, and custom script buttons across 6 categories.
Rich Property Editor — Configure titles, images, colors, widths, alignment, actions, and type-specific settings for every element.
Action System — Assign tap actions (single, double, triple, long press) with HID keycodes, AppleScript, shell scripts, or URL triggers.
JSON Editor — Live syntax-highlighted JSON preview with inline editing, validation, import/export, and click-to-select sync.
Preset System — 5 built-in presets, 26 community presets, plus save and manage your own custom presets with overwrite support.
MTMR Integration — Load and save directly to your MTMR config file at ~/Library/Application Support/MTMR/items.json.
Undo & Redo — Full history support with keyboard shortcuts. Your work auto-saves to localStorage.
Download the latest DMG from GitHub Releases.
- Download
MTMR-2026-<version>.dmgfrom the latest release - Open the DMG and drag MTMR 2026 to your Applications folder
- Launch MTMR 2026 from Applications or Spotlight
The app is self-contained — no server, no dependencies, no setup required. A new release is published automatically with every update merged into main.
Note: The app is currently unsigned. On first launch, right-click the app and select "Open", then click "Open" in the dialog to bypass Gatekeeper.
git clone https://github.com/josmanvis/mtmr-designer.git
cd mtmr-designer
# Install dependencies
pnpm install
cd server && npm install && cd ..
# Start the development server
pnpm run devOpen http://localhost:3001 in your browser.
To build the native macOS app yourself:
# Build the web app for bundling
./build-webapp.sh
# Open in Xcode and build
open mtmr-src/MTMR.xcodeprojSelect the MTMR scheme and press Cmd+R to build and run.
The app works in two modes:
- Bundled mode: Uses built files from
mtmr-src/MTMR/WebApp/(no server needed) - Development mode: Falls back to
localhost:3001if no bundled files exist
mtmr-designer/
├── src/ # React frontend
│ ├── components/
│ │ ├── TouchBar/ # Visual Touch Bar canvas
│ │ ├── Palette/ # Element type catalog (left sidebar)
│ │ ├── Properties/ # Property editors (right sidebar)
│ │ └── JsonOutput/ # JSON preview/editor panel
│ ├── context/AppContext.jsx # Global state (useReducer + localStorage)
│ ├── data/
│ │ ├── elementDefinitions.js # 39 element types, categories, defaults
│ │ └── presets.js # Built-in + community preset configs
│ └── utils/
│ ├── jsonGenerator.js # JSON serialization / parsing
│ └── mtmrFileSystem.js # Server API wrappers
├── server/server.js # Express + Vite backend
├── mtmr-src/ # MTMR 2026 Swift app (Xcode)
└── public/presets/ # 26 community preset JSON files
React 19 + Vite. Three-panel layout: element palette (left), Touch Bar canvas + JSON editor (center), property editor (right, shown on selection). State managed with useReducer in a single context, auto-persisted to localStorage. Drag-and-drop powered by @dnd-kit.
Express integrated with Vite via vite-express. Exposes API routes for filesystem operations:
| Endpoint | Method | Description |
|---|---|---|
/api/load-mtmr |
GET | Read MTMR config from disk |
/api/save-mtmr |
POST | Write MTMR config to disk |
/api/config-path |
GET | Get config file path |
/api/health |
GET | Server health check |
Uses comment-json to parse MTMR configs that contain JavaScript-style comments.
Bundled fork of the MTMR Swift macOS app. Build with Xcode from mtmr-src/MTMR.xcodeproj. Bundle ID: com.mtmr-designer.mtmr2026.
| Category | Elements |
|---|---|
| Buttons | escape exitTouchbar brightnessUp brightnessDown illuminationUp illuminationDown volumeUp volumeDown mute |
| Native Plugins | timeButton battery cpu currency weather yandexWeather inputsource music dock nightShift dnd darkMode pomodoro network upnext |
| Media Keys | previous play next |
| Custom | staticButton appleScriptTitledButton shellScriptTitledButton |
| Sliders | brightness volume |
| Special | group close swipe |
| Type | Source | Save | Edit |
|---|---|---|---|
| Built-in | 5 curated presets | Fork to My Presets | Fork to My Presets |
| Community | 26 presets from contributors | Fork to My Presets | Fork to My Presets |
| My Presets | Your saved configurations | Overwrite in place | Direct |
- File > Save overwrites the active personal preset, or opens "Save as" for others
- File > Save as Preset... always creates a new entry in My Presets
- Add an entry to
elementTypesinsrc/data/elementDefinitions.js - The Palette picks it up automatically
- For custom property editors, add handling in
PropertiesPanel.jsx - For special JSON output, update
jsonGenerator.js
pnpm run dev # Development server (Express + Vite hot reload)
pnpm run build # Production build
pnpm start # Production server
pnpm run lint # ESLint| Layer | Technology |
|---|---|
| UI | React 19 |
| Build | Vite 7 |
| Drag & Drop | @dnd-kit |
| State | useReducer + Context |
| Syntax Highlighting | react-syntax-highlighter |
| Server | Express + vite-express |
| JSON | comment-json |
| Native App | Swift / Xcode (optional) |
- MTMR by Anton Palgunov
- Community preset contributors from the MTMR-presets repository
MIT