Install electron as a dev dependency

$ npm install electron --save-dev

Add this your package.json

"main": "main.js"

Create a file called main.js and copy pasta this code.

const { app, BrowserWindow } = require("electron");

let win = null;

function createWindow() {
// Initialize the window to our specified dimensions
win = new BrowserWindow({ width: 1080, height: 1920 });

// Specify entry point

// Show dev tools
// Remove this line before distributing

// Remove window once app is closed
win.on("closed", () => {
        win = null;

app.on("ready", () => {

app.on("activate", () => {
    if (win === null) {

app.on("window-all-closed", () => {
    if (process.platform !== "darwin") {

This will load the app inside of electron by typing:

electron .

Alpha Channel Transparent Video

Now that the electron part is out of the way… One other feature of this app was a series of buttons that enable and disable transparent alpha channel video animations on top of a car image. This was suprisingly difficult to figure out how to make work properly.

HTML5 added transparent video, but in order to use it React needs to be able to render to Canvas instead of ReactDOM. I tried a number of different HTML5 components and while I was able to play video, I wasn’t able to get the background of the video to be transparent. That’s when I discovered react-html5video. Since it renders to Canvas the transparent video plays correctly.

I modified the CSS to eliminate all the player controlls and whala I had a system allowing me to turn layers of tranparent video of electricity animations on top of a car diagram on and off.