DEV Community

Cover image for I have just created a Markdown editor using React js โš›๏ธ in minimal code
Sripadh Sujith
Sripadh Sujith

Posted on

I have just created a Markdown editor using React js โš›๏ธ in minimal code

๐Ÿš€ What It Does

Markly is a lightweight Markdown editor with live preview and smart formatting tools. It lets you write Markdown, preview it instantly, and save your work as a .md file โ€” all in one clean interface.
โœจ Features:

  • Live Markdown preview using react-markdown
  • Smart formatting buttons (Headings, Italic, Bullet, Image)
  • Custom filename input and .md file download via file-saver
  • Raw HTML support with rehype-raw
  • Minimal, responsive UI for distraction-free writing ## ๐Ÿ› ๏ธ How I Built It
  • React powers the UI with useRef and useState for real-time updates.
  • react-markdown renders the Markdown preview.
  • rehype-raw enables raw HTML rendering inside Markdown.
  • file-saver lets users download their content as a Markdown file.
  • CSS handles layout and styling, keeping the interface clean and responsive.

โœจTry it out: https://markly-editor.netlify.app

Follow for more ๐Ÿ’–

Top comments (0)