Let's use Electron to create a note-taking app that supports Markdown!

Preface#

Recently, I switched to a new MacBook Air and found that it came with a built-in "Notes" app, which I thought was pretty good. I could use it for daily planning and such. However, the one thing that really bothered me was that it didn't support Markdown! Every time I instinctively tried to use Markdown syntax, it felt awkward, like this:

Untitled

It just looks weird, and the styling isn't very appealing either. So, why not DIY one myself? Let's get started with Electron!

Setting up the Framework#

I won't go into too much detail about this part, as our main focus is on implementing the Markdown note with support and optimization. You can directly refer to the official documentation here: https://www.electronjs.org/zh/docs/latest/tutorial/quick-start

Implementing the Functionality#

Requirements analysis: Markdown note with support

Based on the requirements we created for ourselves, let's create a simple flowchart:

Mermaid Loading...

To control the size, we won't introduce any frameworks here. We'll just use Electron to implement the relevant functionality:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Markdown Notepad</title>
  <style>
    body {
      display: flex;
      height: 100vh;
      margin: 0;
      font-family: Arial, sans-serif;
    }

    #markdown-input,
    #markdown-preview {
      flex: 1;
      padding: 20px;
      box-sizing: border-box;
      height: 100%;
      overflow-y: auto;
    }

    #markdown-input {
      border-right: 1px solid #ddd;
    }

    #markdown-preview {
      padding-left: 40px;
    }
  </style>
</head>

<body>
  <textarea id="markdown-input" placeholder="Enter Markdown here..."></textarea>
  <div id="markdown-preview"></div>
</body>

</html>

At this point, we notice that there is always a window bar at the top, which is not very elegant compared to the Notes app on Mac. We can modify the window we created by adjusting the main.js file (responsible for creating windows and handling system events):

const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');

let win; // Modify the variable name to match its usage below

function createWindow() {
  // Create a borderless browser window
  win = new BrowserWindow({
    width: 320,
    height: 320,
    frame: false, // Set the window to be borderless
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    }
  });

By setting the frame property in BrowserWindow, we can make the window border disappear.

// main.js

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

//.....

// Listen for the toggle-pin message from the renderer process
ipcMain.on('toggle-pin', (event, shouldPin) => {
  if (win) {
    win.setAlwaysOnTop(shouldPin); // Set the window to be always on top
  }
});

// renderer.js
togglePinBtn.addEventListener('click', () => {
  isWindowPinned = !isWindowPinned;
  ipcRenderer.send('toggle-pin', isWindowPinned);
  togglePinBtn.textContent = isWindowPinned ? '📌 Toggle Pin' : '📄 Just Paper';
});

Let's make some minor style optimizations and run Electron to see the final functionality:

At this point, all the functionality has been implemented.

Packaging and Building#

We will use electron-builder for packaging. Configure it in the package.json file:

"build": {
    "appId": "com.yourdomain.memomark",
    "mac": {
      "category": "public.app-category.productivity",
      "icon": "assets/MemoMark.icns" // Your logo
    },
    "dmg": {
      "title": "MemoMark",
      "icon": "assets/MemoMark.icns",
      "window": {
        "width": 600,
        "height": 400
      }
    },

Note that the logo format for Mac is icns, so be careful not to make any mistakes~

Run the build command:

npm run dist

Packaging is successful! After installation, you can use your own developed Electron app locally~

Summary and Some Regrets#

When choosing a framework for building desktop applications, not only the functionality needs to be considered, but also factors such as performance, runtime size, and development experience. Here is a detailed comparison between Electron and Tauri:

	Electron	Tauri
Size	The minimum executable file size of Electron is about 50MB, due to its dependency on the complete Chromium and Node.js runtime.	Tauri has a significant advantage in terms of size. The size of a basic Tauri application ranges from a few hundred KB to 1-2MB.
Speed	The speed of Electron is affected by its large size, as it requires loading the complete Chromium and Node.js runtime.	Tauri, written in Rust, is faster and has shorter startup times.
Security	The security of Electron depends on how it is used. Improper usage may lead to security vulnerabilities, such as directly using Node.js APIs in the renderer process.	Tauri is designed with security in mind and adopts a strict security model, including prohibiting direct access to Node.js APIs from the renderer.
Community	Electron is developed by GitHub and has a large user base and mature community. It has extensive documentation and tutorials.	Tauri is a relatively new project, and its community is rapidly growing, but it is not as mature as Electron at the moment.
Compatibility	Electron supports Windows, macOS, and Linux.	Tauri also supports Windows, macOS, and Linux.
Development Experience	Electron supports HTML, CSS, and JavaScript, so frontend developers can quickly get started.	Tauri allows the use of any frontend framework that can be compiled into static HTML, CSS, and JavaScript, making it very flexible for frontend developers.
Memory Usage	Electron has higher memory usage because each Electron application needs to run its own Chromium and Node.js instances.	Tauri has relatively lower memory usage because it doesn't rely on heavyweight runtime environments.

For the Markdown note with support that I implemented, the size has already reached 237MB (although it could be due to my lack of optimization). If I were to use Tauri, the size might be better controlled, which is the biggest regret of this project.

If you are interested in this project, maybe you can take a look at it here: https://github.com/isolcat/MemoMark. If you can download it, try it out, provide issues, or submit pull requests, that would be even better. I hope this Markdown-supported Electron notepad application can help you~