Blog Detail


A Simple & Elegant Markdown editor made with Vue.js  cover image

arrow_back A Simple & Elegant Markdown editor made with Vue.js

Markdown editors are simple and user-friendly text-to-HTML conversion tools for developers & web content writers. Hellomrbigshot introduced a simple and elegant markdown editor made with Vue js, that you can easily utilize in your project.


You can install it via npm or yarn.


yarn add simple-m-editor


npm install --save simple-m-editor


Next, You have to append the class “m-editor-preview” to your element to use the same style as the editor shows.

  <div class="m-editor-preview" v-html="markdownContent"></div>
import mEditor from 'simple-m-editor'
import 'simple-m-editor/dist/simple-m-editor.css'
export default {
  component: {
  data () {
    return {
      text: '',
      markdownContent: ''
  methods: {
    handleChange(data) {
      this.markdownContent = data.htmlContent


name type default description
value String - value
placeholder String - placeholder
mode live String one of [‘live’, ‘edit’, ‘preview’]
full-screen Boolean false full screen or not
show-line-num Boolean true show side line number or not
theme String light light or dark
auto-scroll Boolean true auto scroll or not


name params description
onChange Object: { content, htmlContent } change event

If you want to dig more about this package you can visit its documentation on Github.

Published at : 09-08-2021

Author : Rizwan Aslam
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

Launch your project

Launch project