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.
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
vue-router. Anyone familiar with the Vue ecosystem
should find those parts reasonably easy to understand. The main editor component is based
tiptap, which in turn is based on ProseMirror. The various available formattings are
components you can find all the parts that make up the main app interface.
store you will find everything related to storing notes and the vuex store
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
$ 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
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
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 email@example.com