Top 5 WYSIWYG Editors to Supercharge Your React Projects
Written on 2023-04-03 by Adam Drake - 5 min read
As a web developer, you're no doubt aware of rich text editors (WYSIWYG Editors - What you see is what you get!) that cater to content creators with limited coding skills. They are built to deliver a user-friendly experience similar to Word processors and they make it easier for users to enter and format text for websites. In this blog post, we'll dive into 5 options that are available for free in the wonderful world of rich text editors. We will explore their features along with their limitations. This will hopefully help you decide which WYSIWYG editor you can use in your next project.
These WYSIWYG editors are not presented in any particular order and they should be chosen based on specific project requirements.
1. Editor.js
Editor.js is a block-style editor for rich media stories. It outputs clean data in JSON instead of heavy HTML markup. And more important thing is that Editor.js is designed to be API extendable and pluggable. Unlike many WYSIWYG editors, Editor.js does not have a command palette at the top of the editor. It instead relies on the user creating different 'blocks' of formatted text. This is then given as a JSON object at the end which can be saved on your backend.
The library is actively maintained and has a good contributor base. The documentation is clean and explains very well the main concepts and how to extend the main functionality. There is also a react library available which acts as a wrapper around the main library making it easy to incorporate into an existing React project.
Limitation
Whilst this library has many advantages the whole concept of 'blocks' is different enough to standard WYSIWYG controls that it can throw users a bit when first using it. Not a show stopper but something to bear in mind.
2. react-draft-wysiwyg:
The react-draft-wysiwyg library, built with React and Draft.js libraries, serves as a WYSIWYG editor boasting numerous built-in customisable features. This rich text editor component provides all standard WYSIWYG features as well as advanced options like mentions and hashtag support. The API is pretty straightforward and there is also a well-documented library which enables users to easily integrate the pre-built editor into their app, ensuring all necessary features are available. The toolbar can also be customised.
Limitation
Requires a parser to convert EditorState to HTML or any other markup. Also it seems Draft.js and this library are not really maintained too much which last commits on the github repos occurring in 2022. This can always change but something to bear in mind if going with this choice.
3. React Quill
Quill.js is a fast and lightweight rich text editor built with focusing on cross-platform and cross-browser support. Quill was designed for editing and characters in mind, and built its APIs on top of these natural text centric units. All of its core API calls allow arbitrary indexes and lengths for access or modification. It's event API also reports changes in an intuitive JSON format. No need to parse HTML or diff DOM trees.
There is a react-quill library (ReactQuill v2) which is a Quill component for React.
Limitation
Limited customisation of content blocks and security vulnerabilities of primarily rendering HTML. The latest release on Github was from 2017 but commits go up to Aug 2022.
4. Jodit-React:
Jodit is an excellent WYSIWYG editor written in pure TypeScript without the use of additional libraries. Jodit-React acts as a React Wrapper around the Jodit library.
Limitation
From my investigations Jodit seems like a good option. It does come with a 'Pro' version though which is paid (one time payment) so if you choose to go with the free option you will be limited with the options you get to start with. However, there is the option to add plugins so it seems customising the editor is possible.
5. TinyMCE-react:
The TinyMCE editor is a feature-rich, commercial library offering a myriad of advanced functionalities. For those willing to invest in a highly capable and effortlessly efficient text editor, it serves as an excellent option. Utilizing an HTML string to embody the formatted text within the editor, it presents a versatile and sophisticated data structure for content management.
TinyMCE-React acts as a thin wrapper around TinyMCE to make it easier to use in a React application.
Limitation
Need to purchase a subscription to use premium features.
Conclusion
In conclusion, finding the best WYSIWYG rich text editor for your React web application is difficult but crucial for enhancing your user's experience and streamlining their content creation. Each editor above comes with its pros and cons. Ultimately, investing time and research in choosing the right editor will not only enrich your web application but also empower content creators, leading to a successful and engaging platform for your users.
Loading...
Written by Adam Drake
Adam Drake is a Frontend React Developer who is very passionate about the quality of the web. He lives with his wife and three children in Prague in the Czech Republic.
Adam Drakes Site © 2025