@abnahid/ab-markdown-editor

✨ A modern, lightweight Markdown editor for React 19 and Next.js 15. Built with performance and extensibility in mind, maintained by Ab Nahid Agency.

🚀 Table of Contents

• Features
• Live Demo
• Installation
• Basic Usage
• Next.js / SSR Usage
• Documentation
• Author & Maintainer
• License

✨ Features

• 🚀 Ultra-lightweight (~20KB gzipped)
• ⚛️ 100% compatible with React 19 and Next.js 15
• 📝 Full Markdown support powered by markdown-it
• 🔌 Extensible toolbar & plugin architecture
• 🎨 Multiple UI modes (editor only, preview only, split view)
• 📸 Image upload + drag-and-drop support
• 🔄 Synced scrolling between editor & preview
• 📦 Written in TypeScript

Perfect choice if you need a React Markdown editor that’s lightweight, extensible, and SSR-friendly.

🌐 Live Demo

• Hosted Demo – Coming Soon
• Or run locally:

git clone https://github.com/abnahid/ab-markdown-editor.git
cd ab-markdown-editor
npm install
npm run dev

📦 Installation

Install via npm:

npm install @abnahid/ab-markdown-editor --save

⚡ Basic Usage (React 19)

import React from 'react';
import MarkdownIt from 'markdown-it';
import MdEditor from '@abnahid/ab-markdown-editor';

// Import CSS
import '@abnahid/ab-markdown-editor/lib/index.css';

const mdParser = new MarkdownIt();

export default function Example() {
  return <MdEditor style={{ height: '500px' }} renderHTML={(text) => mdParser.render(text)} onChange={({ text }) => console.log(text)} />;
}

⚛️ Next.js / SSR Usage

Since this package is client-side only, use dynamic import in Next.js 15:

import dynamic from 'next/dynamic';
import '@abnahid/ab-markdown-editor/dist/index.css';

const MdEditor = dynamic(() => import('@abnahid/ab-markdown-editor'), {
  ssr: false,
});

export default function Page() {
  return <MdEditor style={{ height: '500px' }} renderHTML={(text) => text} />;
}

📚 Documentation

• Configuration Guide
• API Reference
• Plugin Development Guide

👨‍💻 Author & Maintainer

• Ab Nahid – Founder & CEO, Ab Nahid Agency

📄 License

MIT © Ab Nahid Agency