draft-js

library0.11.7jsnpmunverified

Draft.js is a JavaScript framework developed by Facebook for building rich text editors within React applications. It leverages an immutable data model, specifically `immutable-js`, to manage editor state, offering functional state updates and aggressive data persistence for scalable memory usage. The latest stable version is 0.11.7, released in August 2020. However, the project has since been formally archived by Facebook on GitHub in February 2023, making it read-only and indicating that it is no longer actively maintained. This means no further bug fixes, features, or security updates are expected. Key differentiators include its tight integration with React's declarative API for rendering, selection, and input behavior, and its extensible architecture allowing for a wide variety of rich text composition experiences, from basic styling to embedded media.

web-framework

npm install draft-js

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · DRAFT-JS

draft-js

web-frameworkjavascriptv0.11.7

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Editor

✓ import { Editor } from 'draft-js';

✗ const Editor = require('draft-js').Editor;

CommonJS `require` syntax is often incorrect in modern React projects that are typically ESM-first. Ensure your bundler handles it correctly.

EditorState

✓ import { EditorState } from 'draft-js';

✗ import EditorState from 'draft-js/lib/EditorState';

Importing directly from `lib/` paths is generally discouraged as it's an internal implementation detail and can break between versions.

Modifier

✓ import { Modifier } from 'draft-js';

✗ import { EditorState, Modifier } from 'draft-js/lib/DraftModifier';

Provides methods for applying changes to `ContentState`. Prefer named imports from the main package entry point.

RichUtils

✓ import { RichUtils } from 'draft-js';

✗ const RichUtils = require('draft-js/lib/RichUtils');

Offers convenience methods for common rich text operations like bold, italic, and block type changes.

This example demonstrates a basic Draft.js editor using React Hooks, including state management, focusing, and handling basic key commands like bold/italic via RichUtils.

import React from 'react'; import ReactDOM from 'react-dom'; import { Editor, EditorState, RichUtils } from 'draft-js'; import 'draft-js/dist/Draft.css'; // Essential for basic styling function MyEditor() { const [editorState, setEditorState] = React.useState( EditorState.createEmpty() ); const editorRef = React.useRef(null); const focusEditor = () => { if (editorRef.current) { editorRef.current.focus(); } }; React.useEffect(() => { focusEditor(); }, []); const handleKeyCommand = (command, editorState) => { const newState = RichUtils.handleKeyCommand(editorState, command); if (newState) { setEditorState(newState); return 'handled'; } return 'not-handled'; }; return ( <div style={{ border: '1px solid gray', minHeight: '6em', padding: '10px' }} onClick={focusEditor}> <Editor ref={editorRef} editorState={editorState} onChange={setEditorState} handleKeyCommand={handleKeyCommand} placeholder="Tell a story..." /> </div> ); } const container = document.getElementById('container'); if (container) { ReactDOM.render(<MyEditor />, container); } else { console.warn("Element with ID 'container' not found. Quickstart code won't render."); }

Debug

Known issues

breakingThe Entity storage API was changed significantly between v0.10.0 and v0.11.0. While v0.10.x supported both old and new APIs, v0.11.0 removed the old API entirely. Projects upgrading from versions prior to 0.10.0 must migrate their entity handling.

fix

Review the official Draft.js documentation on Entity API changes and update your `Entity` creation and management logic to use the new API structure.

affects: >=0.11.0

gotchaDraft.js is no longer actively maintained. The project's GitHub repository was archived in February 2023 and the last release was in August 2020. This means there will be no further bug fixes, security patches, or feature development. Consider alternatives for new projects or plan for in-house maintenance for existing ones.

fix

For new projects, evaluate actively maintained alternatives like Lexical or Slate. For existing projects, understand the risks of using abandoned software and prepare to fork or migrate if critical issues arise.

affects: >=0.11.7

gotchaDraft.js relies heavily on `immutable-js` for its data model. This introduces an additional dependency and a functional programming paradigm that can have a steep learning curve for developers unfamiliar with immutable data structures. Performance can also be a concern with very large documents.

fix

Familiarize yourself with `immutable-js` concepts. For performance-critical applications with extensive content, profile editor behavior and consider optimizing custom components or exploring alternatives.

affects: All

gotchaThe editor requires `draft-js/dist/Draft.css` to be included for basic styling. Without it, the editor might appear as a blank input field, have incorrect cursor positioning, or display blocks improperly.

fix

Ensure `import 'draft-js/dist/Draft.css';` (or equivalent CSS import) is present in your application's entry point or the component where the editor is used.

affects: All

gotchaDraft.js can experience issues with delayed state updates or modifications to the DOM by browser extensions/plugins. The editor expects immediate updates and renders, and delays can cause a disconnect between keystrokes and editor state, leading to broken selection or input.

fix

Avoid batching or delaying `EditorState` updates that are directly propagated to the `Editor` component. Ensure `EditorState` always updates immediately. Be aware that browser extensions can interfere, which is often beyond direct code control.

affects: All

Errors

Common errors & fixes

Cannot read properties of undefined (reading 'focus')

Attempting to call `editor.focus()` before the editor component's ref is properly assigned or when the component is unmounted.

fix

Ensure the ref (`editorRef.current` in Hooks or `this.editor` in classes) is checked for null/undefined before calling `focus()`. Use `React.useEffect` with an empty dependency array for initial focus or conditional rendering.

The Draft.js editor is blank/empty/not visible, even though it's rendered.

The essential `draft-js/dist/Draft.css` stylesheet is not loaded, resulting in missing default styles for block positioning, alignment, and cursor behavior.

fix

Add `import 'draft-js/dist/Draft.css';` to your application's entry file or the component where the Draft.js Editor is used.

Editor state or selection becomes inconsistent or unresponsive after user input.

This often happens with asynchronous updates to React state, leading to race conditions where the editor's internal state doesn't match the DOM, or external DOM manipulation by browser extensions.

fix

Ensure `EditorState` updates are immediate and synchronous when passed to the `Editor` component. Avoid external DOM modifications within the `contentEditable` area. Consider using `EditorState.push` for controlled changes.

Module not found: Error: Can't resolve 'draft-js-export-html'

Attempting to use utility functions (like converting `ContentState` to HTML or Markdown) from external packages without installing them.

fix

Install the necessary conversion library (e.g., `draft-js-export-html`, `draft-js-import-html`) using `npm install <package-name>` or `yarn add <package-name>`.

Upgrade

Version history

0.11.7latest on npm

Audit

Dependencies

reactrequiredRequired for rendering the editor component.

react-domrequiredRequired for DOM interaction and rendering.

immutablerequiredDraft.js is built on `immutable-js` for managing editor state. While not a direct peer dependency, it's a fundamental underlying library.

Agent activity

8 hits · last 30 days

node

Resources

githubhttps://github.com/facebook/draft-js ↗

packagehttps://www.npmjs.com/package/draft-js ↗

homepagehttps://draftjs.org ↗