How to render rich text from Strapi into Astro page?

System Information
  • Strapi Version: v4.19.0
  • Operating System: Mac OSX Sonama 14.2.1
  • Database: SQLite
  • Node Version: v20.x
  • NPM Version:
  • Yarn Version:

I use Astro SSG. From an Astro page I fetch via GraphQL some rich content texts in Strapi, input via its Rich Text Editors (tried both Markdown and JSON Block). Now it comes to the rendering stage.

The Markdown version of content retrieved from Strapi looks like below:
“the contents:\n- point 1\n- point 2\n- point 3”

When cut-and-paste this to some online Markdown editors, it is just displayed “as-is” - no rendering into HTML. This whole content is just treated as some raw string. In other words, what is generated from Strapi and fetched from the database (as a blob/clob) is Not Markdown? How does Strapi preview it correctly on the other hand?

The same applied to the JSON version, where the Strapi editor just stores input contents as a JSON structure that resembles a DOM.

So I am wondering how useful these “rich text editor” support would be - given that out of the box they are just raw text and up to the developer to comprehend the structure within it to manually render the stuff. Or am I missing something here?

I understand there are mechanisms like using some react renderers or dangerouslyInnerHTML sort of stuff to help. But I wonder if it is the rightway to go. Besides, from Astro side I would like to keep things simple and minimal.

Any suggestion from the Strapi team?

1 Like

I’m having the similar issue where astro is unable to render the rich text blocks as html.