I noticed recently after embarking on this project that most headless CMS vendors had terrible documentation when it came to actually figuring out how to render their content in React.
Some of them expect you to just grab a third party library like React Markdown and others have created their own renderers.
First things first though...
What is a renderer?
A renderer, also known as a "resolver", is a library that is responsible for converting the structured content stored in the CMS into a format that can be displayed on the front-end.
This typically involves converting the content into a specific markup language such as HTML, JSON or JSX, and applying a layout or template to it.
List of renderers
How to render content when using Contentful?
Contentful provides a library for rendering content in React called rich-text-react-renderer. You can find it here.
How to render content when using Sanity?
Sanity provides a library for rendering content in React called react-portabletext. You can find it here.
How to render content when using Strapi?
Strapi recommends a third party library for rendering their content in React called ReactMarkdown. You can find that library here.
How to render content when using Prismic?
Prismic provides a library for rendering content in React called PrismicRichText. You can find out more about it here.
How to render content when using StoryBlok?
StoryBlok provides a library for rendering content in React called storyblok-rich-text-renderer. You can find out more about it here.
Those are the only ones we have for now, but if you think any should be added to the list, please let us know at team@headlesstemplates.com.