aarjithn/write-down

A lightweight markdown editor web component

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