Categories: CSSScriptWeb Design

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.

rssfeeds-admin

Share
Published by
rssfeeds-admin

Recent Posts

Witch Hat Atelier Volume 1 Drops to 99 Cents at the Kindle Store

Witch Hat Atelier is a great manga for newcomers to the medium, and the price…

18 minutes ago

Severe storms possible across Big Country Tuesday night

BIG COUNTRY, Texas (KTAB/KRBC) – The Storm Prediction Center has placed nearly the entire Big…

43 minutes ago

Flip into the future: McMurry announces gymnastics program

ABILENE, Texas (KTAB/KRBC) - McMurry University has launched Abilene’s only collegiate gymnastics program. The program…

43 minutes ago

Coleman’s 150th celebration to feature Lady A, Aaron Watson, William Beckmann

COLEMAN, Texas (KTAB/KRBC) - As the City of Coleman gets ready to celebrate its 150th…

43 minutes ago

Abilene Pickleball complex gets official approval

ABILENE, Texas (KTAB/KRBC) - A new pickleball complex proposed in north Abilene has been given…

43 minutes ago

Crime Reports: Abilene teen says she was robbed at gunpoint by suspects buying item

Editor’s Note: The Abilene Police Department supplied the following arrest and incident reports. All information…

43 minutes ago

This website uses cookies.