Skip to content
Get packs

Draft.js

A React library for building rich text editors, now in maintenance mode and archived.

GitHub Download v0.11.7
Stars
22.6k
Forks
2.6k
Licence
MIT
Language
JavaScript
Last update
3.8 years ago
Type
Library

This repository is archived and no longer maintained.

What it is

Draft.js is a JavaScript framework for building rich text editors inside React applications. It handles rendering, text selection, and input behavior, and stores editor content in an immutable data model. The project is archived and only receives critical security patches, and its maintainers point to Lexical as the successor.

  • Add a rich text input to a React form using the Editor component and EditorState
  • Customize text styles or embedded media through Draft.js's building blocks
  • Study the examples in the /examples directory of the repo

Great for

  • React developers who already maintain an app using Draft.js
  • Teams with an existing Draft.js editor who need a stable, known codebase
  • Developers who want to study an immutable-state approach to rich text editing

Not ideal for

  • New projects: the README says it is in maintenance mode and points to Lexical as the alternative
  • Teams that need strong mobile support: the README notes known issues with mobile browsers, especially Android
  • Users who need Korean IME input reliability: the README lists known issues in some browsers

How to get it

  1. 1

    Install with a package manager

    You'll need: Node.js · React and React DOM · Yarn v1 (only needed to build from source)

    Install with npm

    npm install --save draft-js react react-dom

    Install with yarn

    yarn add draft-js react react-dom
  2. 2

    Run it

    • Install draft-js, react, and react-dom with npm or yarn
    • Add the meta charset utf-8 tag to your HTML head
    • Create an EditorState with EditorState.createEmpty() and render the Editor component
    • Import draft-js/dist/Draft.css for default styles
  3. 3

    Get the most out of it

    • Use the Hooks example from the README to manage EditorState with useState
    • Set a border and minimum height on the .DraftEditor-root selector so users can see the editor area
    • Set the placeholder prop to show hint text when the editor is empty
    • Check the migration docs linked in the README if you use the Entity storage API

Downloads

Source code (.zip)main branch · straight from GitHubRelease v0.11.7Release notes and sourceOfficial website & docsdraftjs.org/

Strengths

  • Built for React with a declarative API
  • Uses an immutable editor state model built on immutable-js
  • Used in production at Facebook, according to the README

Trade-offs

  • Archived and in maintenance mode, so no new features will be added
  • Known browser and mobile issues, including IME input problems and limited Android support
  • Requires React and React DOM installed alongside it

How it compares

ProjectStarsTypeLevelUpdatedBest for
draft-js (this)22.6kLibraryintermediate3.8 years agoReact developers who already maintain an app using Draft.js
lexical24kLibraryintermediate4 days agoDevelopers adding a rich text editor to a web app
slate31.7kFrameworkadvanced8 days agoDevelopers building a custom rich text editor inside a web app
tiptap38.9kLibraryintermediate4 days agoDevelopers building a custom text editor into a web product

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.