[[
wikihub
]]
Search
⌘K
Explore
People
For Agents
Sign in
Explore
People
For Agents
Sign in
@harrisonqian / Awesome / wiki/front-end-development/draft-js.md
Suggest edit
Cancel
Submit suggestion
Title
Name
Note
--- visibility: public --- # Draft.js **repo:** [nikgraf/awesome-draft-js](https://github.com/nikgraf/awesome-draft-js) **category:** [[front-end-development|Front-End Development]] **related:** [[javascript|Javascript]] --- # Awesome Draft.js [](https://github.com/sindresorhus/awesome) [Draft.js](https://draftjs.org/) is a framework for building rich text editors in React. **Table of Contents** - [Community](https://github.com/nikgraf/awesome-draft-js#community) - [Presentations](https://github.com/nikgraf/awesome-draft-js#presentations) - [Projects on Top of Draft.js](https://github.com/nikgraf/awesome-draft-js#standalone-editors-built-on-draftjs) - [Common Utilities](https://github.com/nikgraf/awesome-draft-js#common-utilities) - [Blog Posts & Articles](https://github.com/nikgraf/awesome-draft-js#blog-posts--articles) - [Live Demos](https://github.com/nikgraf/awesome-draft-js#live-demos) - [Usage in Production](https://github.com/nikgraf/awesome-draft-js#usage-in-production) - [License](https://github.com/nikgraf/awesome-draft-js#license) ## Community * [Slack channel](https://draftjs.herokuapp.com/) ## Presentations * [Rich [Text Editing](/@harrisonqian/awesome/wiki/front-end-development/text-editing) with [React](/@harrisonqian/awesome/wiki/front-end-development/react) @ React.js Conf 2016 by Isaac Salier-Hellendag ](https://www.youtube.com/watch?v=feUYwoLhE_4) * [Rich [text editing](/@harrisonqian/awesome/wiki/front-end-development/text-editing) with Draft.js & DraftJS Plugins by Nik Graf](https://www.youtube.com/watch?v=gxNuHZXZMgs) * [React Ep. 37: Draftjs by What I Learned Today – Atomic Jolt](https://www.youtube.com/watch?v=0k9suXgCtTA) * [008 - Draft.js Plugins @ React30](https://www.youtube.com/watch?v=w-PqnpMizcQ) * [Draft.js at HubSpot by Ben Briggs](https://product.hubspot.com/blog/tech-talk-at-night-[react](/@harrisonqian/awesome/wiki/front-end-development/react)-meetup) * [Draft.js under the hood - [React](/@harrisonqian/awesome/wiki/front-end-development/react) Melbourne meetup](https://www.youtube.com/watch?feature=player_embedded&v=vOZAO3jFSHI) ## Standalone Editors Built on Draft.js * [Draft WYSIWYG](https://github.com/bkniffler/draft-wysiwyg) - WYSIWYG editor that with drag&drop, resizing & tooltips. * [Draft.js Editor](https://github.com/AlastairTaft/draft-js-editor/) - A Rich text editor inspired by Medium & Facebook Notes. * [React-RTE](https://github.com/sstur/react-rte/) - A full-featured textarea replacement similar to CKEditor or TinyMCE. * [Facebook Notes Clone(ish)](https://github.com/andrewcoelho/react-text-editor) - Rich text editor similar to Facebook notes. * [Megadraft](https://github.com/globocom/megadraft) - A rich text editor with a nice default base of plugins and extensibility. * [Medium Draft](https://github.com/brijeshb42/medium-draft) - Medium-like rich text editor with a focus on keyboard shortcuts. * [React-Draft-Wyiswyg](https://github.com/jpuri/react-draft-wysiwyg) - A WYISWYG editor, with various [text editing](/@harrisonqian/awesome/wiki/front-end-development/text-editing) options and corresponding HTML generation. * [Dante 2](https://github.com/michelson/dante2) - Just another Medium clone built on top of DraftJs. * [Last Draft](https://github.com/vacenz/last-draft) - A Draft editor built with Draft.js plugins. * [Z-Editor](https://github.com/Z-Editor/Z-Editor) - Online Z-notations editor. * [Draftail](https://github.com/springload/draftail/) - A configurable rich text editor based on Draft.js, built for [Wagtail](/@harrisonqian/awesome/wiki/content-management-systems/wagtail). * [Braft](https://github.com/margox/braft-editor) - Extensible Draft JS Editor ## Plugins and Decorators Built for Draft.js * [Draft.js Plugins](https://github.com/draft-js-plugins/draft-js-plugins) - A Plugin architecture on top of Draft.js - [Alignment](https://www.draft-js-plugins.com/plugin/alignment) - [Block Breakout](https://github.com/icelab/draft-js-block-breakout-plugin) - Break out of block types as you type. - [Buttons](https://github.com/vacenz/last-draft-js-plugins) - [Color Picker](https://github.com/vacenz/last-draft-js-plugins) - [Counter](https://www.draft-js-plugins.com/plugin/counter) - Character, word & line counting. - [Divider](https://github.com/simsim0709/draft-js-plugins/tree/master/draft-js-divider-plugin) - [Drag and Drop](https://www.draft-js-plugins.com/plugin/drag-n-drop) - [Embed](https://github.com/vacenz/last-draft-js-plugins) - [Emoji](https://www.draft-js-plugins.com/plugin/emoji) - [Slack](/@harrisonqian/awesome/wiki/work/slack)-like emoji support - [EmojiPicker](https://github.com/vacenz/last-draft-js-plugins) - [Focus](https://www.draft-js-plugins.com/plugin/focus) - [GifPicker](https://github.com/vacenz/last-draft-js-plugins) - [Hashtags](https://www.draft-js-plugins.com/plugin/hashtag) - Twitter-like hashtag support - [Image](https://www.draft-js-plugins.com/plugin/image) - [Inline Toolbar](https://www.draft-js-plugins.com/plugin/inline-toolbar) - [Katex](https://github.com/letranloc/draft-js-katex-plugin) - Insert and render [LaTeX](/@harrisonqian/awesome/wiki/miscellaneous/latex) using Katex. - [Link](https://github.com/vacenz/last-draft-js-plugins) - [Linkify](https://www.draft-js-plugins.com/plugin/linkify) - Automatically turn links into anchor-tags. - [List](https://github.com/samuelmeuli/draft-js-list-plugin) - Automatic list creation, nested lists - [Markdown Shortcuts](https://github.com/ngs/draft-js-[markdown](/@harrisonqian/awesome/wiki/miscellaneous/markdown)-shortcuts-plugin/) - [Markdown](/@harrisonqian/awesome/wiki/miscellaneous/markdown) syntax shortcuts. - [Mathjax](https://github.com/tarjei/draft-js-mathjax-plugin) - Edit [math](/@harrisonqian/awesome/wiki/theory/math) using (La)TeX rendered by Mathjax. - [Mention](https://www.draft-js-plugins.com/plugin/mention) - Twitter-like mention support - [Modal](https://github.com/vacenz/last-draft-js-plugins) - [Prism](https://github.com/withspectrum/draft-js-prism-plugin) - Syntax highlight code blocks with Prism. - [Resizeable](https://www.draft-js-plugins.com/plugin/resizeable) - [RichButtons](https://github.com/jasonphillips/draft-js-richbuttons-plugin) - Add and customize rich formatting buttons. - [Side Toolbar](https://www.draft-js-plugins.com/plugin/side-toolbar) - [Sidebar](https://github.com/vacenz/last-draft-js-plugins) - [Single Line](https://github.com/icelab/draft-js-single-line-plugin) - Restrict to a single line of input. - [Sticker](https://www.draft-js-plugins.com/plugin/sticker) - Facebook-like sticker support - [Toolbar](https://github.com/vacenz/last-draft-js-plugins) - [Undo](https://www.draft-js-plugins.com/plugin/undo) - Undo & Redo button. - [Video](https://www.draft-js-plugins.com/plugin/video) * [Draft.js Gutter](https://github.com/seejamescode/draft-js-gutter) - Compliments line number gutter. * [Draft.js Basic HTML Editor](https://github.com/dburrows/draft-js-basic-html-editor) - Accept html as its input format, and return html to an onChange. * [Draft.js Prism](https://github.com/SamyPesse/draft-js-prism)- Highlight code blocks using Prism. * [Draft.js Typeahead](https://github.com/dooly-ai/draft-js-typeahead) - Support for typeahead functionality. * [Draft Extend](https://github.com/HubSpot/draft-extend) - Build extensible Draft.js editors with configurable plugins and integrated serialization. * [Draft.js Code](https://github.com/SamyPesse/draft-js-code) - A collection of low-level utilities for nicer code editing * [Draft.js Annotatable](https://github.com/cltk/annotations) - Out of the box annotation system for Draft.js with support for user-created annotations. * [Draft.js Regex](https://github.com/YozhikM/draft-regex) - The set of flexible helpers, like [regex](/@harrisonqian/awesome/wiki/miscellaneous/regex), blank lines preventing and pasted HTML clearing. ## Common Utilities * [BackDraft.js](https://github.com/evanc/backdraft-js) - Function to turn a rawContentBlock into a marked-up string. * [Draft.js Exporter](https://github.com/rkpasia/draft-js-exporter) - Export and format the content from Draft.js. * [Draft.js: Export ContentState to HTML](https://github.com/sstur/draft-js-utils/tree/master/packages/draft-js-export-html) - Export ContentState to HTML. * [Draft.js: Export ContentState to PDFMake](https://github.com/datagenno/draft-js-export-pdfmake) - Export ContentState to PDFMake. * [Redraft](https://github.com/lokiuz/redraft) - Renders the result of Draft.js convertToRaw using provided callbacks, works well with [React](/@harrisonqian/awesome/wiki/front-end-development/react) * [Draft.js exporter (Ruby)](https://github.com/ignitionworks/draftjs_exporter) - Export Draft.js content state into HTML. * [Draft.js exporter (Python)](https://github.com/springload/draftjs_exporter) - Library to convert Draft.js raw ContentState to HTML * [Draft.js AST Exporter](https://github.com/icelab/draft-js-ast-exporter) - Export content into an abstract syntax tree (AST). * [Draft.js AST Importer](https://github.com/icelab/draft-js-ast-importer)- Import an abstract syntax tree (AST) output from the companion draft-js-ast-exporter. * [Draft.js Multidecorators](https://github.com/SamyPesse/draft-js-multidecorators) - Combine multiple decorators. * [Draft.js SimpleDecorator](https://github.com/Soreine/draft-js-simpledecorator) - Easily create flexible decorators. * [DraftJS Utils](https://github.com/jpuri/draftjs-utils) - Set of utility functions for DraftJS. * [DraftJs to HTML](https://github.com/jpuri/draftjs-to-html) - Library for generating HTML for DraftJS editor content. * [Draft Convert](https://github.com/HubSpot/draft-convert) - Extensibly serialize & deserialize Draft.js ContentState with HTML. * [HTML to DraftJS](https://github.com/jpuri/html-to-draftjs) - Convert plain HTML to DraftJS Editor content. * [Draft.js Exporter (Go)](https://github.com/ejilay/draftjs) - Export Draft.js content state into HTML. * [React Native Draft.js Render](https://github.com/globocom/react-native-draftjs-render) - A [React](/@harrisonqian/awesome/wiki/front-end-development/react) Native render for Draft.js model. * [Draft.js filters](https://github.com/thibaudcolas/draftjs-filters) - Filter Draft.js content to preserve only the formatting you allow. * [Sticky](https://github.com/nadunindunil/sticky) - A simple note taking and clipboard managing desktop application ## Blog Posts & Articles * [Facebook open sources rich text editor framework Draft.js](https://code.facebook.com/posts/1684092755205505/facebook-open-sources-rich-text-editor-framework-draft-js/) * [This Blog Post Was Written Using Draft.js](https://dev.to/ben/this-blog-post-was-written-using-draftjs) * [How Draft.js Represents Rich Text Data](https://medium.com/@rajaraodv/how-draft-js-represents-rich-text-data-eeabb5f25cf2#.7gd8psdvi) * [A Beginner’s Guide to Draft.js](https://medium.com/@adrianli/a-beginner-s-guide-to-draft-js-d1823f58d8cc#.uufeulpl5) * [Implementing todo list in Draft.js](http://bitwiser.in/2016/08/31/implementing-todo-list-in-draft-js.html) * [Draft.js Pieces](https://cannibalcoder.com/2016/12/02/draft-js-pieces/) * [Learning Draft.js](https://reactrocket.com/series/learning-draft-js/) - Series of blog posts on how to develop with draft.js * [Why [Wagtail](/@harrisonqian/awesome/wiki/content-management-systems/wagtail)’s new editor is built with Draft.js](https://wagtail.io/blog/why-wagtail-new-editor-is-built-with-draft-js/) * [Rethinking rich text pipelines with Draft.js](https://wagtail.io/blog/rethinking-rich-text-pipelines-with-draft-js/) ## Live Demos * [Draft-js Samples - An app with examples and code explanations](https://github.com/Mair/react-meetup-draftjs) * [Draftail Playground](https://draftail-playground.herokuapp.com/) – [Wagtail](/@harrisonqian/awesome/wiki/content-management-systems/wagtail)’s Draft.js dependencies as a standalone demo. * [Draft drag and drop demo for mobile browser](https://github.com/jan4984/draft-dnd-example) ## Playgrounds for Examples from Official Repository (v.0.10.0) * [Rich Text Editor](https://codepen.io/Kiwka/pen/YNYvyG) * [Color Editor](https://codepen.io/Kiwka/pen/oBpVve) * [Convert from HTML Editor](https://codepen.io/Kiwka/pen/YNYgWa) * [Entity Editor](https://codepen.io/Kiwka/pen/wgpOoZ) * [Link Editor](https://codepen.io/Kiwka/pen/ZLvPeO) * [Media Editor](https://codepen.io/Kiwka/pen/rjpRzj) * [Plain Text Editor](https://codepen.io/Kiwka/pen/jyYJzb) * [Decorators Editor - Tweet example](https://codepen.io/Kiwka/pen/KaZERV) ## Usage in Production * [StoryChief](https://www.storychief.io/) * [HKW Technosphere Magazine](https://technosphere-magazine.hkw.de/) * [Douban Read](https://read.douban.com/editor_ng) * [Dooly](https://www.dooly.ai) * [Wagtail](https://wagtail.io/) * [Patreon](https://www.patreon.com/) ## License [](https://creativecommons.org/publicdomain/zero/1.0/) To the extent possible under law, [Nikolaus Graf](https://github.com/nikgraf/) has waived all copyright and related or neighboring rights to this work.