Sharing is caring!

A Wysiwyg editor built using ReactJS and DraftJS libraries. Demo Page.

Build Status


    • Configurable toolbar with option to add/remove controls.
    • Option to change the order of the controls in the toolbar.
    • Option to add custom controls to the toolbar.
    • Option to change styles and icons in the toolbar.
    • Option to show toolbar only when editor is focused.
    • Support for inline styles: Bold, Italic, Underline, StrikeThrough, Code, Subscript, Superscript.
    • Support for block types: Paragraph, H1 – H6, Blockquote, Code.
    • Support for setting font-size and font-family.
    • Support for ordered / unordered lists and indenting.
    • Support for text-alignment.
    • Support for coloring text or background.
    • Support for adding / editing links
    • Choice of more than 150 emojis.
    • Support for mentions.
    • Support for hashtags.
  • Support for adding / uploading images.
  • Support for aligning images, setting height, width.
  • Support for Embedded links, flexibility to set height and width.
  • Option provided to remove added styling.
  • Option of undo and redo.
  • Configurable behavior for RTL and Spellcheck.
  • Support for placeholder.
  • Support for WAI-ARIA Support attributes
  • Using editor as controlled or un-controlled React component.
  • Support to convert Editor Content to HTML, JSON, Markdown.
  • Support to convert the HTML generated by the editor back to editor content.
  • Support for internationalization.


The package can be installed from npm react-draft-wysiwyg

Getting started

Editor can be used as simple React Component:

import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.