Build a personal Markdown notebook with Firebase Storage

Brief at a glance

Last time, Firebase realtime database was used to build a comment system for my blog. All the Firebase tools are such easy to use, and I’ve had a pleasant experience with them.

Dig it deeper and comes out the single page app – an online Markdown Notebook, just try it out!

Okay, let’s start to have a glance on the online notebook.

Note that the Firebase Realtime Database or Cloud Firestore itself is capable of storing the Markdown contents as plain string. However, consider the storage limits (1GB vs 5GB) for a Firebase Spark Plan (free), it’s better to use Storage to store large quantity of markdown contents.

Firebase plans

Because of the 5GB limitation, I put the word personal in the title. But everyone else is welcome to play around with it. It’s hosted with Firebase Hosting; you can download the repo at to deploy your own copy. and Semantic UI

OK, let me explain a little bit more about it - Markdown Notebook. The UI is based on Semantic. At the very beginning, I am just playing around with the UI system, but then I found it’s interesting to do something more with it. That’s why I choose the, it’s appearance is consistent with Semantic UI.


What’s more, is a well designed open source markdown editor and not difficult to use. I just extend its ability with cloud storage.

The Notebook structure

In this Markdown Notebook, the Firebase realtime database is used to record the notes information – notebook name, note name, and the update time. Everytime the user login (only Google account authentication used), it just pulls notes and notebook information from database but not download the file (detailed contents) from storage.

The markdown contents are stored as files in the Firebase Cloud Storage using the same structure as the realtime database. Every note must sit into a notebook and the Markdown file loads into the same notebook folder.

Notes structure

Save and delete the note

Just as the same operation in Firebase database, we should first set a .ref() to the note to store.

Since Firebase authentication is used, the data and files are put under the user’s space, and set the rules that only the user can read and write:

var userID;
var userName;

firebase.auth().onAuthStateChanged(function(user) {
    if (user) {
        userName = user.displayName;
        userID = user.uid;

var databaseRef = firebase.database().ref().child(userID);
var storageRef =;

var noteName = "some given name";

var notedataRef = databaseRef.child("notebookname/" + noteName);
var notefileRef = storageRef.child("notebookname/" + noteName);
// just for showing the idea

Whenever you click save (or ctrl+s), put the textarea content into a markdown file (text/plain) and upload it to Firebase storage:

var noteContent = $("#noteContent").text();
var file = new Blob([noteContent], { type: "text/plain" });

var uploadTask = notefileRef.put(file);

In this process, check whether the file exists in the Firebase storage. If it already exists, just simply delete it then upload it again as an update operation.

For deleting the notes, I found that I didn’t need to delete the notebook as Firebase simply remove empty database node and empty storage folder, just delete the note itself is OK. In the database, use .remove(); but in the storage, use .delete().

Download the file from Firebase storage

It’s easy to put (upload) files into the Firebase Storage, but when I’m trying to download them, the CORS (Cross-Origin Resource Sharing) settings stopped the operation.

If you are going to build your version of the web app, you should follow this Configuring CORS on a Bucket to configure CORS using gsutil.

And then download the markdown file and get the content with jQuery:

notefileRef.getDownloadURL().then(function(url) {
    var jQxhr = $.get(url, function(data){;                
}).catch(function(error) {
// Handle any errors

The above process is triggered by click the note’s name in the open menu.


At present, it involves lots of bugs. I believe you can make it even better. But be honestly, there’s lots of online Markdown editor in the market, the most possibility of this one is for personal use and customise it as you like.

Then next step, I might add an export function that generate PDF files for the notes and customise the preview CSS.