DEV Community

Cover image for I Built a Zero-Dependency React Rich Text Editor — Here's How to Use It
Elango 13
Elango 13

Posted on

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

#react #javascript #opensource #webdev

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 

npm install react-lite-rich-text-editor
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
  }}
/>
Enter fullscreen mode Exit fullscreen mode

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}
/>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Top comments (1)