DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Build a full-fledge Markdown app with Electron
Amit Merchant
Amit Merchant

Posted on

Build a full-fledge Markdown app with Electron

Have you ever wanted to develop desktop apps while being a true web developer without even caring about the native architecture or the language most of the applications build for different platforms likes of Windows, macOS or Linux? Or you just wanted to get started with building desktop apps? Isn't it great if you are able to build desktop apps using the technologies you already knows i.e. HTML, JavaScript and CSS? I was in the same urge to dive into world of desktop apps. So, I have been stuck on to GitHub's Electron lately.

What is Electron?

From official Electron's site, "Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS. It takes care of the hard parts so you can focus on the core of your application."

Sweet. Isn't it? You may be wondering which hard parts?! Electron basically makes it easy to implement automatic updates, native menus and APIs, App Crash Reporting, Debugging of your app a lot easier which you won't find in many similar solutions available in the market. Such as nw.js And when any project is backed by GitHub, you can use it with your eyes closed.

Getting started with building the app

My philosophy to learn a new technology is to take a real world idea and try to implement it with that particular technology. In this case, I have decided to build a simple Markdown Editor app which can do following:

  • Show live preview of Markdown while writing the same
  • Show the relevant HTML for Markdown
  • Basic Markdown editing
  • Support for GitHub Flavored Markdown

So, taking above requirements into account, I have started building it by first cloning the Quick Start repository

$ git clone https://github.com/electron/electron-quick-start

$ ren electron-quick-start electron-markdownify

$ cd electron-markdownify

$ npm install && npm start
Enter fullscreen mode Exit fullscreen mode

This 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!

The app's folder structure contains a main.js file, an HTML file and package.json.

Electron basically runs two processes when running it : 1) Main Process 2) Renderer Process.

In a nutshell, Electron provides a runtime to build desktop applications with pure JavaScript. The way it works isβ€Šβ€”β€ŠElectron takes a main file defined in your package.json file and executes it. This main file (usually named main.js) then creates application windows which contain rendered web pages with the added power of interacting with the native GUI (graphical user interface) of your operating system.

Render process involves the core JavaScript we write within the HTML to drive frontend functioning of the app.

Next, to make it convenient to user to write Markdowns, I have used CodeMirror which is a web based code editor. This made writing Markdown easy and beautiful.

Further, as my app is a Markdown editor, I needed a Markdown parser which can convert the plain Markdown in to the HTML which can be previewed. So, I have used this awesome Markdown parser named marked. It has all the things I needed including GFM.

Combining all bits and pieces, I have been finally done with my original prototype i.e a Markdown app. You can see the end product over here and take a look into working of it yourself as it is not feasible to include everyting in a single post.

This is how the end product looks like..

Final words

Throughout this journey, I have explored many new things about desktop app development such as packaging and distributing the app, handling exceptions for different operating systems, communicating with native resources and so on.

The app is still work in progress and I'm still learning Electron as I try to add more features into this very app. The more I know about Electron, the more I fell in love with it. It sure is a future of desktop apps.

That's all folks!

Top comments (213)

Collapse
 
ben profile image
Ben Halpern

When I see this, my mind immediately goes towards building an app called dev writer which is a desktop markdown editor which allows you to publish straight to dev.to.

Collapse
 
amit_merchant profile image
Amit Merchant

Yeah. What if I integrate the same in Markdownify itself? ;)

Collapse
 
glad432 profile image
glad432
Collapse
 
saltsma43544801 profile image
saltsman

This article quit like impressive. My friend also a web developer. He developed some following apps. If you want that, you can also download that link.
pirlo tv. mobdro apk, zenonia 5 mod apk, exe to apk apps.

Collapse
 
bright07 profile image
Bright Joseph
Collapse
 
krpabir profile image
Pabir Kr Mandal

It is quite a nice discussion going on!!! However, those who want to travel to Dooars can enjoy the beauty of it through Dooars Trip's Dooars Tour Packages and thanks ...

Collapse
 
bright07 profile image
Bright Joseph
Collapse
 
nbtour profile image
North Bengal Tourism

Such an in-depth article about how to Build a full-fledge Markdown app with Electron. We also write in-depth itineraries for Sikkim Tour Packages and thanks ... From North Bengal Tourism

Collapse
 
krpabir profile image
Pabir Kr Mandal

nice post !!! Kalimpong Silk Route Tour Package thanks ....

Collapse
 
iajayp profile image
Ajay Prajapati

You are awesome for sharing all that knowledge on BA Result. I really appreciate visiting your website again. Thank you for your generosity!

Collapse
 
printeryour profile image
Your Printer Guru

As you have mentioned building a full-fledge Markdown app with Electron is fun. Is it possible to make a printer blog into an app?

Collapse
 
gamingpillar profile image
GamingPillar

Thank you so much for this tutorial. I really like your way of writing.

Apex Legends Redeem Codes
GamingPillar

Collapse
 
gizmo_radar profile image
Gizmo Radar • Edited on

Thank you for sharing such an in depth guide on Markdown app. Visit Gizmordar to get 5000+ Funny Kahoot Names and more for free.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Stop sifting through your feed.

Find the content you want to see.

Change your feed algorithm by adjusting your experience level and give weights to the tags you follow.