Strapi rich text to HTML: render the field's actual format

Strapi documents Rich Text (Blocks) separately from its Markdown rich-text field. Confirm the configured field and inspect one actual response before choosing the rendering path. Strapi field types

Inspect one paragraph before building a converter

For a Blocks field, this original fixture represents a paragraph with an emphasized return deadline:

[
  {
    "type": "paragraph",
    "children": [
      {"type": "text", "text": "Return the keys by "},
      {"type": "text", "text": "Monday", "bold": true},
      {"type": "text", "text": "."}
    ]
  }
]

The reader should see one sentence, with “Monday” bold. Flattening the children into a plain string loses that mark. Printing the JSON exposes the data structure instead of presenting the sentence.

Do not feed this array to an Editor.js renderer just because both systems use the word “blocks.” The Editor.js conversion example expects a different document shape and tool-specific data. Keep the formats distinct at your application's boundary.

Use the Blocks renderer in a React frontend

Strapi maintains @strapi/blocks-react-renderer. Its BlocksRenderer accepts the array through the content prop and supports block and inline-modifier customizations. Match the package and its dependencies to your existing React project. Blocks React Renderer

Once that package is installed, this component renders the fixture rather than treating it as an HTML string:

import {
  BlocksRenderer,
  type BlocksContent
} from "@strapi/blocks-react-renderer";

export function ReturnInstructions(
  { content }: { content: BlocksContent }
) {
  return <section aria-label="Return instructions">
    <BlocksRenderer content={content} />
  </section>;
}

Pass the field's array, not the complete API response. A TypeScript annotation does not validate an unexpected network response at runtime; handle missing or invalid content in the application's data-loading layer.

The component produces React-rendered content. It does not itself write a standalone .html file. If your delivery requires a file, use the project's actual rendering or export process and inspect that output separately.

Keep children when customizing appearance

First render without overrides. Then add only the overrides your design needs. A paragraph component must render its children; omitting them can produce an empty paragraph even though the API contains the correct words.

Test the complete sentence after every customization. For headings, check the chosen level against the surrounding page. For links and images, apply your application's URL and asset rules rather than allowing arbitrary content to bypass them. Rendering a supported schema is not an authorization policy for external resources.

Keep the stored Blocks data as the source. Do not replace the field with a string of generated HTML merely to make a frontend shortcut work.

Check meaning in the reader view

Compare the response with the displayed result: paragraph order, words, emphasis, list nesting, headings, and any media your content uses. Resize the actual page to its narrow reading width. An image or long link may expose a layout issue that a plain paragraph does not.

For the return-instructions fixture, the expected result is “Return the keys by Monday.” with the deadline emphasized and the period retained. Complete the check against your saved record, then make future wording corrections in Strapi and render the updated data again.