Electron Alert

rocketlaunchr.cloud
2 min readNov 24, 2019

--

Electron.js is a popular framework for creating cross-platform desktop applications for macOS, Windows, and Linux using JavaScript. Despite the large binary files and the insecurity of your source code, it does provide many important features for developing heavy-duty applications. Popular applications such as VSCode and Slack are built on top of it.

I’ve used Electron for 2+ years. One major gripe I have is the hideous built-in alert boxes for displaying messages and errors.

Built-in Alert box on macOS

You can argue that it’s not the role of Electron to deviate from the alerts provided by the host Operating System. That’s fair enough, but I couldn’t find anything decent in userland either. So I built one.

electron-alert library

Features

  • WithFrame and Frameless alerts that are visually stunning
  • Toasts with timers
  • Exception handling alert
  • Sounds
  • SweetAlert2-esque API*

How it Works

My challenge was to create an alert box that was flexible, customizable, and visually stunning on all operating systems. In the end, I chose to leverage the popular SweetAlert2 library, which is ubiquitous (10K+ stars and used by over 28K+ repositories). It’s written by a solid team, and the API is easy to understand and use. I couldn’t not use it.

My library electron-alert exposes an API that is similar to SweetAlert2. When it’s time to display the alert, it creates a BrowserWindow and places a SweetAlert2 inside. It’s approximately 72 KB in size, but we’re talking Desktop Applications here, so no biggie.

You can find the repo here: https://github.com/rocketlaunchr/electron-alert

You can import it using npm i electron-alert.

--

--