Ranked awesome lists, all in one place
This list is a copy of nikgraf/awesome-draft-js with ranks
Awesome Draft.js ★87749
Draft.js is a framework for building rich text editors in React.
Table of Contents
- Community ★1486
- Presentations ★1486
- Projects on Top of Draft.js ★1486
- Common Utilities ★1486
- Blog Posts & Articles ★1486
- Live Demos ★1486
- Usage in Production ★1486
- License ★1486
Community
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
- Draft.js under the hood - React Melbourne meetup
Standalone Editors Built on Draft.js
- Draft WYSIWYG ★379 ⏳1Y - WYSIWYG editor that with drag&drop, resizing & tooltips.
- Draft.js Editor ★112 - A Rich text editor inspired by Medium & Facebook Notes.
- React-RTE ★1767 - A full-featured textarea replacement similar to CKEditor or TinyMCE.
- Facebook Notes Clone(ish) ★215 - Rich text editor similar to Facebook notes.
- Megadraft ★588 - A rich text editor with a nice default base of plugins and extensibility.
- Medium Draft ★1124 - Medium-like rich text editor with a focus on keyboard shortcuts.
- React-Draft-Wyiswyg ★2419 - A WYISWYG editor, with various text editing options and corresponding HTML generation.
- Dante 2 ★454 - Just another Medium clone built on top of DraftJs.
- Last Draft ★180 - A Draft editor built with Draft.js plugins.
- Z-Editor ★48 - Online Z-notaions editor.
- Draftail ★108 - A configurable rich text editor based on Draft.js, built for Wagtail.
Plugins and Decorators Built for Draft.js
- Draft.js Plugins ★2740 - A Plugin architecture on top of Draft.js
- Alignment
- Autolist ★52 - Automatic unordered/ordered list creation.
- Block Breakout ★33 ⏳1Y - Break out of block types as you type.
- Buttons ★59
- Color Picker ★59
- Counter - Character, word & line counting.
- Divider
- Drag and Drop
- Embed ★59
- Emoji - Slack-like emoji support
- EmojiPicker ★59
- Focus
- GifPicker ★59
- Hashtags - Twitter-like hashtag support
- Image
- Inline Toolbar
- Katex ★11 - Insert and render LaTeX using Katex.
- Link ★59
- Linkify - Automatically turn links into anchor-tags.
- Markdown Shortcuts ★123 - Markdown syntax shortcuts.
- Mathjax ★49 - Edit math using (La)TeX rendered by Mathjax.
- Mention - Twitter-like mention support
- Modal ★59
- Prism ★15 - Syntax highlight code blocks with Prism.
- Resizeable
- RichButtons ★35 - Add and customize rich formatting buttons.
- Side Toolbar
- Sidebar ★59
- Single Line ★22 ⏳1Y - Restrict to a single line of input.
- Sticker - Facebook-like sticker support
- Toolbar ★59
- Undo - Undo & Redo button.
- Video
- Draft.js Gutter ★11 ⏳2Y - Compliments line number gutter.
- Draft.js Basic HTML Editor ★72 - Accept html as its input format, and return html to an onChange.
- Draft.js Prism ★231- Highlight code blocks using Prism.
- Draft.js Typeahead ★103 - Support for typeahead functionality.
- Draft Extend ★69 - Build extensible Draft.js editors with configurable plugins and integrated serialization.
- Draft.js Code ★81 - A collection of low-level utilities for nicer code editing
- Draft.js Annotatable ★7 - Out of the box annotation system for Draft.js with support for user-created annotations.
- Draft.js Regex ★18 - The set of flexible helpers, like regex, blank lines preventing and pasted HTML clearing.
Common Utilities
- BackDraft.js ★40 ⏳2Y - Function to turn a rawContentBlock into a marked-up string.
- Draft.js Exporter ★28 ⏳1Y - Export and format the content from Draft.js.
- Draft.js: Export ContentState to HTML - Export ContentState to HTML.
- Draft.js: Export ContentState to PDFMake ★2 - Export ContentState to PDFMake.
- Redraft ★136 - Renders the result of Draft.js convertToRaw using provided callbacks, works well with React
- Draft.js exporter (Ruby) ★11 - Export Draft.js content state into HTML.
- Draft.js exporter (Python) ★27 - Library to convert Draft.js raw ContentState to HTML
- Draft.js AST Exporter ★24 ⏳1Y - Export content into an abstract syntax tree (AST).
- Draft.js AST Importer ★7 ⏳1Y- Import an abstract syntax tree (AST) output from the companion draft-js-ast-exporter.
- Draft.js Multidecorators ★22 ⏳1Y - Combine multiple decorators.
- Draft.js SimpleDecorator ★18 ⏳1Y - Easily create flexible decorators.
- DraftJS Utils ★129 - Set of utility functions for DraftJS.
- DraftJs to HTML ★109 - Library for generating HTML for DraftJS editor content.
- Draft Convert ★239 - Extensibly serialize & deserialize Draft.js ContentState with HTML.
- HTML to DraftJS ★54 - Convert plain HTML to DraftJS Editor content.
- Draft.js Exporter (Go) ★14 - Export Draft.js content state into HTML.
- React Native Draft.js Render ★222 - A React Native render for Draft.js model.
- Draft.js filters ★13 - Filter Draft.js content to preserve only the formatting you allow.
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
- REACTing Codepen Comment Editor - Draft.js
- Draft.js Examples - A Heroku app w/ several example Draft.js Editors from different projects
- Draft-js Samples - An app with examples and code explanations ★36
- Draftail Playground – Wagtail’s Draft.js dependencies as a standalone demo.
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
License
To the extent possible under law, Nikolaus Graf has waived all copyright and related or neighboring rights to this work.
This list is a copy of nikgraf/awesome-draft-js with ranks