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