Render JSON RTE content using JSON RTE Serializer

There are certainly a ton of benefits of moving your content to the new JSON Rich Text Editor. Contentstack allows you to migrate your rich text content from your existing HTML-based RTE fields to the new JSON RTE fields for all entries of a content type in just a few minutes. To get started with our CLI, you first need to install it and authenticate yourself in the CLI session.

Additional Resource: Refer to our migration guide to perform the steps, understand the different flags you can use, and migrate the content safely without any data loss.

Serialization

Serializing JSON RTE means to convert the JSON response to HTML response. Given below is an example that shows how to convert value of json_rte to html_rte:

import Component from 'my-project'
import { jsonToHtml } from "@contentstack/json-rte-serializer"
function App() {
    const htmlValue = jsonToHtml({ JSON Value})
    return 
}

Deserialization

Deserializing JSON RTE means to convert the HTML response to JSON response. Given below is an example that shows how to convert value of html_rte to json_rte:

import Component from 'my-project'
import { htmlToJson } from "@contentstack/json-rte-serializer"
function App() {
    const htmlDomBody = new DOMParser().parseFromString("<p>This is Html Value</p>", 'text/html').body
    const jsonValue = htmlToJson(htmlDomBody)
    return 
}

Markdown Serialization

The Markdown Serialization function converts JSON data into Markdown format. This function is specifically designed to transform your JSON data into Markdown, simplifying text formatting for platforms that use Markdown.

Given below is an example that shows how to convert value of json_rte to markdown:

import Component from 'my-project'
import { jsonToMarkdown } from "@contentstack/json-rte-serializer"
function App() {
    const markdownValue = jsonToMarkdown({JSON Value})
    return 
}

Note: For detailed information please refer to our JSON RTE Serializer readme file.