Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.


Notebag is a note-taking app that has a razor-sharp focus on keeping you focused making navigation as seamless as possible. It was developed between March and May 2020.

Project structure

Notebag is split into two main parts. One is the Electron app responsible for handling window management and OS-related things, the other is a Vue app handling the entire UI.


The Electron part is relatively small and the file structure is split up into the various components that make up the app: the main window, the preferences window, the app menu, the tray functionality and some helpers to deal with global keyboard shortcuts.


The Vue app is built on vuex and vue-router. Anyone familiar with the Vue ecosystem should find those parts reasonably easy to understand. The main editor component is based on tiptap, which in turn is based on ProseMirror. The various available formattings are stored under plugins and extensions respectively.

Under components you can find all the parts that make up the main app interface.

Under store you will find everything related to storing notes and the vuex store

Under import, directives, scanners and utilities you will find many helpers for various functionalities of the app. scanners specifically contains functionality related to finding backlinks and categories inside a note.


The CSS is handwritten with some augmentations by the Tachyons CSS library. It's very messy.

Developing the app

Everything you need to get started is available here. To run a development environment you need only do the following (assuming you have node and npm installed):

$ npm install
$ npm run app

This will start the development build of Notebag which will hot reload for any changes you make to the Vue app. Should you make any changes to the Electron app, you have to restart the process.

Building the app

To build a standalone version of Notebag you can run one of the following:

$ npm run dist:all -- (Builds for all platforms)
$ npm run dist:w -- Windows
$ npm run dist:m -- Mac
$ npm run dist:l -- Linux

Code-signing and notarizing the app

If you have a valid Windows Code Signing Certificate in p12 format, you can specify the path and password to access it under electron-builder.env - Mine was usually located in the build directory and named windows_cert.p12

On Mac, if you have a valid developer certificate, it will be automatically used on building the app. To notarize it on Apple's servers, be sure to replace the credentials in .env.example and rename it to .env. Then edit package.json and remove the DISABLED_ prefix for build.afterSign.

There are no special code-signing mechanisms in place for Linux.


If you are interested in further developing Notebag and have questions about specific implementation details or other intricacies of the app, please don't hesitate to contact me under


A note taking app that does not break your workflow







No packages published