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
6 weeks solo, 2 rejections, finally live but nobody told me marketing would be this hard User Avatar 135 comments Building ExpenseSpy solo, no funding — launching June 17 on iOS & Android User Avatar 56 comments I spent more time setting up cold email than actually selling. Here is what fixed it. User Avatar 26 comments I just wanted to taste AI coding tools. A week passed. User Avatar 20 comments Building LinkCover – Day 3: Payment is live. No more building, time to sell. User Avatar 15 comments I built a PDF API because every team I know has a haunted corner of their codebase they never want to open User Avatar 13 comments