Meditee: A free Medium like Markdown editor app with DraftJS
Tags: draftjs, electron, markdown
Published: 2021-11-17 08:36:57

---
title: Meditee: A free Medium like Markdown editor app with DraftJS
published: true
description: A FOSS Medium like Desktop app for Markdown files
tags: draftjs, electron, markdown
cover_image: https://github.com/alagrede/meditee/raw/master/.erb/img/erb-banner.png
---

Working on my favorite project [Znote](https://znote.io) a **Note-taking app and Javascript Lab**, I am currently evaluating existing libraries offering a dedicated writing experience to improve my knowledge.

During this study, I rediscovered [DraftJS](https://draftjs.org/) an impressive *WYSIWYG* library backed by Facebook, for editing formatted text with high level features like undo/redo in addition to an extensible block mechanism.

In this rich and mature community, I also found other [awesome](https://github.com/nikgraf/awesome-draft-js) projects and specifically [Medium-draft](https://github.com/brijeshb42/medium-draft), which is a beautiful Medium like rich text editor (built upon [draft-js](https://facebook.github.io/draft-js/)), eliminating mouse usage by adding relevant keyboard shortcuts.

These Markdown keyboard shortcuts are really pleasant to use and the integrated side buttons and toolbars are really well built.

Unfortunately, Draft.js **doesn't natively Markdown** and even if there are good initiatives, I didn't find a correct Draft/Markdown converter. So I decided to write my own Markdown converter. Moreover, **it could be cool 😎 to use DraftJS to edit your Markdown files, right?**


This is why I come up with a small fully-packaged Desktop application: [**Meditee**](https://github.com/alagrede/meditee)

---

[![Meditee logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eu14dfovu5blcmvw1l2b.png)](https://github.com/alagrede/meditee "Link to github")

## Meditee

Meditee is built on top of the **Medium draft** library and **Electron** with a custom Markdown two-way converter. This app is also **Free and Open-source** like all its underlying components.

This application is built with a *relatively* limited amount of code to let you understand how to interact with Draft and Markdown. It could be a source of inspiration for your future project.

> You are free to use the [prebuilt](https://github.com/alagrede/meditee#download) app or build it from source


![Meditee demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dq8zhg4bbuhhan2l98km.gif)

---

### Features 💡

- **Read/Write Markdown** files
- Support mapping of inline styles: **Bold/Italic/Strike/Code**
- Support of block styles: **Titles, Quotes, Break, List(OL/UL and TODOS)**
- **Links** and **Images**
- **Code** block **highlight** with auto-detection language
- **Emoji** support
- **Dirty flag** when file is edited with a confirmation before to quit
- A Dark theme

### Roadmap 📚
DraftJS has various interesting [plugins](https://www.draft-js-plugins.com/). I will be happy to know which plugins you are interested in. 
I have already planned to integrate some features like:
- Frontmatter
- Mermaid


If you are interested in helping me, I will be happy to read your suggestions and Pull Requests: [Discussions](https://github.com/alagrede/meditee/discussions)

For those who would like to see this kind of editor in [Znote](https://znote.io) you can also reach me the [Znote github](https://github.com/alagrede/znote-app/discussions) to discuss.

### Credits
- [Electron react boilerplate](https://github.com/electron-react-boilerplate/electron-react-boilerplate)
- [Medium-draft](https://github.com/brijeshb42/medium-draft)


**Hope you will enjoy this small app:** [Meditee Github](https://github.com/alagrede/meditee)