Visual Touch Bar Designer for macOS

Design your
Touch Bar visually

Drag-and-drop designer for MTMR presets. Build, preview, and export custom macOS Touch Bar configurations without writing JSON by hand.

Get Started View on GitHub
esc
12:34
100%
CPU 12%
DnD
Dark

Everything you need to design
the perfect Touch Bar

A complete visual editor with real-time preview, preset management, and direct MTMR integration.

Drag & Drop Editor

Drag elements from the palette onto the Touch Bar canvas. Reorder with drag-and-drop. Right-click for context menus with edit, duplicate, and delete.

39 Element Types

Buttons, media keys, native plugins (weather, CPU, battery, music, network), sliders, groups, and custom script buttons across 6 categories.

Property Editor

Configure titles, images, colors, widths, alignment, and type-specific settings. Only appears when an element is selected to keep the workspace clean.

Action System

Assign tap actions — single, double, triple, or long press — with HID keycodes, AppleScript, shell scripts, or URL triggers.

{ }

Live JSON Editor

Syntax-highlighted JSON preview with inline editing, validation, import/export, and click-to-select synchronization with the canvas.

Preset Management

5 built-in presets, 26 community presets, plus save and manage your own. Overwrite personal presets or fork any preset to create variations.

MTMR Integration

Load and save directly to your MTMR configuration file. Changes are written to ~/Library/Application Support/MTMR/items.json.

Undo & Redo

Full history support with keyboard shortcuts. Your work auto-saves to localStorage across sessions.

Application Menu

Traditional menu bar with File, Edit, Presets, and Help menus. Hover-to-switch, keyboard-friendly, and familiar to every desktop user.

39 element types across 6 categories

Every element type supported by MTMR, ready to drag onto your Touch Bar.

Buttons

9 elements
escape exitTouchbar brightnessUp brightnessDown illuminationUp illuminationDown volumeUp volumeDown mute

Native Plugins

15 elements
timeButton battery cpu currency weather inputsource music dock nightShift dnd darkMode pomodoro network upnext yandexWeather

Media Keys

3 elements
previous play next

Custom Elements

3 elements
staticButton appleScriptTitledButton shellScriptTitledButton

Sliders

2 elements
brightness volume

Special

3 elements
group close swipe

Modular, layered design

A React frontend backed by an Express server, with optional Electron and native Swift layers.

Frontend

React SPA

Three-panel layout with element palette, Touch Bar canvas + JSON editor, and contextual property editor. State managed with useReducer and auto-persisted to localStorage.

React 19 Vite 7 @dnd-kit
Backend

Express Server

Integrated with Vite via vite-express. Exposes filesystem API routes for reading and writing the MTMR configuration file on disk.

Express vite-express comment-json
Desktop

Electron Wrapper

Optional Electron shell that embeds the React app and renders items to the actual macOS Touch Bar using Electron's native TouchBar API.

Electron Native Addon
Native

MTMR 2026

Bundled fork of the MTMR Swift macOS app. Build with Xcode. Fully compatible with presets designed in MTMR Designer.

Swift Xcode Sparkle
Method Endpoint Description
GET /api/load-mtmr Read MTMR config from disk
POST /api/save-mtmr Write MTMR config to disk
GET /api/config-path Get MTMR config file path
GET /api/health Server health check

Start from a preset, make it yours

Choose from built-in and community presets, or save your own. Personal presets can be overwritten in place; all others fork into your collection.

Type Source Count Save Edit
Built-in Curated presets (Default, Media, Developer, Minimal, Productivity) 5 Fork Fork
Community MTMR-presets GitHub contributors 26 Fork Fork
My Presets Your saved configurations (localStorage) Overwrite Direct

Up and running in 60 seconds

Clone the repo, install dependencies, and start designing.

# Clone the repository
git clone https://github.com/josetwentyfour/mtmr-designer.git
cd mtmr-designer

# Install dependencies
pnpm install
cd server && npm install && cd ..

# Start the development server
pnpm run dev

# Open http://localhost:3001