Draft.js vs React-Draft-Wysiwyg: Architecture, Setup, and Maintenance

Both draft-js and react-draft-wysiwyg aim to solve the complex problem of building rich text editors in React applications, but they operate at different layers of the stack. draft-js provides the core engine for managing editor state and content, while react-draft-wysiwyg wraps that engine to provide a ready-to-use interface. Understanding the distinction between the core library and the UI wrapper is critical for making the right architectural choice.

⚠️ Important Maintenance Status

Before diving into technical details, it is essential to address the current status of these libraries. Meta has announced that draft-js is no longer actively developed and they recommend migrating to Lexical for new projects. Since react-draft-wysiwyg depends entirely on draft-js, it shares this maintenance risk. For greenfield projects requiring long-term support, evaluating modern alternatives like Lexical, TipTap, or Slate is strongly advised. The following comparison assumes you have a specific requirement to use these packages, such as maintaining legacy code or specific compatibility needs.

🏗️ Architecture: Core Engine vs UI Wrapper

draft-js is a headless framework. It gives you the Editor component and the EditorState management, but it does not provide a toolbar, bold buttons, or link inputs. You must build these UI controls yourself and wire them to the editor commands.

// draft-js: Manual UI implementation
import { Editor, EditorState, RichUtils } from 'draft-js';

function MyEditor({ editorState, onChange }) {
  const toggleBold = () => {
    onChange(RichUtils.toggleInlineStyle(editorState, 'BOLD'));
  };

  return (
    <div>
      <button onClick={toggleBold}>B</button>
      <Editor editorState={editorState} onChange={onChange} />
    </div>
  );
}

react-draft-wysiwyg wraps the draft-js Editor and provides a pre-built toolbar component. You configure the toolbar via a props object, and the package handles the button logic and rendering for you.

// react-draft-wysiwyg: Pre-built UI
import { Editor } from 'react-draft-wysiwyg';

function MyEditor({ editorState, onChange }) {
  return (
    <Editor
      editorState={editorState}
      onEditorStateChange={onChange}
      toolbar={{
        inline: { inDropdown: false },
        options: ['inline', 'blockType', 'list']
      }}
    />
  );
}

🚀 Setup and Initialization

Setting up draft-js requires more boilerplate. You need to manage the EditorState in your parent component and handle the onChange event explicitly. You also need to import CSS for the base editor functionality.

// draft-js: Manual state management
import { EditorState } from 'draft-js';
import { useState } from 'react';

function App() {
  const [editorState, setEditorState] = useState(() => 
    EditorState.createEmpty()
  );

  return (
    <div className="editor-container">
      <MyEditor 
        editorState={editorState} 
        onChange={setEditorState} 
      />
    </div>
  );
}

react-draft-wysiwyg simplifies this by exporting a ready-to-use Editor component that still requires state management but reduces the need for surrounding UI logic. It also includes default styling that makes it look functional immediately.

// react-draft-wysiwyg: Simplified setup
import { Editor } from 'react-draft-wysiwyg';
import { useState } from 'react';

function App() {
  const [editorState, setEditorState] = useState(() => 
    EditorState.createEmpty()
  );

  return (
    <div className="rdw-editor-wrapper">
      <Editor
        editorState={editorState}
        onEditorStateChange={setEditorState}
      />
    </div>
  );
}

🎨 Customizing Block Rendering

When you need custom blocks (like tweets, embeds, or special alerts), both packages rely on the same underlying draft-js mechanism. However, react-draft-wysiwyg allows you to pass these configurations through its wrapper props.

draft-js requires you to define a blockRenderMap and a component map, then pass them to the Editor.

// draft-js: Custom block map
const blockRenderMap = Immutable.Map({
  'alert': { element: 'div' }
});

function MyEditor({ editorState, onChange }) {
  return (
    <Editor
      editorState={editorState}
      onChange={onChange}
      blockRenderMap={blockRenderMap}
      blockRendererFn={(block) => {
        if (block.getType() === 'alert') {
          return { component: AlertBlockComponent };
        }
      }}
    />
  );
}

react-draft-wysiwyg accepts the same props since it passes them down to the internal draft-js Editor. The difference is you configure this within the wrapper component.

// react-draft-wysiwyg: Custom block config
function MyEditor({ editorState, onChange }) {
  return (
    <Editor
      editorState={editorState}
      onEditorStateChange={onChange}
      blockRenderMap={blockRenderMap}
      blockRendererFn={(block) => {
        if (block.getType() === 'alert') {
          return { component: AlertBlockComponent };
        }
      }}
    />
  );
}

💾 Data Serialization: HTML and JSON

Both packages use ContentState to serialize data. You can convert the editor content to JSON for storage or HTML for display elsewhere. The API for this is identical because react-draft-wysiwyg uses the draft-js conversion utilities.

Exporting to JSON

// Both packages: Convert to JSON
import { convertToRaw } from 'draft-js';

const contentState = editorState.getCurrentContent();
const rawContent = convertToRaw(contentState);
// Save rawContent to database

Exporting to HTML

// Both packages: Convert to HTML
import { stateToHTML } from 'draft-js-export-html';

const html = stateToHTML(editorState.getCurrentContent());
// Send HTML to backend or render in viewer

🛠️ Toolbar Configuration

This is the biggest differentiator. With draft-js, you build the toolbar. With react-draft-wysiwyg, you configure it.

draft-js requires you to create buttons that call RichUtils or Modifier functions. You handle active states (e.g., is the cursor currently on bold text?) manually.

// draft-js: Manual toolbar logic
const isBold = editorState.getCurrentInlineStyle().has('BOLD');

<button 
  className={isBold ? 'active' : ''}
  onMouseDown={(e) => {
    e.preventDefault();
    onChange(RichUtils.toggleInlineStyle(editorState, 'BOLD'));
  }}
>
  Bold
</button>

react-draft-wysiwyg lets you define options in a configuration object. You can hide specific features or change the layout without writing button logic.

// react-draft-wysiwyg: Config-based toolbar
<Editor
  editorState={editorState}
  onEditorStateChange={onChange}
  toolbar={{
    options: ['inline', 'blockType', 'fontSize', 'list'],
    inline: { options: ['BOLD', 'ITALIC', 'UNDERLINE'] },
    blockType: { inDropdown: true }
  }}
/>

📊 Summary: Key Differences

🤝 Similarities: Shared Foundation

Since react-draft-wysiwyg is built on draft-js, they share the same core behaviors and limitations.

1. Immutable.js Dependency

Both packages rely on Immutable.js for state management. This can introduce friction when integrating with modern React patterns that prefer plain objects.

// Both: Accessing content requires Immutable methods
const content = editorState.getCurrentContent();
const text = content.getFirstBlock().getText();

2. ContentState Model

Both use the same ContentState data structure. Migration between the two is easy because the underlying state is compatible.

// Both: Creating state from raw data
const contentState = convertFromRaw(rawData);
const editorState = EditorState.createWithContent(contentState);

3. Plugin System

Both support the Draft.js plugin ecosystem (e.g., draft-js-plugins). You can add mentions, emojis, or links using the same plugins in either package.

// Both: Using plugins
import createLinkPlugin from 'draft-js-anchor-plugin';
const linkPlugin = createLinkPlugin();

// Pass plugins to Editor in both cases
<Editor plugins={[linkPlugin]} ... />

💡 The Big Picture

draft-js is the engine under the hood. It is best suited for teams that need to build a highly custom editing experience where the toolbar and editor chrome must match a specific design system perfectly. It requires more engineering effort but offers total control.

react-draft-wysiwyg is the complete vehicle. It is best suited for teams that need a functional editor quickly and are happy with a standard toolbar layout. It reduces development time significantly but adds a layer of abstraction over the core engine.

Final Thought: Both packages rely on technology that is no longer the primary focus of Meta. For new projects, consider if the short-term gain of these libraries outweighs the long-term cost of maintaining a deprecated stack. If you must choose between them, pick react-draft-wysiwyg for speed and draft-js for control — but keep an eye on migration paths to modern alternatives like Lexical.