Simple Markdown Editor with Real-Time Preview and Customizable Toolbar

Preview:

Description:

MarkdownEditor is a lightweight JavaScript library that transforms standard textareas into full-featured Markdown editors.

It is ideal for content management systems, blogs, and documentation platforms where users need to write or edit markdown syntax.

Features:

• Real-time preview rendering of Markdown content
• Configurable toolbar with text formatting options
• Tailwind CSS integration for modern styling
• Lightweight implementation for optimal performance

How to use it:

1. Install and import the MarkdownEditor via NPM.

# NPM
$ npm install markdown-text-editor

import MarkdownEditor from "markdown-text-editor";

2. If you’re using TailwindCSS in your project, add the following configuration to your tailwind.config.js file:

module.exports = {
  content: [
    'node_modules/markdown-text-editor/**/*.js',
    // ...
  ],
};

For non-Tailwind projects, import the stylesheet directly:

import 'markdown-text-editor/dist/markdown-text-editor.css';

3. You can also download the package and then include these files in your document:

<link rel=”stylesheet” href=”/dist/markdown-text-editor.min.css”>
<script src=”/dist/markdown-text-editor.min.js”></script>

4. Create a textarea element for the markdown editor.

<textarea class="editor">
...
</textarea>

<!-- Include the textarea in a form for server-side processing: -->
<form method="POST" action="/submit">
  <textarea class="editor" name="content"></textarea>
  <button type="submit">Save</button>
</form>

5. Initialize the editor with the following options:

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

6. Config the image upload modal.

const myEditor = new MarkdownEditor(document.querySelectorAll(".editor"), {
  placeholder: 'Write your markdown...',
  toolbar: ['heading', 'link', {
    image: {
      fileInput: {
        accept: ['webp', 'avif'],
        uploadUrl: '/api/upload',
      },
      altInput: {
        required: false
      }
    }
  }, 'preview'],
});

7. Get the Markdown output like this:

const markdownValue = document.querySelector('.editor').value;
console.log(markdownValue);
document.querySelector('.output').innerHTML = `<pre>${markdownValue}</pre>`

Changelog:

v0.4.0 (08/06/2025)

• Introduced beta support for undo/redo functionality using a granular diff-based system.
• Prefixed all Tailwind CSS and Frutjam classes by utilizing Frutjam’s new component prefixing support (e.g., for components like .modal), to avoid design conflicts with other frameworks such as Bootstrap.
• Refactored folder hierarchy: reorganized the folder structure to separate files based on functionality.
• Replaced fixed Tailwind background and text color classes with frutjam surface component to ensure theme consistency across all Frutjam themes.

v0.3.0 (05/12/2025)

• Added more options
• Image Modal: Fixed issue where the selectedText is not defined error was triggered when applying changes without selecting text.

v0.2.0 (05/11/2025)

• Integrated the Fruitjam UI library for a cleaner, more modern, and intuitive user interface.
• Implemented the Fruitjam UI modal in the link tool to provide a more intuitive and visually consistent user experience.
• Introduced a fully configurable image upload feature.
• Fixed a critical error where removing the preview option from the toolbar would crash the editor.

v0.1.5 (03/19/2025)

• Integrating Fruitjam UI library for a more modern and user-friendly design

v0.1.4 (02/24/2025)

• Resolved UI glitch for a smoother user experience.

02/18/2025

• Fixed demo. Thanks to Zeeshan.

v0.1.3 (02/18/2025)

• Production-ready minified CSS and bug fixes

v0.1.2 (02/17/2025)

• New Tools Added: You can now easily add Headings, Links, and Blockquotes to your content!
• Sleek New UI: Enjoy a fresh, improved design that makes your experience smoother and more intuitive than ever!