This feature is available since Webiny v5.37.0.
One of the commonly used field types in Headless CMS content models is the Rich Text field. This field uses Lexical Rich Text Editor to allow users to quickly create nicely formatted rich text content.
In this article we cover the steps to render the Headless CMS rich text content by using our React component
<RichTextLexicalRenderer/>, provided by the
Rendering of rich text content from Headless CMS consists of the following three steps:
- Install the
- Add Webiny theme styles to your project.
- Mount the
In your React app, install the following NPM package:
Or if you prefer Yarn:
To use the same theme styles that are configured in your Webiny project, copy the
apps/theme/theme.ts file into your React app.
Now you need to import and mount the
<RichTextLexicalRenderer /> component in your app, and pass the rich text content, and optionally theme styles.
Note that in this code sample we do not include the code to load the data from the API. Instead,
we use the imaginary
useCmsContent() hook to show where the content could come from.