Warning
You're browsing the documentation for an old version of Webiny. Consider upgrading your project to Webiny 5.40.x.
What you'll learn
  • how to render rich text content from Headless CMS in React

Overview
anchor

One of the commonly used field types in our Headless CMS is a rich text field. This field uses https://editorjs.io/external 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
anchor

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.

Installation
anchor

In your React app, install the following dependency:

Or if you prefer yarn:

Default Rendering
anchor

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

myView.tsx

Adding Custom Renderers
anchor

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

myView.tsx

Styling the Output
anchor

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.

FAQ
anchor

I'm Not Using React. How Do I Render This Using Other Frameworks?
anchor

The rendering implementation is really simple and straightforward. You can find the full code in our repoexternal link. Using that as a reference, you can quickly put together a renderer in the framework of your choice.