Build a Simple Notepad in Electron.JS

“If You Can Build a Website, You Can Build a Desktop App”

Required

• Basic knowledge of HTML, CSS, JS, Node.JS, Electron.JS

Today we are going to develop a Simple Notepad in Electron which will be having the following features

• Open a file, change and save it in the same path
• Open recent files — Keeps record of previously opened files

Create Project

Let’s do npm init and do the following. It will create a package.json file which will contain out project’s information.

We will be using electron and fs-extra modules. We will be using fs-extra instead of fs node.js built-in module because it favors us with more features.

So let’s install the electron and fs-extra.

• npm i -D electron
• npm i fs-extra

Open package.json and inside scripts remove test command add to start.

package.json file

Our folder structure should be like

Folder Structure

index.js is our project’s main entry file. The asset folder will contain HTML, CSS, and JS files for GUI. the lib folder will contain our logic for opening, saving, keeping open files records, opening dialog box, etc.

Open index.js, our main entry file, and import the following modules

Import Module

Then we will add a listener to the app which will create a browser instance and render the HTML file as GUI.

When the app will be ready build_app function will execute which we will create by ourselves.

Now inside the asset folder,

• Create a file index.html which will contain our view for Notepad
• Create a folder named JS and create a file script.js inside the JS folder which will contain logic for printing file content in HTML, Fire event on save call.

Now place following code inside index.html

index.html file

Folder structure till now

Folder Structure

Now open index.js, create build_app function which will make browser instance and render HTML files. Place the following code inside the build_app function.

Go to the project directory, run npm start, and certainly you have basic knowledge of developing Desktop App in electron.js

Now we will be adding our custom menu instead of existing or default one that you can use in the above image( File, Edit, View, Window, Help ).

Now do npm start, you will notice menu File and on click of it you will notice Open File… and Open recent…

Onclick of that there is console.log in command prompt. So it’s working.

Now we will be implementing Open File functionality. Open script.js, place the following code.

What it does basically, it imports ipcRenderer from electron which will keep listening for the event from the main process for getting file data and it will set file data in textarea and also set file path in path variable.

Inside lib folder, create a file FileManager.js which will contain logic for file open dialog, open a recent file, saving history, read files. Import the following modules inside FileManager.js .

Now create a class FileManager, add a constructor which will receive app_window object from index.js file. Initialize app_window, homeDirectory, historyPath, username to class level like following.

Now create a function saveHistory inside FileManager class which will take file path as an argument and save all opened files inside historyPath as JSON data. Place the following code inside saveHistory function.

Now create another function openFileWindow which will actually open a window for selecting a file. Place the following code inside openFileWindow function.

Now go to index.js, import FileManager class from FileManager.js, and create an object passing app_window object. After this, update the menu_list array with the following code.

Now do npm start and click on File then Open File… label and select a file from the file system. You can now see file content in our brand new Notepad.

Now we will implement saving files after changing content. Add the following code in script.js.

It will fire event to the main process when the ctrl+s button clicked for saving data after changing.

Let’s add a listener in the main process to listen above event in index.js

Now open a file, change content, and save it. You will see changes next time you open it again.

After the above one, we will fetch all recently opened files and add them in Open recent files… submenu.

Open FileManager.js, add readHistory function with the following code.

Now open index.js get open recent files Join data from which we will create a submenu of Open Recent Files… Add the following code inside the build_app function.

Add async before build_app function. Update menu_list with the following code.

Now do npm start and there will be a recently opened file’s path in the submenu of Open Recent Files.

After this, we will be implementing on click of any history in the submenu that a particular file should open in our Notepad pro. For that create a function openRecentFile in FileManager class inside FileManager.js. Place the following code inside openRecentFile function.

This function will be executed when we will click on historical record in the submenu. It will take the file path as an argument, read that file’s content, save that in history, and fires event with the file’s content to renderer process means to GUI script.js file.

Now do npm start and test with the following features

• Open file
• Save file after changing content
• History in Open Recent File submenu
• Onclick of any path history, that file’s content opens

And our brand new Notepad is working perfectly.

Check out the Github repository for Source Code

https://github.com/dev-sankhadip/ElectronNotepad

So, if you guys are having any doubts at any point in this tutorial, please comment down. I will give you a quick reply.

Also, visit my blog. If you want to publish your article, BlogMarch is an option.

https://blogmarch.com/

Sankhadip Samanta

Full Stack Developer, Code Quotient | Tech Writer and Social Media Handler at BlogMarch

Find me on Linkedin 😃 and Github 😅