I Built a Zero-Dependency React Rich Text Editor — Here's How to Use It

Elango 13 — Wed, 01 Jul 2026 13:52:19 +0000

Build a Lightweight Rich Text Editor for React (Zero-Dependency Core)

Every React application eventually needs a rich text editor.

Whether you're building a blog platform, CMS, admin dashboard, knowledge base, or comment system, there comes a point where a simple <textarea> isn't enough—but a full document editor is overkill.

Popular libraries like Draft.js, Quill, Slate, and TipTap are excellent, but they often come with trade-offs:

📦 Larger bundle sizes
🔌 Multiple dependencies
⚙️ More setup than a simple content editor needs
🧩 Complex APIs for common use cases

I kept running into this problem, so I built react-lite-rich-text-editor—a lightweight React WYSIWYG editor powered by native browser APIs with a zero-dependency core.

🔗 Links

Live Demo: https://elangodev.com/npm
GitHub: https://github.com/Elango-P/rich-text-editor
npm: https://www.npmjs.com/package/react-lite-rich-text-editor

npm install react-lite-rich-text-editor

The Problem

Most React applications don't need a full document editor.

Instead, they need something that provides:

Rich text formatting
Headings
Lists
Tables
Image uploads
Video embeds
A clean UI
Easy integration

Without requiring hundreds of kilobytes of dependencies.

The goal was simple:

One install. Minimal configuration. Production-ready features.

What I Built

react-lite-rich-text-editor is an open-source React rich text editor featuring:

✅ Zero-dependency core (native Browser APIs)

✅ Rich formatting

Bold
Italic
Underline
Text colors
Background colors
Alignment

✅ Headings & Quotes

Paragraph
H1
H2
H3
Blockquote

✅ Lists

Bullet
Numbered

✅ Markdown shortcuts

#
##
###
>
-
*
1.

Simply type the shortcut and press Space.

Tables

Supports:

Insert table
Add/Delete rows
Add/Delete columns
Merge cells

Perfect for documentation and structured content.

Image Upload & Resize

Supports custom upload handlers.

Images can be resized interactively using drag handles directly inside the editor.

Video Embeds

Embed videos from platforms like:

YouTube
Vimeo
Dailymotion
Other supported providers

Word & Character Count

Real-time footer metrics include:

Word count
Character count

Useful for blog editors and CMS systems.

Keyboard Shortcuts

Shortcut	Action
Ctrl/Cmd + B	Bold
Ctrl/Cmd + I	Italic
Ctrl/Cmd + U	Underline
Enter	New paragraph/List item
Escape	Close image preview

Installation

npm install react-lite-rich-text-editor

Supports React 16+.

Basic Usage

import React, { useState } from "react";
import { RichTextEditor } from "react-lite-rich-text-editor";

function App() {
  const [content, setContent] = useState("");

  return (
    <RichTextEditor
      label="Biography"
      value={content}
      onChange={setContent}
      placeholder="Tell us your story..."
    />
  );
}

export default App;

That's it.

No providers.

No wrappers.

No complex configuration.

onChange returns an HTML string that you can save directly to your database or send to your API.

Markdown Shortcuts

Type one of these at the beginning of a line and press Space.

Shortcut	Result
`#`	Heading 1
`##`	Heading 2
`###`	Heading 3
`>`	Blockquote
`-` or `*`	Bullet List
`1.`	Numbered List

Example:

## My Title

Press Space

↓

Automatically becomes an H2.

Image Upload

Provide your own upload function.

<RichTextEditor
  value={content}
  onChange={setContent}
  onImageUpload={async (file) => {
    const formData = new FormData();

    formData.append("file", file);

    const response = await fetch("/api/upload", {
      method: "POST",
      body: formData,
    });

    const { url } = await response.json();

    return url;
  }}
/>

Once uploaded, images can be resized directly inside the editor.

Read-Only Mode

Perfect for previews or displaying saved content.

<RichTextEditor
  value={savedContent}
  editable={false}
  showBorder={false}
/>

Props

Prop	Type	Default	Description
label	string	""	Editor label
value	string	""	HTML content
onChange	function	—	Content change callback
placeholder	string	"Type here..."	Placeholder text
editable	boolean	true	Read-only mode
disabled	boolean	false	Disable editor
showBorder	boolean	true	Show border/shadow
minHeight	string	number	"150px"
maxHeight	string	number	"500px"
onImageUpload	function	—	Custom upload handler

When Should You Use It?

This editor is a great fit for:

✅ Blog editors
✅ CMS systems
✅ Admin dashboards
✅ Documentation tools
✅ Internal company tools
✅ Comment systems
✅ Knowledge bases
✅ Note-taking applications

When You Should Consider Another Editor

You may prefer a different solution if your project requires:

Google Docs–style real-time collaboration
Notion-style block editing
Extensive plugin ecosystems
Advanced document workflows

Try It Yourself

🌐 Live Demo

https://elangodev.com/npm

📦 npm

https://www.npmjs.com/package/react-lite-rich-text-editor

💻 GitHub

https://github.com/Elango-P/rich-text-editor

Install:

npm install react-lite-rich-text-editor

Conclusion

I didn't build this to replace every rich text editor.

The goal was to create a practical default for most React applications:

Lightweight
Easy to integrate
Zero-dependency core
Production-ready
Feature-rich without unnecessary complexity

If you're looking for a simple yet capable React editor, I'd love for you to try it.

Feedback, issues, and contributions are always welcome!

Happy coding! 🚀

DEV Community: Elango 13