DEV Community

Cover image for Best Markdown Editor
Jimmy McBride
Jimmy McBride

Posted on

Best Markdown Editor

Overview

Best Markdown Editor is a website I built recently to help me write, edit, and export all of my markdown files. I created this because I felt a need to consolidate and simplify my markdown workflow. I began writing all of my blogs and markdown files in VS Code then I paste them in dev.to. I would write in VS Code first because I need a markdown file that I can add to my Next.js blog, then I would paste it in Dev's editor, and (since it's a website), I would get Grammarly to proofread my blog for me. I would make the Grammarly edits and then paste those changes back into my markdown file so everything would be uniform.

I have a YouTube video where I go over the website as well.

The Search

I didn't know how I would solve this issue for quite some time until my buddy threw a blog my way, Top 15: Best Rich Text Editor Components for ReactJS. Which immediately struck me as an essential step in the right direction. So I did some more research on Markdown editor components in React and came across this gem, 10+ Awesome React Markdown Editor Components. In the number 2 spot is the editor For Editor. It looked clean and feature-rich, so I decided to spin up a react app and test it out. It turns out it was a breeze to set up and use out of the box!

Tech Stack

You can find the code for my open-source GitHub organization here.

Front End

  • TypeScript
  • React
  • Firebase Auth
  • Firebase Cloud Storage
  • React Hook Form
  • Font Awesome
  • Sriracha UI (a custom style library I built for React)

Back End

  • TypeScript
  • Express
  • Knex
  • PostgreSQL

Features

When you come to Best Markdown Editor, you can start by clicking on the "Demo Page" link and try out the editor for yourself. I save everything in local storage, so you don't have to worry about losing progress. But if you sign in, you will have all of your markdown files saved to a database, with the ability to manage them as you please. By sign up, you can also use the image upload feature to upload images from your computer to your file as a URL markdown tag. Also, you will be able to export your markdown files as .md files directly to your computer.

What I Learned

This project was the first time I had set up cloud storage, and that was a blast. The whole thing was just a ton of fun to build. One thing I figured out in early testing was that when you download it as a PWA if the browser you downloaded it on has the Grammarly extension, you will be able to use that extension on the app you downloaded. So it's like you have a desktop app with Grammarly to edit your markdown, which I think is incredible.

Conclusion

All in all, I had so much fun building this, and I'm looking forward to creating many new features for this web app.

One thing I would like to do is build a folder system, where the folders store published versions of a user markdown files in a folder. The user can then use their credentials to hit my back end, where they have all of that stuff stored in front of their front end and use my database to list out their published files on their website. I also need to spend the time to make this mobile responsive. Right now, Best Markdown Editor has been optimized for tablet and desktop because, for this use case, I think are the most important. But it would be nice to have it on mobile as well.

If you deal with markdown a lot, give it a shot and let me know what you think! It's open-source as well, so don't be afraid to reach out if you would like to help out. The two things I'm most concerned about right now are creating updates for the PWA when new pushes get changed and building out a secure structure to let users hit my database for their published files if you know anything about either of those things I would love to hear from you. Thanks for reading!

Top comments (10)

Collapse
 
liyasthomas profile image
Liyas Thomas

I've also made a similar one. check it out: liyasthomas.github.io/marcdown

I love open source: github.com/liyasthomas/marcdown

Collapse
 
jimmymcbride profile image
Jimmy McBride

Nice! I like how you can bold, italicize, and strike through highlighted text. That's nice!

Collapse
 
liyasthomas profile image
Liyas Thomas

Thanks. I used document.selection.createRange() for that.

Collapse
 
mjswensen profile image
Matt Swensen

Nice work, @jimmymcbride . Looks like it's a Progressive Web App, too 🙌 🎉
I am a maintainer over on hemanth/awesome-pwa, if you'd like to send over a PR adding your app to the list I'd be happy to merge. 🙂

Collapse
 
jimmymcbride profile image
Jimmy McBride

Sure thing! I'd love to! 🔥 Thanks for suggesting!

Collapse
 
kris profile image
kris

checkout able.bio they editor is the best one I really love

Collapse
 
xuza7fa profile image
Asror Shahobiddinov
console.log('Ha Ha foo')
Enter fullscreen mode Exit fullscreen mode
Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
jimmymcbride profile image
Jimmy McBride

Thanks! I'll get on that right away!

Collapse
 
rezanid profile image
Reza

You need to check Typora!