# Exploring the JSON Rich Text Editor

### About this export

| Field | Value |
| --- | --- |
| **content_type** | standalone_content |
| **platform** | contentstack-academy |
| **source_url** | https://www.contentstack.com/academy/content/exploring-the-json-rich-text-editor |
| **slug** | exploring-the-json-rich-text-editor |
| **title** | Exploring the JSON Rich Text Editor |
| **markdown_file_url** | /academy/md/content/exploring-the-json-rich-text-editor.md |
| **generated_at** | 2026-05-04T05:36:57.705Z |

> **Academy MD v3** — standalone Academy content entry (not a multi-lesson course export).

## Overview

### Description

Contentstack’s Rich Text Editor offers a powerful, customizable interface for content editors, backed by robust developer features that allow complete control over the HTML output.

## Key Features for Content Editors

*   Rich media embedding (images, videos, tables)
    
*   Integration with external systems (e.g., Cloudinary)
    
*   AI-assisted content enhancements
    
*   Embedding and linking other content entries
    

## Configuring the Rich Text Field

### Basic Configuration

*   **Inline formatting:** Bold, Italic, Underline
    
*   **Block formatting:** Headers, Paragraphs
    

### Advanced Configuration

*   Includes rich media, tables, and embeds
    

### Custom Configuration

*   Selectively enable or disable features
    
*   Useful for restricting options for SEO or accessibility purposes (e.g., avoiding multiple H1 tags)
    

## Embedding and External References

*   **Entries:** Embed full entries directly within Rich Text.
    
*   **Assets:** Embed images or videos directly, either from internal assets or external systems like Cloudinary.
    

## Customizing HTML Output

The Rich Text Editor outputs structured JSON, which developers can convert into customized HTML using the Contentstack Delivery SDK utility functions.

### JSON Structure

*   Rich Text content is stored as JSON with clear semantic descriptions.
    
*   Example JSON snippet:
    

```
{
 "type": "paragraph",
 "children": [
 { "text": "Rich", "italic": true },
 { "text": " text editor", "bold": true }
 ]
}
```

### Converting JSON to HTML

Use the built-in utility function:

```
import { jsonToHtml } from '@contentstack/utils';
const htmlOutput = jsonToHtml(entry.content);
```

## Customizing Rendered HTML

Customize the output further with render options:

```
const renderOptions = {
 p: (node, next) => (node.children[0].text.trim() === '' ? '' : `<p>${next(node.children)}</p>`),
 a: (node, next) => `<a href="${node.attrs.href}" rel="noopener nofollow">${next(node.children)}</a>`
};
const htmlOutput = jsonToHtml(entry.content, renderOptions);
```

### Example Use Cases

*   Remove empty paragraphs to keep markup clean.
    
*   Add SEO-friendly attributes to links automatically.
    
*   Customize image rendering for optimal performance (lazy loading, image optimization).
    

## Handling Embedded Entries and Assets

### Embedded Entries

When referencing another entry:

```
const renderOptions = {
 embedded_entry: (node) => `<div class="embedded-entry">${node.entry.title}</div>`
};
```

### Cloudinary Assets

Customize Cloudinary images dynamically:

```
const renderOptions = {
 cloudinary: (node) => `<img src="${node.attrs.secure_url}" alt="${node.attrs.alt}" loading="lazy">`
};
```

## Advanced Image Customization

Add dynamic parameters to Cloudinary images:

```
function customCloudinaryImage(asset, metadata) {
 const params = 'w_800,h_450,f_auto,q_90,c_fill';
 return `<img src="${asset.url}?${params}" alt="${asset.alt}" loading="lazy">`;
}
```

## Best Practices

*   Clearly separate editorial content input from HTML rendering.
    
*   Allow content editors freedom within the Rich Text editor, and handle all necessary cleanup in the rendering logic.
    
*   Use JSON rendering hooks to avoid manual HTML adjustments by editors.
    

## Resources

*   [Contentstack Documentation](https://www.contentstack.com/docs)
    
*   [Discord Community](https://community.contentstack.com)

## Supplement for indexing

### Content summary

Contentstack’s Rich Text Editor offers a powerful, customizable interface for content editors, backed by robust developer features that allow complete control over the HTML output. Key Features for Content Editors Rich media embedding (images, videos, tables) Integration with external systems (e.g., Cloudinary) AI-assisted content enhancements Embedding and linking other content entries Configuring the Rich Text Field Basic Configuration Inline formatting: Bold, Italic, Underline Block formatting: Headers, Paragraphs Advanced Configuration Includes rich media, tables, and embeds Custom Configuration Selectively enable or disable features Useful for restricting options for SEO or accessibility purposes (e.g., avoiding multiple H1 tags) Embedding and External References Entries: Embed full entries directly within Rich Text. Assets: Embed images or videos directly, either from internal asse

### Retrieval tags

- Contentstack Academy
- exploring-the-json-rich-text-editor
- standalone content

### Indexing notes

Single-page standalone entry; index as one primary chunk. Slug: exploring-the-json-rich-text-editor.

### Asset references

_No image or video thumbnail URLs were extracted._

### External links

| Label | URL |
| --- | --- |
| Contentstack Academy home | `https://www.contentstack.com/academy/` |
| Training instance setup | `https://www.contentstack.com/academy/training-instance` |
| Academy playground (GitHub) | `https://github.com/contentstack/contentstack-academy-playground` |
| Contentstack documentation | `https://www.contentstack.com/docs/` |
| Contentstack Documentation | `https://www.contentstack.com/docs` |
| Discord Community | `https://community.contentstack.com` |