Track Awesome Draft Js Updates Daily

Awesome list of Draft.js resources

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

[ Daily / Weekly / Overview ]

Feb 18, 2020

Usage in Production

• StoryChief

Oct 08, 2018

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

Aug 31, 2018

Live Demos

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

Jul 27, 2018

Standalone Editors Built on Draft.js

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

Jun 23, 2018

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.

Jun 05, 2018

Usage in Production

• Patreon

May 23, 2018

Live Demos

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

Mar 27, 2018

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

Mar 13, 2018

Blog Posts & Articles

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

Mar 09, 2018

Standalone Editors Built on Draft.js

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

Mar 06, 2018

Usage in Production

• Wagtail

Jan 26, 2018

Presentations

• Draft.js at HubSpot by Ben Briggs

Nov 20, 2017

Common Utilities

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

Oct 20, 2017

Usage in Production

• Dooly

Sep 24, 2017

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.

Sep 15, 2017

Common Utilities

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

Aug 31, 2017

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

Jun 20, 2017

Blog Posts & Articles

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

Mar 23, 2017

Common Utilities

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

Mar 10, 2017

Standalone Editors Built on Draft.js

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

Feb 28, 2017

Usage in Production

• Douban Read

Feb 27, 2017

Presentations

• Draft.js under the hood - React Melbourne meetup

Live Demos

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

Feb 20, 2017

Common Utilities

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

Feb 19, 2017

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.

Feb 13, 2017

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.

Jan 06, 2017

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.

Dec 12, 2016

Blog Posts & Articles

• Draft.js Pieces

Nov 26, 2016

Presentations

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

Nov 03, 2016

Blog Posts & Articles

• This Blog Post Was Written Using Draft.js

Nov 01, 2016

Presentations

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

• 008 - Draft.js Plugins @ React30

Oct 31, 2016

Plugins and Decorators Built for Draft.js

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

Aug 31, 2016

Blog Posts & Articles

• Implementing todo list in Draft.js

Aug 25, 2016

Common Utilities

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

Jul 05, 2016

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

Jun 19, 2016

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

Apr 03, 2016

Blog Posts & Articles

• How Draft.js Represents Rich Text Data

Mar 07, 2016

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