Simple Markdown Editor with Real-Time Preview and Customizable Toolbar

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. Get the Markdown output like this:

const output = document.querySelector(".editor").value;

Changelog:

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!

The post Simple Markdown Editor with Real-Time Preview and Customizable Toolbar appeared first on CSS Script.