diff --git a/desktop/app/src/index.tsx b/desktop/app/src/index.tsx
index 1bdbdb9a2..b2a1dd97f 100644
--- a/desktop/app/src/index.tsx
+++ b/desktop/app/src/index.tsx
@@ -103,6 +103,7 @@ export {default as DataInspector} from './ui/components/data-inspector/DataInspe
 export {default as ManagedDataInspector} from './ui/components/data-inspector/ManagedDataInspector';
 export {default as SearchableDataInspector} from './ui/components/data-inspector/SearchableDataInspector';
 export {default as DataDescription} from './ui/components/data-inspector/DataDescription';
+export {HighlightManager} from './ui/components/Highlight';
 export {default as Tabs} from './ui/components/Tabs';
 export {default as Tab} from './ui/components/Tab';
 export {default as Input} from './ui/components/Input';
diff --git a/desktop/app/src/ui/components/data-inspector/DataInspector.tsx b/desktop/app/src/ui/components/data-inspector/DataInspector.tsx
index 3f8852ed7..9752abfef 100644
--- a/desktop/app/src/ui/components/data-inspector/DataInspector.tsx
+++ b/desktop/app/src/ui/components/data-inspector/DataInspector.tsx
@@ -21,7 +21,7 @@ import {colors} from '../colors';
 import {clipboard} from 'electron';
 import React from 'react';
 import {TooltipOptions} from '../TooltipProvider';
-import {useHighlighter} from '../Highlight';
+import {useHighlighter, HighlightManager} from '../Highlight';
 
 export {DataValueExtractor} from './DataPreview';
 
@@ -136,6 +136,14 @@ type DataInspectorProps = {
    * Callback whenever delete action is invoked on current path.
    */
   onDelete?: DataInspectorDeleteValue | undefined | null;
+  /**
+   * Render callback that can be used to customize the rendering of object keys.
+   */
+  onRenderName?: (
+    path: Array<string>,
+    name: string,
+    highlighter: HighlightManager,
+  ) => React.ReactElement;
   /**
    * Callback when a value is edited.
    */
@@ -327,6 +335,7 @@ const DataInspector: React.FC<DataInspectorProps> = memo(
     parentPath,
     onExpanded,
     onDelete,
+    onRenderName,
     extractValue: extractValueProp,
     expanded: expandedPaths,
     name,
@@ -491,6 +500,7 @@ const DataInspector: React.FC<DataInspectorProps> = memo(
               collapsed={collapsed}
               onExpanded={onExpanded}
               onDelete={onDelete}
+              onRenderName={onRenderName}
               parentPath={path}
               depth={depth + 1}
               key={key}
@@ -530,12 +540,15 @@ const DataInspector: React.FC<DataInspectorProps> = memo(
     // create name components
     const nameElems = [];
     if (typeof name !== 'undefined') {
+      const text = onRenderName
+        ? onRenderName(path, name, highlighter)
+        : highlighter.render(name);
       nameElems.push(
         <Tooltip
           title={tooltips != null && tooltips[name]}
           key="name"
           options={nameTooltipOptions}>
-          <InspectorName>{highlighter.render(name)}</InspectorName>
+          <InspectorName>{text}</InspectorName>
         </Tooltip>,
       );
       nameElems.push(<span key="sep">: </span>);
diff --git a/desktop/app/src/ui/components/data-inspector/ManagedDataInspector.tsx b/desktop/app/src/ui/components/data-inspector/ManagedDataInspector.tsx
index b35d45025..c130ba6e0 100644
--- a/desktop/app/src/ui/components/data-inspector/ManagedDataInspector.tsx
+++ b/desktop/app/src/ui/components/data-inspector/ManagedDataInspector.tsx
@@ -12,7 +12,7 @@ import {PureComponent} from 'react';
 import DataInspector from './DataInspector';
 import React from 'react';
 import {DataValueExtractor} from './DataPreview';
-import {HighlightProvider} from '../Highlight';
+import {HighlightProvider, HighlightManager} from '../Highlight';
 
 export type ManagedDataInspectorProps = {
   /**
@@ -41,6 +41,14 @@ export type ManagedDataInspectorProps = {
    * Callback when a delete action is invoked.
    */
   onDelete?: (path: Array<string>) => void;
+  /**
+   * Render callback that can be used to customize the rendering of object keys.
+   */
+  onRenderName?: (
+    path: Array<string>,
+    name: string,
+    highlighter: HighlightManager,
+  ) => React.ReactElement;
   /**
    * Whether all objects and arrays should be collapsed by default.
    */
@@ -170,6 +178,7 @@ export default class ManagedDataInspector extends PureComponent<
           expanded={this.state.expanded}
           onExpanded={this.onExpanded}
           onDelete={this.props.onDelete}
+          onRenderName={this.props.onRenderName}
           expandRoot={this.props.expandRoot}
           collapsed={this.props.filter ? true : this.props.collapsed}
           tooltips={this.props.tooltips}