Skip to content

aarjithn/write-down

Repository files navigation

write-down

A lightweight markdown editor web component.

  • No markdown library dependency - use your choice to render
  • No codemirror
  • Works with React, Vue, Angular, and Plain JS.

write-down is based on Pagedown, Misbehave and Prism.js, and build using Stencil

Why another markdown editor?

  • Draft.js, Quill.js outputs Richtext, not markdown
  • SimpleMDE, Editor.md are fullfledged editors based on Codemirror, quite large in size

Adding to your project

Script tag

  • Add it via unpkg <script src='https://unpkg.com/write-down/dist/write-down.js'></script> in the head of your index.html
  • Then you can use the element anywhere in your template, JSX, html etc

Node Modules

  • Run npm install write-down --save
  • Put a script tag similar to this <script src='node_modules/write-down/dist/write-down.js'></script> in the head of your index.html
  • Then you can use the element anywhere in your template, JSX, html etc

Using this component

Listening for output

const writeDownElement = document.querySelector('write-down');
editorElement.addEventListener('output', event => { 
  console.log(event.detail)
});

Custom builds

Clone the repo and run:

npm install
npm start

To build the component for production, run:

npm run build

Built With Stencil