Summary:In frontend development, we frequently need good WYSIWYG editors to take advanced inputs from the user. This post is the collection of best WYSIWYG editor components for React JS. Some of them also support markdown syntax.
React JS is the fastest-growing frontend framework but it is still relatively new as compared to Vanilla JS. The reason why I compared them is that there are plenty of WYSIWYG editors for Vanilla JS.
But because of React JS advanced internal mechanism, it is never recommended to use Vanilla JS scripts on top of that. The primary reason is that it makes the DOM unpredictable.
This is the main reason why I researched too much on finding the best WYSIWYG editor for React JS.
This is a curated list of best WYSIWYG editor components and libraries for React JS. Some of them also support Markdown syntax.
Best WYSIWYG Editors for React JS
It is based on Prosemirror and outputs plain markdown which you can further convert to HTML using other tools.
The editor is very minimal and simple to use, plugged with advanced features.
Here is the list of features in Rich Markdown Editor for React JS.
- Markdown support
- Smart toolbars on the left side and top of selected text
- Clean and minimal design
- Paste rich contents
- Advanced table editing
- Custom embeds
- Image uploader
- Todo List
- Custom info, warning and tip notices
This editor is best suited for simple writing purposes.
This is not actually an editor but a framework to build WYSIWYG editors in React JS. It was worth adding in the list because of the features it provides.
If you want to invest some time this can be a custom solution suited for your own specific needs.
Before moving to the current solution I was developing a custom Draft JS editor for HolyCoders. Frustrated from the bugs, inactive plugins community and the amount of time it took in development it was good to hold the project.
It does not have Markdown support but allows basic formatting through toolbars.
Here is the list of features which Alloy editor provides.
- Smart toolbars on the left and top of selected text
- Paste images and Drag and Drop support
- Insert images from device camera
- Paste rich-text
- Modern UI
- Plugin Architecture
If you want an advanced WYSIWYG text editor in React JS then this may be a good option. It is packed with almost all formatting features.
Here are some of the features of React Draft WYSIWYG editor.
- Add/Remove controls or custom controls in the toolbar
- Customize the toolbar
- Emoji Support
- Mentions and hashtag support
- Image upload and alignment
- RTL Support
- Internationalization support
The documentation says it is written in pure Typescript without any extra libraries.
The editor has plenty of options in the toolbar. The plugin support enables you to extend its functionality according to your own needs.
The UI looks pretty modern which is customizable.
React Froala WYSIWYG Editor is published under MIT license but you need to purchase a separate license if you want to use some specific plugins.
Here are some features of React Froala WYSIWYG editor.
- Plugins Support (Some plugins are paid)
- Highly Customizable
- Lots of formatting options
- Clean and Modern design
It has also traditional WYSIWYG UI design with the toolbar on the top. The editor has many formatting options which makes it quite useful.
The most interesting feature is that it is lightweight and its support for older browsers.
You can see the demo here. After selecting the test you will see the toolbar which contains some most useful options.
The editor is not yet stable. It has some markdown support but that too is buggy. The worst part is the license, you need to purchase a license if your applications source code is not public.
You can view the demo here.
I have found this editor a bit heavy compared to others. The features that it provides comes at a cost of performance.
It is not the fastest one but definitely one of the most advanced React JS WYSIWYG editors.
It is much more focused on an enterprise solution. You will need to purchase a license for some plugins and advanced customizations.
The editor is open source and if you don’t need to use their premium plugins then you can use it for free.
These were some of the best React JS WYSIWYG editors which I found during my research for HolyCoders.
If you know any other good React JS editors feel free to share them in comments.
You can choose the best whichever suits your need.
If you are building a blog or simple text editing with markdown support I will recommend Rich markdown editor for React JS. It is the same editor that we use at HolyCoders.
For e-commerce and advanced applications, Froala editor will work great if you want to spend some money. The other option will be to develop a custom editor on top of Draft JS but as I have mentioned it will take a lot of time and energy.