MandooEditor

A modern WYSIWYG editor for React & Next.js

Feature-flagged · Fully typed · Zero dependencies · <400KB

npm install mandoo-editor

yarn add mandoo-editor

GitHub markrahimi.com LinkedIn Instagram

Finding a proper rich text editor for React has been one of my biggest recurring challenges — too many dependencies, poor TypeScript support, or simply not flexible enough for real-world projects.

I believe this is a shared pain point for many developers. MandooEditor is currently built for Next.js and I'm actively expanding it to more frameworks. If this project helped you, consider supporting it — your contribution keeps me motivated. 🙏

Star on GitHub

Live Configurator

Toggle features and watch the editor adapt. Code regenerates below.

Tabs

Theme

Color Scheme

Default Direction

Sets the default text direction for the editor. Use RTL for Persian, Arabic, or Hebrew content.

Output Format

Editor Height

400px

Toolbar — Row 1

Bold

Italic

Strikethrough

Lists (UL / OL)

Blockquote

Horizontal Rule

Alignment

Link & Unlink

Code

RTL / LTR

Fullscreen

Kitchen Sink toggle

Toolbar — Row 2

Media Upload

Wire S3, MinIO, or your own API

Enable to configure file upload for the editor

Free Plugins

Link Checker

Validates URL format & reachability inside link modal

Spell Checker

Browser-native spellcheck with language selector

Enhanced Tables

Insert tables + add / remove rows & columns

Image Editor

Crop, resize, and zoom images before inserting

Edit History

Auto-saves snapshots — restore any previous version

YouTube Embed

Embed YouTube videos by pasting a URL

Pro FeaturesComing Soon

Export to PDF

One-click export via Mandoo cloud API — requires apiToken

Word Import / Export

Read and write .docx files — requires apiToken

AI Assistant

Chat with AI to rewrite, summarise, or extend your text — requires apiToken

Pass apiToken="mk_live_..." to enable pro plugins once your API is ready.

Preview: visual text block html

Path:

Word count: 0

MandooEditorAdvanced Rich Text Editor

Live Output — what onChange receives

outputFormat: "html"

Start typing above to see the HTML output here…

→ Pass to state: onChange={(v) => setState(v)}→ Native form: name="content"

Component Default config

MyEditor.tsx

1import 'mandoo-editor/styles';

2import MandooEditor from 'mandoo-editor';

3

4export default function MyEditor() {

5  return (

6    <MandooEditor

7      defaultValue="<p>Start writing...</p>"

8      onChange={(value) => console.log(value)}

9    />

10  );

11}

If this helped you:Star on GitHub