Markdown editor

Simple, powerful, and embeddable javaScript markdown editor with real-time preview, syntax highlighting, responsive design, and seamless integration for all web projects.

• Real-time Preview: See your markdown rendered instantly as you type.
• Syntax Highlighting: Enhanced readability with clear code and markdown formatting.
• Easy Integration: Seamlessly integrate into any web project with minimal setup.
• Customizable Toolbar: Dynamically configure and reorder toolbar options like bold, italic, and more.

Features

Installation

You can install it using NPM, import the JavaScript file directly, or use a CDN for rapid deployment.

Install via NPM

npm install markdown-text-editor

Import JS and CSS and initialise the plugin on your textarea element

import 'markdown-text-editor/dist/markdown-text-editor.css';
import MarkdownEditor from "markdown-text-editor";

const editor = new MarkdownEditor('.editor', {
  placeholder: 'Write your markdown...',
  toolbar: ['heading', 'bold', 'italic', 'strikethrough', 'ul', 'ol', 'checklist', 'blockquote', 'link', 'preview'],
});

Using a CDN

Alternatively, include the following CDN links in your HTML

JavaScript

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/markdown-text-editor.min.js"></script>

CSS

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/markdown-text-editor.min.css">

Markdown content retrieval

Textarea element value retrieval via javascript

In this method, you can access the markdown content entered into the editor directly using JavaScript. This is helpful when you want to dynamically retrieve the value and process it in your application (e.g., displaying it elsewhere or sending it via AJAX).

<form>
  <textarea class="editor h-48" rows="5"></textarea>
  <button type="button" id="submit-btn">Submit</button>
  <div class="output"></div>
</form>

const editor = new MarkdownEditor('.editor', {
  placeholder: 'Start writing...',
  toolbar: ['bold', 'italic', 'preview'],
});

document.getElementById('submit-btn').addEventListener('click', function() {
  const markdownValue = document.querySelector('.editor').value;
  console.log(markdownValue);
  document.querySelector('.output').innerHTML = `<pre>${markdownValue}</pre>`;
});

Submit the textarea content to the backend via HTML form submission

If you prefer a traditional form submission approach (for example, in server-side applications like Django), you can integrate the markdown editor into a form that submits the value to the server for processing.

HTML (Form Submission)

<form method="POST" action="/your-server-endpoint">
  <textarea class="editor h-48" rows="5" name="markdown"></textarea>
  <button type="submit">Submit</button>
</form>

you can retrieve the value from a traditional <textarea> in a form submission without any custom element. When the form is submitted, the content inside the <textarea> is automatically included as part of the form data, using the name attribute of the <textarea>.

Note: MarkdownEditor plugin initialization mandatory

const editor = new MarkdownEditor('.editor', {
  placeholder: 'Write your markdown...',
  toolbar: ['preview', 'bold', 'italic'],
});

Set Markdown Content to Editor

<textarea class="editor h-48" rows="5" name="markdown">
  Add your markdown content here
</textarea>

Advanced image upload

The image tool supports a fileInput configuration that allows:

• accept: Array of allowed image file types (e.g., 'webp', 'avif')
• uploadUrl: The endpoint where image files will be uploaded

After a successful upload, the server must return the image path, which will be automatically populated in the URL field

Usage example:

const options = {
  placeholder: 'Start writing...',
  toolbar: [
    'link', {
      image: {
        fileInput: {
          accept: ['webp', 'avif'], // restrict the image upload format
          uploadUrl: '/api/upload', // Your upload endpoint
        },
      }
    },
    'preview'
  ],
}
const editor = new MarkdownEditor(element, options);

Image Alt Text Validation (altInput)

You can configure whether the alt text input for images in the markdown editor is required

{
image: {
fileInput: {
accept: ['webp', 'avif'],
uploadUrl: '/api/upload' // Your upload endpoint
}
,
altInput: {
required: false // Optional: disables alt text validation (default is true)
}
}
}

• required: true: (default): Enforces alt text input for better SEO and accessibility
• required: false: Allows inserting images without alt text

This configuration helps developers control alt text validation for each markdown editor instance. For example, when using multiple editors in the same app, you can define different alt text rules per instance.

Without fileInput usage example:

If fileInput is not configured, the image modal will default to only showing the URL and alt text fields

const options = {
  placeholder: 'Start writing...',
  toolbar: [
    'link',
    'image',
    'preview'
  ],
}
const editor = new MarkdownEditor(element, options);

Configuration Options

Customize your Markdown editor by passing an options object during initialization. Below are some key configuration options:

Toolbar Customization

Customize the toolbar to match your needs by selecting which formatting options to include. The MarkdownEditor Plugin supports several tools, including:

• bold: Enables bold text formatting.
• italic: Enables italic text formatting.
• strikethrough: Allows text to be struck through.
• ol: (Ordered List): Converts text into a numbered list format.
• ul: (Unordered List): Converts text into a bullet point list.
• checklist: Adds checkboxes to your text, making it great for tasks, to-do lists, or tracking completion status.
• image: Allows you to insert images via markdown syntax.
• link: Lets you add hyperlinks to your text.
• undo (beta): To reverse the last changes
• redo (beta): To reapply the last undone changes
• preview: Toggles the real-time markdown preview.

Tip: You can reorder or remove any toolbar buttons by modifying the toolbar array during initialization.

const editor = new MarkdownEditor('.editor-container', {
  placeholder: 'Start writing...',
  toolbar: [
    'bold',
    'italic',
    'strikethrough',
    'ul',
    'ol',
    'checklist',
    'image',
    'link',
    'preview'
  ],
});

Markdown editor demo