Heartnotes - offline, encrypted diary using Electron.js + React.js

2 minute read

I am proud to announce the release of Heartnotes, an offline, encrypted personal diary app for desktop, built using Electron and React. Heartnotes has been a labour of love for a couple of months now, in between various other projects, and it’s my first desktop app for any platform.

What does it do exactly? It allows you to keep a personal diary - one you can write to even when offline. All your data is encrypted (AES-256) by a password your provide and stored within a file which you can then backup any you wish (e.g. using Dropbox).

Technologies used

Fundamentally it is a React.js web app, using Flummox as the Flux implementation (if I was to do it again I’d probably use Redux instead of Flummox). Must of the app uses ES6 (thanks to Babel).

All crypto operations are done inside Web workers to keep the UI responsive. I use operative to schedule such jobs.

Gulp is used for live-reload development as well as to package the release version of the app.

Security architecture

The app works totally offline. Neither your data nor your password leave your computer. An encryption key is derived from your password using PBKDF2 as follows:

  • Use Fortuna PRNG with multiple event inputs (mouse, keyboard, accelerometer etc) to generate random salt data.
  • Use the generated salt and user’s password as inputs to PBKDF2-SHA512 to generate a 512-bit key. (The number of iterations of PBKDF2 is set such that generation takes 1 second on the user’s machine - on a Macbook Air 2012 this easily results in >10000 iterations).
  • Use the first 256 bits of the generated key with AES-256-GCM Random Init. Vector to generate the ciphertext.
  • Store the ciphertext, salt and PBKDF2 iteration count in the user’s diary file for when we next wish to open the diary.

The crypto algorithms are provided by SJCL, a well established JS encryption library.

An attacker who obtains a copy of the file would need to run a brute-force attack using the salt and iteration count contained within in order to obtain your password and decipher your data. Though not impossible, this requires a considerably higher time investment than typical “secure” personal diary software which claims to protect your diary with a password but doesn’t actually use encryption and/or uses it properly.


I used ckEditor to provide editing functionality. I tried a number of other open source editor libraries but ckEditor was the only one which gave me a bug-free experience. However, integration was a pain. I’m already looking ahead to using a better editor, esp. one which will allow me to use React Native and build native mobile apps. Right now AlloyEditor - which is built on ckEditor - looks promising.


Leave a Comment