MandooEditor

A modern WYSIWYG editor for React & Next.js

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

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

Output Format

Editor Height

400px

Toolbar — Row 1

Bold

Italic

Strikethrough

Lists (UL / OL)

Blockquote

Horizontal Rule

Alignment

Link & Unlink

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