4
7 Comments

How to create a markdown editor in your web app?

I am working on a project that requires a markdown editor and a way for users to preview their content, something like dev.to or github has.

I don't have much knowledge of front end and have been using other available templates and modifying it. However in this case I am just stuck. I am also looking to add HTML editor later.

I am using Tailwind CSS and plain Javascript (no framework).

posted to Icon for group Developers
Developers
on October 9, 2021
  1. 2

    This can be as easy or difficult as you want it to be.

    The easiest version I can think of:

    1. Create a <textarea /> html input
    2. Bind it's value to a variable in Javascript
    3. Have snarkdown parse that variable
    4. Output that result on your page

    Then your next step would be adding the tailwind typography package and adding class="prose" to the output so it automatically formats the output nicely.

  2. 1

    I used the following markdown editor in my projects, its pretty easy to do.

    https://simplemde.com/
    https://github.com/pandao/editor.md

    They also have preview option.

  3. 1

    Use VS Code's web editor. Project Monaco.

  4. 1

    I worked at a SaaS that had a markdown editor in the browser and we used CodeMirror
    https://github.com/codemirror/lang-markdown

    This also looks interesting:
    https://uiwjs.github.io/react-md-editor/

  5. 1

    Sundown may fit your needs.
    https://github.com/vmg/sundown

    More specifically, the RobotSkirt (Node.js) wrapper.
    https://github.com/benmills/robotskirt

Trending on Indie Hackers
Stop Spamming Reddit for MRR. It’s Killing Your Brand (You need Claude Code for BuildInPublic instead) User Avatar 219 comments What happened after my AI contract tool post got 70+ comments User Avatar 213 comments $36K in 7 days: Why distribution beats product (early on) User Avatar 92 comments Where is your revenue quietly disappearing? User Avatar 87 comments We made Android 10x faster. Now, we’re doing it for the Web. 🚀 User Avatar 71 comments a16z says "these startups don't exist yet - it's your time to build." I've been building one. User Avatar 57 comments