Skip to main content

Touch Bar Support

ยท 3 min read

The Electron 1.6.3 beta release contains initial support for the macOS Touch Bar.


The new Touch Bar API allows you to add buttons, labels, popovers, color pickers, sliders, and spacers. These elements can be dynamically updated and also emit events when they are interacted with.

This is the first release of this API so it will be evolving over the next few Electron releases. Please check out the release notes for further updates and open issues for any problems or missing functionality.

You can install this version via npm install electron@beta and learn more about it in the TouchBar and BrowserWindow Electron docs.

Big thanks to @MarshallOfSound for contributing this to Electron. ๐ŸŽ‰

Touch Bar Example#

Touch Bar Gif

Below is an example of creating a simple slot machine game in the touch bar. It demonstrates how to create a touch bar, style the items, associate it with a window, handle button click events, and update the labels dynamically.

const {app, BrowserWindow, TouchBar} = require('electron')
const {TouchBarButton, TouchBarLabel, TouchBarSpacer} = TouchBar
let spinning = false
// Reel labelsconst reel1 = new TouchBarLabel()const reel2 = new TouchBarLabel()const reel3 = new TouchBarLabel()
// Spin result labelconst result = new TouchBarLabel()
// Spin buttonconst spin = new TouchBarButton({  label: '๐ŸŽฐ Spin',  backgroundColor: '#7851A9',  click: () => {    // Ignore clicks if already spinning    if (spinning) {      return    }
    spinning = true    result.label = ''
    let timeout = 10    const spinLength = 4 * 1000 // 4 seconds    const startTime = Date.now()
    const spinReels = () => {      updateReels()
      if ((Date.now() - startTime) >= spinLength) {        finishSpin()      } else {        // Slow down a bit on each spin        timeout *= 1.1        setTimeout(spinReels, timeout)      }    }
    spinReels()  }})
const getRandomValue = () => {  const values = ['๐Ÿ’', '๐Ÿ’Ž', '7๏ธโƒฃ', '๐ŸŠ', '๐Ÿ””', 'โญ', '๐Ÿ‡', '๐Ÿ€']  return values[Math.floor(Math.random() * values.length)]}
const updateReels = () => {  reel1.label = getRandomValue()  reel2.label = getRandomValue()  reel3.label = getRandomValue()}
const finishSpin = () => {  const uniqueValues = new Set([reel1.label, reel2.label, reel3.label]).size  if (uniqueValues === 1) {    // All 3 values are the same    result.label = '๐Ÿ’ฐ Jackpot!'    result.textColor = '#FDFF00'  } else if (uniqueValues === 2) {    // 2 values are the same    result.label = '๐Ÿ˜ Winner!'    result.textColor = '#FDFF00'  } else {    // No values are the same    result.label = '๐Ÿ™ Spin Again'    result.textColor = null  }  spinning = false}
const touchBar = new TouchBar([  spin,  new TouchBarSpacer({size: 'large'}),  reel1,  new TouchBarSpacer({size: 'small'}),  reel2,  new TouchBarSpacer({size: 'small'}),  reel3,  new TouchBarSpacer({size: 'large'}),  result])
let window
app.once('ready', () => {  window = new BrowserWindow({    frame: false,    titleBarStyle: 'hidden-inset',    width: 200,    height: 200,    backgroundColor: '#000'  })  window.loadURL('about:blank')  window.setTouchBar(touchBar)})