Question 1

How do I convert Draft.js raw state to HTML using Redraft?

Accepted Answer

Use Redraft with the joinOutput option set to true and ensure all renderers return strings; this combines blocks into an HTML string, as detailed in the options section of the README. You'll also need to join block-level output manually for full HTML generation.

Question 2

Redraft vs manually parsing Draft.js raw output?

Accepted Answer

Redraft automates the recursive rendering and handles decorators with built-in callbacks, reducing boilerplate and errors compared to manual parsing. However, it adds dependency overhead and requires learning its API, whereas manual parsing offers more low-level control but is more error-prone.

Question 3

Can I use Redraft with React Native?

Accepted Answer

Yes, but you might need a polyfill for String.fromCodePoint, as noted in the common issues section of the README. The library itself is lightweight and works in React Native environments with proper setup for text rendering.

Question 4

How to handle images or custom media entities in Redraft?

Accepted Answer

Define an entity renderer in the renderers object, similar to the LINK example, passing children and data to customize output. For atomic blocks, access metadata via keys and data parameters to render components like images dynamically.

Question 5

Does Redraft support server-side rendering in frameworks like Next.js?

Accepted Answer

Yes, Redraft can output HTML strings suitable for SSR, but you must execute JavaScript on the server to run the renderer callbacks. In Next.js, this can be done in getServerSideProps or during static generation with proper Node.js setup.

Question 6

How to implement nested lists with Redraft?

Accepted Answer

Use the depth and keys parameters in block renderers for list items, as shown in the unordered-list-item example, to apply className or styling based on nesting level. This allows rendering hierarchical structures similar to Draft.js editor behavior.

Redraft

What is Redraft?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions