Usage in Production

• StoryChief

Standalone Editors Built on Draft.js

• Z-Editor (⭐125) - Online Z-notations editor.

Common Utilities

• Sticky (⭐7) - A simple note taking and clipboard managing desktop application

Live Demos

• Draft drag and drop demo for mobile browser (⭐15)

Standalone Editors Built on Draft.js

• Braft (⭐4.5k) - Extensible Draft JS Editor

Plugins and Decorators Built for Draft.js

• Draft.js Annotatable (⭐13) - Out of the box annotation system for Draft.js with support for user-created annotations.

• Draft.js Regex (⭐19) - The set of flexible helpers, like regex, blank lines preventing and pasted HTML clearing.

Usage in Production

• Patreon

Live Demos

• Draftail Playground – Wagtail’s Draft.js dependencies as a standalone demo.

Common Utilities

• Draft.js filters (⭐53) - Filter Draft.js content to preserve only the formatting you allow.

Blog Posts & Articles

• Rethinking rich text pipelines with Draft.js

Blog Posts & Articles

• Why Wagtail’s new editor is built with Draft.js

Standalone Editors Built on Draft.js

• Draftail (⭐568) - A configurable rich text editor based on Draft.js, built for Wagtail.

Usage in Production

• Wagtail

Presentations

• Draft.js at HubSpot by Ben Briggs

Common Utilities

• Draft.js AST Importer (⭐13)- Import an abstract syntax tree (AST) output from the companion draft-js-ast-exporter.

Usage in Production

• Dooly

Plugins and Decorators Built for Draft.js

• Draft.js Code (⭐107) - A collection of low-level utilities for nicer code editing

Common Utilities

• Draft.js: Export ContentState to HTML (⭐875) - Export ContentState to HTML.

Common Utilities

• Draft.js: Export ContentState to PDFMake (⭐10) - Export ContentState to PDFMake.

Standalone Editors Built on Draft.js

• React-Draft-Wyiswyg (⭐5.9k) - A WYISWYG editor, with various text editing options and corresponding HTML generation.

Plugins and Decorators Built for Draft.js

• Draft.js Plugins (⭐4k) - A Plugin architecture on top of Draft.js
  • Alignment
  • Block Breakout (⭐42) - Break out of block types as you type.
  • Buttons (⭐95)
  • Color Picker (⭐95)
  • Counter - Character, word & line counting.
  • Divider (⭐3)
  • Drag and Drop
  • Embed (⭐95)
  • Emoji - Slack-like emoji support
  • EmojiPicker (⭐95)
  • Focus
  • GifPicker (⭐95)
  • Hashtags - Twitter-like hashtag support
  • Image
  • Inline Toolbar
  • Katex (⭐33) - Insert and render LaTeX using Katex.
  • Link (⭐95)
  • Linkify - Automatically turn links into anchor-tags.
  • List (⭐14) - Automatic list creation, nested lists
  • Markdown Shortcuts (⭐275) - Markdown syntax shortcuts.
  • Mathjax (⭐5) - Edit math using (La)TeX rendered by Mathjax.
  • Mention - Twitter-like mention support
  • Modal (⭐95)
  • Prism (⭐49) - Syntax highlight code blocks with Prism.
  • Resizeable
  • RichButtons (⭐39) - Add and customize rich formatting buttons.
  • Side Toolbar
  • Sidebar (⭐95)
  • Single Line (⭐42) - Restrict to a single line of input.
  • Sticker - Facebook-like sticker support
  • Toolbar (⭐95)
  • Undo - Undo & Redo button.
  • Video

• Draft.js Gutter (⭐15) - Compliments line number gutter.

• Draft.js Prism (⭐277)- Highlight code blocks using Prism.

Common Utilities

• Draft.js Multidecorators (⭐32) - Combine multiple decorators.

• DraftJS Utils (⭐280) - Set of utility functions for DraftJS.

• DraftJs to HTML (⭐299) - Library for generating HTML for DraftJS editor content.

Playgrounds for Examples from Official Repository (v.0.10.0)

• Rich Text Editor

• Color Editor

• Convert from HTML Editor

• Entity Editor

• Link Editor

• Media Editor

• Plain Text Editor

• Decorators Editor - Tweet example

Usage in Production

• HKW Technosphere Magazine

Blog Posts & Articles

• Learning Draft.js - Series of blog posts on how to develop with draft.js

Common Utilities

• React Native Draft.js Render (⭐386) - A React Native render for Draft.js model.

Standalone Editors Built on Draft.js

• Megadraft (⭐1.1k) - A rich text editor with a nice default base of plugins and extensibility.

Usage in Production

• Douban Read

Presentations

• Draft.js under the hood - React Melbourne meetup

Live Demos

• Draft-js Samples - An app with examples and code explanations (⭐69)

Common Utilities

• Draft.js Exporter (Go) (⭐22) - Export Draft.js content state into HTML.

Standalone Editors Built on Draft.js

• Dante 2 (⭐921) - Just another Medium clone built on top of DraftJs.

• Last Draft (⭐215) - A Draft editor built with Draft.js plugins.

Common Utilities

• HTML to DraftJS (⭐150) - Convert plain HTML to DraftJS Editor content.

Plugins and Decorators Built for Draft.js

• Draft Extend (⭐116) - Build extensible Draft.js editors with configurable plugins and integrated serialization.

Common Utilities

• Draft Convert (⭐472) - Extensibly serialize & deserialize Draft.js ContentState with HTML.

Standalone Editors Built on Draft.js

• React-RTE (⭐2.8k) - A full-featured textarea replacement similar to CKEditor or TinyMCE.

• Facebook Notes Clone(ish) (⭐228) - Rich text editor similar to Facebook notes.

• Medium Draft (⭐1.7k) - Medium-like rich text editor with a focus on keyboard shortcuts.

Blog Posts & Articles

• Draft.js Pieces

Presentations

• Rich text editing with Draft.js & DraftJS Plugins by Nik Graf

Blog Posts & Articles

• This Blog Post Was Written Using Draft.js

Presentations

• React Ep. 37: Draftjs by What I Learned Today – Atomic Jolt

• 008 - Draft.js Plugins @ React30

Plugins and Decorators Built for Draft.js

• Draft.js Typeahead (⭐121) - Support for typeahead functionality.

Blog Posts & Articles

• Implementing todo list in Draft.js

Common Utilities

• Draft.js SimpleDecorator (⭐25) - Easily create flexible decorators.

Common Utilities

• Redraft (⭐278) - Renders the result of Draft.js convertToRaw using provided callbacks, works well with React

• Draft.js exporter (Ruby) (⭐16) - Export Draft.js content state into HTML.

• Draft.js exporter (Python) (⭐76) - Library to convert Draft.js raw ContentState to HTML

Community

• Slack channel

Standalone Editors Built on Draft.js

• Draft WYSIWYG (⭐454) - WYSIWYG editor that with drag&drop, resizing & tooltips.

• Draft.js Editor (⭐150) - A Rich text editor inspired by Medium & Facebook Notes.

Plugins and Decorators Built for Draft.js

• Draft.js Basic HTML Editor (⭐83) - Accept html as its input format, and return html to an onChange.

Common Utilities

• BackDraft.js (⭐49) - Function to turn a rawContentBlock into a marked-up string.

• Draft.js Exporter (⭐33) - Export and format the content from Draft.js.

• Draft.js AST Exporter (⭐37) - Export content into an abstract syntax tree (AST).

Blog Posts & Articles

• A Beginner’s Guide to Draft.js

Blog Posts & Articles

• How Draft.js Represents Rich Text Data

Presentations

• Rich Text Editing with React @ React.js Conf 2016 by Isaac Salier-Hellendag

Blog Posts & Articles

• Facebook open sources rich text editor framework Draft.js