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

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 - Rich text editor.
• 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.

Plugins and Decorators Built for Draft.js

• Draft.js Plugins - A Plugin architecture on top of Draft.js
  • Emoji - Slack-like emoji support
  • Stickers - Facebook-like sticker support
  • Hashtags - Twitter-like hashtag support
  • Linkify - Automatically turn links into anchor-tags.
  • Mentions - Twitter-like mention support
  • Undo - Undo & Redo button.
  • Counter - Character, word & line counting.
  • Autolist - Automatic unordered/ordered list creation.
  • Block Breakout - Break out of block types as you type.
  • Markdown Shortcuts - Markdown syntax shortcuts.
  • Single Line - Restrict to a single line of input.
  • RichButtons - Add and customize rich formatting buttons.
• 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.
• Dante 2 - Just another Medium clone built on top of DraftJs
• Last Draft - A Draft editor built with Draft.js plugins.

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.
• 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- Emport 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.

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

Live Demos

• REACTing Codepen Comment Editor - Draft.js
• Draft.js Examples - A Heroku app w/ several example Draft.js Editors from different projects

Usage in Production

• Small Teaser

License

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