Adding Features

Follow along the tutorial

This is part 4 of the Electron tutorial.

1. Prerequisites
2. Building your First App
3. Using Preload Scripts
4. Adding Features
5. Packaging Your Application
6. Publishing and Updating

Adding application complexity

If you have been following along, you should have a functional Electron application with a static user interface. From this starting point, you can generally progress in developing your app in two broad directions:

1. Adding complexity to your renderer process’ web app code
2. Deeper integrations with the operating system and Node.js

It is important to understand the distinction between these two broad concepts. For the first point, Electron-specific resources are not necessary. Building a pretty to-do list in Electron is just pointing your Electron BrowserWindow to a pretty to-do list web app. Ultimately, you are building your renderer’s UI using the same tools (HTML, CSS, JavaScript) that you would on the web. Therefore, Electron’s docs will not go in-depth on how to use standard web tools.

On the other hand, Electron also provides a rich set of tools that allow you to integrate with the desktop environment, from creating tray icons to adding global shortcuts to displaying native menus. It also gives you all the power of a Node.js environment in the main process. This set of capabilities separates Electron applications from running a website in a browser tab, and are the focus of Electron’s documentation.

How-to examples

Electron’s documentation has many tutorials to help you with more advanced topics and deeper operating system integrations. To get started, check out the How-To Examples doc.

Let us know if something is missing!

If you can’t find what you are looking for, please let us know on GitHub or in our Discord server!

What’s next?

For the rest of the tutorial, we will be shifting away from application code and giving you a look at how you can get your app from your developer machine into end users’ hands.