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

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

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.

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

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! 🚀