Awesome Draft.js

Draft.js is a framework for building rich text editors in React.

Table of Contents

• Community
• Presentations
• Projects on Top of Draft.js
• Common Utilities
• Blog Posts & Articles
• Live Demos
• Usage in Production
• License

Community

• Slack channel

Presentations

• Rich Text Editing with React @ React.js Conf 2016 by Isaac Salier-Hellendag
• Rich text editing with Draft.js & DraftJS Plugins by Nik Graf
• React Ep. 37: Draftjs by What I Learned Today – Atomic Jolt
• 008 - Draft.js Plugins @ React30
• Draft.js at HubSpot by Ben Briggs
• Draft.js under the hood - React Melbourne meetup

Standalone Editors Built on Draft.js

• Draft WYSIWYG - WYSIWYG editor that with drag&drop, resizing & tooltips.
• Draft.js Editor - A Rich text editor inspired by Medium & Facebook Notes.
• React-RTE - A full-featured textarea replacement similar to CKEditor or TinyMCE.
• Facebook Notes Clone(ish) - Rich text editor similar to Facebook notes.
• Megadraft - A rich text editor with a nice default base of plugins and extensibility.
• Medium Draft - Medium-like rich text editor with a focus on keyboard shortcuts.
• React-Draft-Wyiswyg - A WYISWYG editor, with various text editing options and corresponding HTML generation.
• Dante 2 - Just another Medium clone built on top of DraftJs.
• Last Draft - A Draft editor built with Draft.js plugins.
• Z-Editor - Online Z-notations editor.
• Draftail - A configurable rich text editor based on Draft.js, built for Wagtail.
• Braft - Extensible Draft JS Editor

Plugins and Decorators Built for Draft.js

• Draft.js Plugins - A Plugin architecture on top of Draft.js
• Alignment
• Block Breakout - Break out of block types as you type.
• Buttons
• Color Picker
• Counter - Character, word & line counting.
• Divider
• Drag and Drop
• Embed
• Emoji - Slack-like emoji support
• EmojiPicker
• Focus
• GifPicker
• Hashtags - Twitter-like hashtag support
• Image
• Inline Toolbar
• Katex - Insert and render LaTeX using Katex.
• Link
• Linkify - Automatically turn links into anchor-tags.
• List - Automatic list creation, nested lists
• Markdown Shortcuts - Markdown syntax shortcuts.
• Mathjax - Edit math using (La)TeX rendered by Mathjax.
• Mention - Twitter-like mention support