This document covers rendering of rich text content via the legacy Rich Text Editor, which was deprecated with the release of v5.37.0. For instructions on rendering of the new rich text content, please visit the Render Rich Text Content article.
What you'll learn
  • how to render rich text content from Headless CMS in React


One of the commonly used field types in our Headless CMS is a rich text field. This field uses link with several additional Webiny plugins. The output data structure of editorjs is an array of objectsexternal link.

You can render this data as you want by traversing the array and implementing renderers for each block type, but more often than not, you just want to use a predefined React component and move on.

To learn how to use Headless CMS GraphQL API, make sure to check out the Using GraphQL API key topic.

Rendering Rich Text Content

To render rich text content created with editorjs in your React app, Webiny provides a package @webiny/react-rich-text-renderer with a React component to do just that.


In your React app, install the following dependency:

Or if you prefer yarn:

Default Rendering

Fetch your data from Headless CMS, then pass it to the component like this:


Adding Custom Renderers

You can override the default renderers or add new renderers for your custom block types like this:


Styling the Output

Styles for default renderers are included in the package and you can import them into your app like this:

If you don’t want to use the default styles, skip this import and implement your own styling.

HTML Sanitization

Can I use this?

This feature is available since Webiny v5.37.2.

In order to minimize the possibility of cross-site scripting (XSS) attacksexternal link, the HTML that’s returned by the rich text editor is sanitized, which is done with the help of the sanitize-htmlexternal link library.

Sanitization Configuration

Use configureSanitization function to set your global sanitization preference. To provide sanitize configuration to specific component, use sanitizationConfig prop.


Please check sanitize-html configuration options on their GitHub pageexternal link.