Skip to content

catherinetweeks/markdown-editor

Repository files navigation

Rich Text to Markdown Editor

Project Description

This minimalist web app is a rich text editor built with React and several open-source libraries. It allows users to compose formatted text and export it as Markdown, either by copying the Markdown output or downloading it as a .md file. The interface is designed to be clean and user-friendly, with all essential features easily accessible. In addition to standard Markdown formatting, the editor supports GitHub Flavored Markdown extensions such as strikethrough and has some features like underline that are not in markdown, but make the text editor itself more complete.

Why I build this

When I'm typing up a README file, I usually use an online "rich text to markdown" tool to make sure it comes out perfect. I decided to make my own rich text to markdown converter/editor, including only the necessary features including headings, lists, etc. styled in a sleek and enjoyable way!

Features

  • Rich text editor including:
    • Bold font
    • Italic font
    • Strikethrough font
    • Unordered lists
    1. Ordered lists
    • Multiple heading options (h1, h2, h3)
    • And more!
  • Dark mode toggle
  • Copy converted markdown text to clipboard
  • Download converted text as a .md file
  • Text is stored locally in browser (so it persists when you close the tab or reload)
Screenshot 2025-07-08 at 15 00 25 Screenshot 2025-07-08 at 15 00 35

Tools Used

  • React with Typescript
  • TailwindCSS
  • Vite
  • TipTap - a text editor framework
  • Turndown - for HTML -> MD conversion
  • Lucide Icons from react-icons

P.S. I typed up this very README file using this project!

About

An online text editor that converts to markdown via copying to clipboard or downloading as md file.

Topics

Resources

Stars

Watchers

Forks

Contributors