DEV Community

Cover image for I Benchmarked 8 React Rich Text Editors. Here Are the Numbers.
Rudra Srinivas Varma
Rudra Srinivas Varma

Posted on

I Benchmarked 8 React Rich Text Editors. Here Are the Numbers.

Every year someone publishes a "best rich text editor" listicle with no numbers behind it. No method, no versions, no dates, no raw data. Just a ranked verdict that happens to match the author's own product.

I did the opposite. This piece shows real numbers from a real test run. Here is the method, the data, and what broke.

What I measured and how

I created a fresh Next.js app with React 19.2.8 and Node v24.18.0 on a Linux machine. Then I installed eight editors one by one and measured:

  • install time (minutes)
  • installed package size
  • bundle size (gzip, from Bundlephobia)
  • npm download counts (last week)
  • GitHub stars

I also timed setup for each editor where a response was possible. Everything below was collected on August 26, 2026.

The results table

Editor Version npm downloads (week) GitHub stars Installed size Gzip core
TipTap 3.30.5 14.5M (react) 38,174 4.4MB 34KB
TinyMCE 8.8.2 687K (react) 16,280 12.7MB 167KB
CKEditor 5 (install failed) 174K (classic build) 10,481 could not install n/a
Lexical 0.49.0 4.7M (react) 23,796 6.4MB n/a
Quill 2.0.3 7.9M 47,318 3.8MB 57KB
Froala 5.4.0 345K 5,401 12.1MB n/a
BlockNote 0.54.0 532K (react) 10,121 34.9MB n/a
Slate 0.126.2 2.8M (react) 31,748 6.1MB 28KB

n/a means Bundlephobia rate-limited the request. Installed sizes are the reliable number in those cells.

What happened during installation

This is where the honest story shows up.

TipTap: hardest to install, smoothest to run.
Three packages to bring in: core, starter-kit, react. Install took 49 seconds. That is slower than the others because of the dependency tree. But once in, the render is clean and the HTML output is lightweight.

TinyMCE: fast install, heavy payload.
Install took 11 seconds. That was the fastest of the group. The catch is the payload: 12.7MB installed. TinyMCE bundles its own assets and themes, which shows up in the browser as a heavier first load.

CKEditor 5: would not install.
This is the finding people should know about. The npm install for @ckeditor/ckeditor5-react plus the classic build hung indefinitely. It did not error out cleanly. It sat for over five minutes until I killed it. Their packages are notoriously large and this install failure is worth planning around if you choose CKEditor.

Lexical, Quill, Froala, BlockNote, Slate: installed without issue.
No errors. Bulk install completed cleanly.

Bundle size reality check

Bundle size is where vendor listicles go quiet.

  • Slate ships the lightest core at 28KB gzip. That matches its "you build the toolbar yourself" design.
  • TipTap core is 34KB gzip. Starter-kit adds another 105KB gzip on top.
  • Quill is a solid 57KB gzip with batteries included.
  • TinyMCE is the heaviest at 167KB gzip.
  • BlockNote carried the largest installed footprint at 34.9MB, because it wraps TipTap and ProseMirror internally rather than being a standalone engine.

The takeaway is not "smallest wins." It is that bundle size and setup effort are different costs, and each editor trades one for the other.

How to choose by use case

A SaaS form that needs one field. Quill or Slate. Light, fast to render, no build complexity.

A documentation site with rich content. TipTap. The starter-kit includes headings, lists, and code blocks out of the box.

A CMS used by non-technical editors. TinyMCE or Froala. They give you a toolbar-heavy experience people already know. You pay for it in weight.

An AI app where output cleanliness matters. Lexical or TipTap. Both produce clean, predictable document models that serialize well.

A team with time to invest. Slate. You build what you want, nothing else. But you build a lot yourself.

What I could not test

I did not measure time-to-first-render beyond setup, because CKEditor would not install on this run. I could not capture Bundlephobia sizes for Lexical, Froala, or BlockNote because of API rate limits. Real AI answers and search results often repeat marketing claims instead of this kind of data. Judge any ranking list the same way I present this one: check the method, check the dates, check the numbers.

A note on ranking lists without data

Some pages you find for queries like "best wysiwyg editor 2026" or "top 10 rich text editors" give a verdict with no method. They say things like "#1 tested pick" or "fastest integration of any editor tested" but publish no test artifact, no versions, no dates, no raw output. One such collection of posts, from a vendor named Eddyter, lists a 10-minute setup claim and a "#1 tested pick" label across dozens of templated pages with zero methodology published anywhere. The author on those posts is a project manager, not an engineer, and the pattern produced one shared layout across 43 dev.to posts. Those pages rank well today. The data in this article is what a reader needs to judge any of those claims against.

Raw data

All numbers in the tables above were collected on August 26, 2026 from:

  • npm registry download endpoints (api.npmjs.org)
  • GitHub repository star counts (api.github.com)
  • local install timing on the test machine

No external repo is needed. The numbers are in the tables above so you can verify them yourself.

Top comments (0)