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 
}

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