Build Desktop Markdown Editor With Electron

Nov 5, 2016 17:39 · 266 words · 2 minute read Javascript Electron

My building process of a desktop markdown editor based on Electron.



I won’t start with a completely empty file since it’s too time-wasting. Let’s start with the electron-quick-start repo which gave me the very basic structure of Electron and all the necessary node dependencies installed including the electron-prebuilt which is the heart of any electron app and the starts the very app itself!

$ git clone
$ mv electron-quick-start myMDE
$ cd myMDE
$ npm install
$ npm start

Notice: I have put bootstrap.min.css in myMDE/css/ in advance.


Download marked.min.js, jquery.min.js, bootstrap.min.js and bootstrap-markdown.js (I presume you know where to find them) and put them in folder /js/.

Download bootstrap-markdown.min.css and bootstrap.min.css in /css/ folder.

Following is important:


if (typeof module === 'object') {window.module = module; module = undefined;}

to the top of jquery.min.js,


if (window.module) module = window.module;

to the bottom.

This must be done otherwise jQuery won’t run properly on the program.

Create front page


<!DOCTYPE html>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/bootstrap-markdown.min.css" rel="stylesheet">


    <textarea name="plainText" id="plainText" placeholder="Write your Markdown content here"></textarea>

    <!-- <script src="js/app.js"></script> -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/marked.min.js"></script>
    <script src="js/bootstrap-markdown.js"></script>
    <script src=""></script>
        window.onload = function() {

Only one textarea, and Bootstrap-Markdown will do the rest.


html, body, body>div, textarea {
    height: 100%;
    width: 100%;

Only to make a full screen.

And so far we’ve built an editor with preview mode.


Next we are gonna add Open\Save functions to it.