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


• Modal


• Prism - Syntax highlight code blocks with Prism.


• Resizeable


• RichButtons - Add and customize rich formatting buttons.


• Side Toolbar


• Sidebar


• Single Line - Restrict to a single line of input.


• Sticker - Facebook-like sticker support


• Toolbar


• Undo - Undo & Redo button.


• Video


• Draft.js Gutter - Compliments line number gutter.


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


• Draft.js Prism- Highlight code blocks using Prism.


• Draft.js Typeahead - Support for typeahead functionality.


• Draft Extend - Build extensible Draft.js editors with configurable plugins and integrated serialization.


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


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


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

Common Utilities

• BackDraft.js - Function to turn a rawContentBlock into a marked-up string.


• Draft.js Exporter - Export and format the content from Draft.js.


• Draft.js: Export ContentState to HTML - Export ContentState to HTML.


• Draft.js: Export ContentState to PDFMake - Export ContentState to PDFMake.


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


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


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


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


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


• Draft.js Multidecorators - Combine multiple decorators.


• Draft.js SimpleDecorator - Easily create flexible decorators.


• DraftJS Utils - Set of utility functions for DraftJS.


• DraftJs to HTML - Library for generating HTML for DraftJS editor content.


• Draft Convert - Extensibly serialize & deserialize Draft.js ContentState with HTML.


• HTML to DraftJS - Convert plain HTML to DraftJS Editor content.


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


• React Native Draft.js Render - A React Native render for Draft.js model.


• Draft.js filters - Filter Draft.js content to preserve only the formatting you allow.


• Sticky - A simple note taking and clipboard managing desktop application

Blog Posts & Articles

• Facebook open sources rich text editor framework Draft.js


• This Blog Post Was Written Using Draft.js


• How Draft.js Represents Rich Text Data


• A Beginner’s Guide to Draft.js


• Implementing todo list in Draft.js


• Draft.js Pieces


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


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


• Rethinking rich text pipelines with Draft.js

Live Demos

• Draft-js Samples - An app with examples and code explanations


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


• Draft drag and drop demo for mobile browser

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

• StoryChief


• HKW Technosphere Magazine


• Douban Read


• Dooly


• Wagtail


• Patreon

License

To the extent possible under law, Nikolaus Graf has waived all copyright and related or neighboring rights to this work.