diff --git a/components/JsonToHtml/renderOptions.tsx b/components/JsonToHtml/renderOptions.tsx
index 845813508..5d16a3bc6 100644
--- a/components/JsonToHtml/renderOptions.tsx
+++ b/components/JsonToHtml/renderOptions.tsx
@@ -309,6 +309,29 @@ export const renderOptions: RenderOptions = {
     )
   },
 
+  [RTETypeEnum.span]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    let props = extractPossibleAttributes(node.attrs)
+    const className = props.className
+
+    if (className) {
+      if (hasAvailableULFormat(className)) {
+        // @ts-ignore:  We want to set css modules classNames even if it does not correspond
+        // to an existing class in the module style sheet. Due to our css modules plugin for
+        // typescript, we cannot do this without the ts-ignore
+        props.className = styles[className]
+      }
+    }
+
+    return (
+      <span {...props}>{next(node.children, embeds, fullRenderOptions)}</span>
+    )
+  },
+
   [RTETypeEnum.reference]: (
     node: RTENode,
     embeds: EmbedByUid,
diff --git a/types/transitionTypes/rte/enums.ts b/types/transitionTypes/rte/enums.ts
index f4d6bd86c..29a76bf0d 100644
--- a/types/transitionTypes/rte/enums.ts
+++ b/types/transitionTypes/rte/enums.ts
@@ -27,6 +27,7 @@ export enum RTETypeEnum {
   ol = "ol",
   p = "p",
   reference = "reference",
+  span = "span",
   table = "table",
   tbody = "tbody",
   td = "td",