How To Build A Simple Text Editor In Electron JS

I recently started checking out Electron which can be used to build cross-platform desktop apps with HTML, CSS, and JavaScript.

Before we get started, here are some of the features of Electron.

Electron.js is a popular framework for building cross-platform desktop applications using web technologies.

1. Cross-platform development: It allows you to build applications that run on Windows, macOS, and Linux using a single codebase.
2. Web technologies: You can use HTML, CSS, and JavaScript to build the user interface and application logic, leveraging your existing web development skills.
3. Node.js integration: Electron applications have access to Node.js APIs, allowing you to interact with the file system, network, and other system resources.
4. Native APIs: It provides APIs to interact with native desktop functionalities like system tray, notifications, and global shortcuts.
5. Automatic updates: Built-in support for automatic updates helps keep your application up-to-date for users.
6. Debugging tools: You can use Chrome Developer Tools for debugging your Electron applications.
7. Crash reporting: Electron includes tools for automated crash reporting to help you identify and fix issues.
8. Windows installers: Tools are available for creating Windows installers for easy distribution of your app.
9. Desktop integration: Apps can integrate with desktop environments, including file associations and custom protocol handlers.
10. Large community and ecosystem: There’s a vast ecosystem of tools, libraries, and resources available for Electron development.
11. Open source: It is open-source and maintained by GitHub, which has a large community of contributors.
12. Multi-window support: You can create multiple windows or views within a single application.
13. Developer tools extension: It allows you to bundle Chrome extensions with your app for enhanced development capabilities.
14. Accessibility features: Support for screen readers and other accessibility technologies is built-in.
15. Content security policies: It provides ways to implement strong content security policies to protect your app.

#1. Install Electron

The first step is to install Electron. Install Electron using the below command.

npm install electron

#2. Create a main.js file

// main.js
const { app, BrowserWindow, Menu, dialog } = require('electron')
const fs = require('fs')
const path = require('path')

let mainWindow
let currentFile = null

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  })

  mainWindow.loadFile('index.html')

  const menu = Menu.buildFromTemplate([
    {
      label: 'File',
      submenu: [
        {
          label: 'New',
          click: () => {
            currentFile = null
            mainWindow.webContents.send('file-content', '')
          }
        },
        {
          label: 'Open',
          click: async () => {
            const result = await dialog.showOpenDialog(mainWindow, {
              properties: ['openFile'],
              filters: [{ name: 'Text Files', extensions: ['txt'] }]
            })
            if (!result.canceled && result.filePaths.length > 0) {
              const content = fs.readFileSync(result.filePaths[0], 'utf-8')
              currentFile = result.filePaths[0]
              mainWindow.webContents.send('file-content', content)
            }
          }
        },
        {
          label: 'Save',
          click: async () => {
            if (currentFile) {
              const content = await mainWindow.webContents.executeJavaScript('document.getElementById("editor").value')
              fs.writeFileSync(currentFile, content)
            } else {
              const result = await dialog.showSaveDialog(mainWindow, {
                filters: [{ name: 'Text Files', extensions: ['txt'] }]
              })
              if (!result.canceled && result.filePath) {
                const content = await mainWindow.webContents.executeJavaScript('document.getElementById("editor").value')
                fs.writeFileSync(result.filePath, content)
                currentFile = result.filePath
              }
            }
          }
        }
      ]
    }
  ])

  Menu.setApplicationMenu(menu)
}

app.whenReady().then(createWindow)

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

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

#3. Create index.html

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Electron Text Editor</title>
    <style>
        body, html {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #editor {
            width: 100%;
            height: 100%;
            border: none;
            resize: none;
            padding: 10px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <textarea id="editor"></textarea>
    <script>
        const { ipcRenderer } = require('electron')
        const editor = document.getElementById('editor')
        
        ipcRenderer.on('file-content', (event, content) => {
            editor.value = content
        })
    </script>
</body>
</html>

#4. Run the project

Once you have added the above 2 files, run the project using the below command.

npm start

Stay tuned for more simple tutorials.