Awesome Draft Js Overview

Awesome list of Draft.js resources

🏠 Home · 🔥 Feed · 📮 Subscribe · ❤️ Sponsor · 😺 nikgraf/awesome-draft-js · ⭐ 2.5K · 🏷️ Front-End Development

[ Daily / Weekly / Overview ]

Awesome Draft.js

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

Table of Contents

Community

Slack channel

Presentations

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.
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.
Megadraft (⭐1.1k) - A rich text editor with a nice default base of plugins and extensibility.
Medium Draft (⭐1.7k) - Medium-like rich text editor with a focus on keyboard shortcuts.
React-Draft-Wyiswyg (⭐5.9k) - A WYISWYG editor, with various text editing options and corresponding HTML generation.
Dante 2 (⭐921) - Just another Medium clone built on top of DraftJs.
Last Draft (⭐215) - A Draft editor built with Draft.js plugins.
Z-Editor (⭐125) - Online Z-notations editor.
Draftail (⭐568) - A configurable rich text editor based on Draft.js, built for Wagtail.
Braft (⭐4.5k) - Extensible Draft JS Editor

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 Basic HTML Editor (⭐83) - Accept html as its input format, and return html to an onChange.
Draft.js Prism (⭐277)- Highlight code blocks using Prism.
Draft.js Typeahead (⭐121) - Support for typeahead functionality.
Draft Extend (⭐116) - Build extensible Draft.js editors with configurable plugins and integrated serialization.
Draft.js Code (⭐107) - A collection of low-level utilities for nicer code editing
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.

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: Export ContentState to HTML (⭐875) - Export ContentState to HTML.
Draft.js: Export ContentState to PDFMake (⭐10) - Export ContentState to PDFMake.
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
Draft.js AST Exporter (⭐37) - Export content into an abstract syntax tree (AST).
Draft.js AST Importer (⭐13)- Import an abstract syntax tree (AST) output from the companion draft-js-ast-exporter.
Draft.js Multidecorators (⭐32) - Combine multiple decorators.
Draft.js SimpleDecorator (⭐25) - Easily create flexible decorators.
DraftJS Utils (⭐280) - Set of utility functions for DraftJS.
DraftJs to HTML (⭐299) - Library for generating HTML for DraftJS editor content.
Draft Convert (⭐472) - Extensibly serialize & deserialize Draft.js ContentState with HTML.
HTML to DraftJS (⭐150) - Convert plain HTML to DraftJS Editor content.
Draft.js Exporter (Go) (⭐22) - Export Draft.js content state into HTML.
React Native Draft.js Render (⭐386) - A React Native render for Draft.js model.
Draft.js filters (⭐53) - Filter Draft.js content to preserve only the formatting you allow.
Sticky (⭐7) - 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 (⭐69)
Draftail Playground – Wagtail’s Draft.js dependencies as a standalone demo.
Draft drag and drop demo for mobile browser (⭐15)

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.