Build Rich Text Editors in React Using Draft.js and react-draft-wysiwyg

Understanding Rich Text Editing in React

Rich text editing capabilities have become essential for modern web applications, from content management systems to collaborative platforms and blogging interfaces. React developers have access to several powerful libraries for implementing WYSIWYG editors, with Draft.js and react-draft-wysiwyg standing out as particularly robust options.

Why Rich Text Editors Matter

Web applications increasingly require sophisticated text input capabilities beyond simple textarea elements. Users expect formatting options, inline media embedding, and intuitive editing experiences similar to desktop word processors. Implementing these features from scratch involves complex challenges around content representation, cursor management, and cross-browser compatibility.

The Draft.js Foundation

Draft.js, developed by Facebook, provides a robust framework for building rich text editors within React applications. Unlike monolithic editor solutions, Draft.js functions as a contentEditable wrapper that manages a document model internally, storing content as structured data rather than raw HTML. This approach offers significant advantages for complex editing scenarios, including easier content manipulation, better state management integration with React's component model, and more predictable behavior across different browsers.

For teams building modern React applications, implementing rich text editing capabilities requires careful consideration of state management, content serialization, and user experience design.

Setting Up Your Development Environment

Installation and Dependencies

Getting started with rich text editing in React requires installing both Draft.js and react-draft-wysiwyg packages:

npm install draft-js react-draft-wysiwyg

The core packages provide essential editing functionality, while optional peer dependencies handle specific use cases. For applications requiring image uploads, you'll need to configure your backend storage solution.

Basic Editor Implementation

Creating a functional rich text editor involves establishing state management and configuring the Editor component:

import React, { useState } from 'react';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

const RichTextEditor = () => {
 const [editorState, setEditorState] = useState();

 const handleEditorChange = (newState) => {
 setEditorState(newState);
 };

 return (
 <div className="editor-container">
 <Editor
 editorState={editorState}
 onEditorStateChange={handleEditorChange}
 wrapperClassName="editor-wrapper"
 editorClassName="editor-content"
 toolbarClassName="editor-toolbar"
 />
 </div>
 );
};

This basic structure establishes the core editing capability, with the Editor component handling content rendering and interaction while the parent component manages state persistence and any additional logic required by the application. For larger React applications, consider implementing these patterns within a custom hook to enable reuse across multiple editor instances.

Managing Editor State

Understanding EditorState

The EditorState object represents the complete state of the editor, including the content, selection, and undo/redo history. This immutable structure captures every aspect of the editor's current condition, enabling reliable state management and easy integration with React's component lifecycle. When users interact with the editor, new EditorState instances are created reflecting the changes, which applications can process, store, or transform as needed.

Content within EditorState is organized into blocks, each representing a paragraph or line of text with specific styling. Inline styles (bold, italic, underline) and entity annotations (links, images, mentions) attach to text ranges within these blocks.

Content Conversion and Serialization

Storing editor content requires converting between EditorState and persistent formats:

import { convertToRaw, convertFromRaw } from 'draft-js';

const saveContent = (editorState) => {
 const content = editorState.getCurrentContent();
 const rawContent = convertToRaw(content);
 const serialized = JSON.stringify(rawContent);
 // Store serialized content in database
};

const loadContent = (serialized) => {
 const rawContent = JSON.parse(serialized);
 const content = convertFromRaw(rawContent);
 return EditorState.createWithContent(content);
};

This approach ensures that content can be stored in any backend system while preserving all formatting information for later retrieval and display. For complex content management requirements, integrating with a full-stack solution ensures seamless data flow between frontend editors and backend storage.

Customizing the Toolbar

Built-in Toolbar Options

The react-draft-wysiwyg library provides a comprehensive default toolbar covering common formatting needs:

• Text Styling: Bold, italic, underline, strikethrough, monospace
• Heading Levels: H1 through H4, Blockquote, Code blocks
• Lists: Ordered and unordered lists
• Text Alignment: Left, center, right, justify
• Media: Links, emojis, images
• History: Undo and redo operations

Configuration Example

const toolbarOptions = {
 options: ['inline', 'blockType', 'fontSize', 'list', 'textAlign', 'link', 'emoji', 'image', 'history'],
 inline: {
 inDropdown: false,
 options: ['bold', 'italic', 'underline', 'strikethrough', 'monospace'],
 },
 blockType: {
 inDropdown: true,
 options: ['Normal', 'H1', 'H2', 'H3', 'H4', 'Blockquote', 'Code'],
 },
 fontSize: {
 options: [8, 9, 10, 11, 12, 14, 16, 18, 24, 30, 36],
 },
};

Adding Custom Toolbar Controls

Applications can extend the toolbar with custom controls implemented as React components. These receive selection and state information, enabling context-aware behavior. Custom controls commonly implement features like mathematical notation insertion, code snippet highlighting, or integration with external services. When building custom interfaces that require specialized formatting, the extensible toolbar system provides the flexibility needed to support unique requirements.

For applications requiring advanced customization, working with experienced UI/UX designers ensures the toolbar design aligns with overall user experience goals.

Working with Images and Media

Image Upload Configuration

Handling image uploads requires coordinating between the frontend editor and backend storage infrastructure:

const uploadImageCallBack = (file) => {
 return new Promise((resolve, reject) => {
 const formData = new FormData();
 formData.append('image', file);

 fetch('/api/upload', {
 method: 'POST',
 body: formData,
 })
 .then(response => response.json())
 .then(data => {
 resolve({ data: { link: data.url } });
 })
 .catch(error => {
 reject(error);
 });
 });
};

// Usage in Editor component
<Editor
 editorState={editorState}
 onEditorStateChange={setEditorState}
 uploadImageCallBack={uploadImageCallBack}
 toolbar={{ image: { uploadCallback: uploadImageCallBack } }}
/>

Best Practices for Image Handling

1. Implement file size limits (typically 2-5MB)
2. Validate file types (JPG, PNG, GIF, WebP)
3. Use CDN for delivery to improve performance
4. Implement lazy loading for large images
5. Provide upload progress indicators
6. Handle upload errors gracefully with retry options

For production applications, integrate with cloud storage solutions like AWS S3, Cloudflare R2, or similar services to ensure scalable image delivery. Our cloud infrastructure experts can help architect the optimal storage and delivery pipeline for your media-rich applications.

Conclusion

Building rich text editors with Draft.js and react-draft-wysiwyg enables React applications to provide sophisticated text editing capabilities while maintaining code quality and user experience standards. The combination of Draft.js's flexible content model and react-draft-wysiwyg's accessible wrapper creates an approachable foundation that scales from simple formatting needs to complex collaborative editing scenarios.

Key takeaways from this guide:

• Start with react-draft-wysiwyg for quick implementation, then customize with Draft.js APIs as needed
• Implement proper state management using EditorState with appropriate conversion for persistence
• Customize the toolbar to match your application's user experience requirements
• Handle images and media with appropriate upload callbacks and backend integration
• Consider security by implementing content sanitization for user-generated content
• Optimize performance with debouncing and proper React patterns

As web applications increasingly require rich content creation tools, mastering these libraries positions developers to deliver compelling user experiences that meet modern content expectations. Whether you're building a content management system, a blogging platform, or a collaborative document editor, the techniques covered in this guide provide a solid foundation for implementing powerful rich text editing capabilities.

For teams looking to integrate sophisticated editorial workflows into their applications, our full-stack development team has extensive experience implementing custom content solutions that scale with user needs.

Sources

1. LogRocket: Build Rich Text Editors in React Using Draft.js and react-draft-wysiwyg
2. DhiWise: How to Build a Rich Text Editor with React Draft Wysiwyg
3. DEV Community: 10 Top Rich Text Editors for React Developers in 2025