RichTextRenderer

Renders Contentstack JSON RTE (Rich Text Editor) content as React components.

Props

Prop	Type	Required	Default	Description
`json`	`{ children?: JSONRTENode[] }`	Yes	-	JSON RTE content from Contentstack
`...htmlProps`	`HTMLAttributes<HTMLDivElement>`	No	-	Standard div HTML attributes

Usage

1import RichTextRenderer from '@/components/atoms/RichTextRenderer';
2
3<RichTextRenderer 
4  json={content.copy}
5  className="prose prose-invert"
6/>

import RichTextRenderer from '@/components/atoms/RichTextRenderer';

<RichTextRenderer 
  json={content.copy}
  className="prose prose-invert"
/>

Supported Node Types

Type	Renders As
`doc`	Fragment (wrapper)
`paragraph` / `p`	`<p>`
`h1`	`<h1>`
`h2`	`<h2>` (with auto-generated ID)
`h3`	`<h3>`
`h4`	`<h4>`
`heading`	`<h1>`-`<h6>` (based on level attr)
`ul` / `list`	`<ul>`
`ol`	`<ol>`
`li` / `list-item`	`<li>`
`blockquote` / `block-quote`	`<blockquote>`
`a` / `link`	Next.js `<Link>`
`img` / `image`	`<MediaItem>` component
`code`	`<CodeBlockWithCopy>` (syntax-highlighted with copy button)
`embed`	`<div className="embed">`
`reference`	Link or MediaItem (based on display-type)
`table`	`<table>` (with responsive wrapper, colgroup, design system styles)
`tbody` / `thead`	`<tbody>` / `<thead>`
`tr`	`<tr>`
`th` / `td`	`<th>` / `<td>` (with colspan/rowspan from redactor-attributes)

Text Formatting

Text nodes support:

Bold: bold: true
Italic: italic: true
Underline: underline: true

Features

Auto-generated IDs: H2 headings get IDs for anchor links
Empty paragraph filtering: Removes empty paragraphs
Stable keys: Uses original index for consistent hydration
Link handling: Converts links to Next.js Link components
Image handling: Uses MediaItem component for images
Code blocks: Renders syntax-highlighted code with copy-to-clipboard functionality
Tables: Renders semantic HTML tables with responsive overflow, design system styles, colspan/rowspan support
Memoized: Uses useMemo for performance

Notes

Returns null if no children or all are filtered out
H2 headings automatically get IDs using generateHeadingId utility
Links use Next.js Link component with proper target/rel attributes
Images are rendered using the MediaItem component
Client-side component (uses React hooks)