${product.name || 'Product Name'}
${product.description || 'Product description'}
$${product.price || '0.00'}
${child}`;
}
},
allowNonStandardTypes: true
});
```
## Configuration Options
The configuration options let developers control how JSON RTE content is converted to HTML. You can define custom elements, text wrappers, and allow non-standard types to extend rendering behavior.
#### customElementTypes (IJsonToHtmlElementTags)
The customElementTypes option defines the block-level elements you want to support in rich text.
**Function Signature**
**Parameters**
**Name**
**Type**
**Description**
attrs
string
HTML attributes represented as a string.
child
string
The rendered inner HTML content of the element.
jsonBlock
object
The full JSON block object. Use jsonBlock.attrs to access attributes.
extraProps
object (optional)
Additional context props passed from the rendering environment.
```
customElementTypes: {
// Custom info box component
infoBox: (attrs, child, jsonBlock) => {
const title = jsonBlock.attrs?.title || 'Information';
const icon = jsonBlock.attrs?.icon || 'ℹ️';
return `
`; } } ``` #### customTextWrapper (IJsonToHtmlTextTags) The customTextWrapper option defines inline text wrappers or marks used for applying formatting and effects to text within JSON RTE content. **Use Case:** Enables custom styles such as highlights, keyboard inputs, or branded inline elements in rich-text fields. **Function Signature** ``` (child: any, value: any) => string ``` **Parameters** **Name** **Type** **Description** child string The text content to wrap. value any The attribute value applied to the wrapper (for example, a color code, style, or effect). **Example** ``` customTextWrapper: { // Highlight text with custom colors highlight: (child, value) => { const colors = { yellow: '#ffeb3b', green: '#4caf50', blue: '#2196f3', red: '#f44336' }; const color = colors[value] || value; return `${child}`; }, // Custom text styling style: (child, value) => { const styles = { bold: 'font-weight: bold;', italic: 'font-style: italic;', underline: 'text-decoration: underline;', strikethrough: 'text-decoration: line-through;' }; const style = styles[value] || ''; return `${child}`; }, // Custom font sizes fontSize: (child, value) => { return `${child}`; } } ``` #### allowNonStandardTypes (boolean) The allowNonStandardTypes option enables the use of non-standard element types in JSON RTE content. **Use Case:** * **Custom Components:** Add branded elements such as info boxes, callouts, or product cards. * **Enhanced Text:** Format text with highlights, colors, or special fonts. * **Interactive Elements:** Insert interactive components, like buttons or widgets, into rich text. * **Brand Consistency:** Ensure rich text content aligns with your design system and styling standards. **Real World Example** ``` import { registerJsonRte } from '@contentstack/studio-react'; // Register custom JSON RTE components for a marketing website registerJsonRte({ customElementTypes: { // Product showcase within rich text productShowcase: (attrs, child, jsonBlock) => { const product = jsonBlock.attrs; return `${child}
${product.description || 'Product description'}
${child}