Draft.js

Awesome Draft.js ¶

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

Community¶

Slack channel

Presentations¶

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¶

Redraft - Renders the result of Draft.js convertToRaw using provided callbacks, works well with React
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.
React Native Draft.js Render - A React Native render for Draft.js model.
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)¶

Usage in Production¶

License¶

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