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)