diff --git a/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx b/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx
index 6c3e49bfa..0adfd305c 100644
--- a/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx
+++ b/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx
@@ -16,6 +16,7 @@ export const Visualization2D: React.FC<
   {
     root: Id;
     nodes: Map<Id, UINode>;
+    snapshot?: String;
     hoveredNode?: Id;
     selectedNode?: Id;
     onSelectNode: (id: Id) => void;
@@ -25,6 +26,7 @@ export const Visualization2D: React.FC<
 > = ({
   root,
   nodes,
+  snapshot,
   hoveredNode,
   selectedNode,
   onSelectNode,
@@ -59,6 +61,12 @@ export const Visualization2D: React.FC<
           height: toPx(rootBounds.height),
         }}>
         <OuterBorder />
+        {snapshot ? (
+          <img
+            src={'data:image/jpeg;base64,' + snapshot}
+            style={{maxWidth: '100%'}}
+          />
+        ) : null}
         <Visualization2DNode
           nodeId={root}
           nodes={nodes}
diff --git a/desktop/plugins/public/ui-debugger/components/main.tsx b/desktop/plugins/public/ui-debugger/components/main.tsx
index f3874607c..32155d011 100644
--- a/desktop/plugins/public/ui-debugger/components/main.tsx
+++ b/desktop/plugins/public/ui-debugger/components/main.tsx
@@ -29,6 +29,7 @@ export function Component() {
   const instance = usePlugin(plugin);
   const rootId = useValue(instance.rootId);
   const nodes: Map<Id, UINode> = useValue(instance.nodes);
+  const snapshot: String | undefined = useValue(instance.snapshot);
 
   const [showPerfStats, setShowPerfStats] = useState(false);
   const [selectedNode, setSelectedNode] = useState<Id | undefined>(undefined);
@@ -71,6 +72,7 @@ export function Component() {
             <Visualization2D
               root={rootId}
               nodes={nodes}
+              snapshot={snapshot}
               hoveredNode={hoveredNode}
               onHoverNode={setHoveredNode}
               selectedNode={selectedNode}
diff --git a/desktop/plugins/public/ui-debugger/index.tsx b/desktop/plugins/public/ui-debugger/index.tsx
index 382e4b237..3786079a3 100644
--- a/desktop/plugins/public/ui-debugger/index.tsx
+++ b/desktop/plugins/public/ui-debugger/index.tsx
@@ -23,7 +23,9 @@ export function plugin(client: PluginClient<Events>) {
   });
 
   const nodesAtom = createState<Map<Id, UINode>>(new Map());
-  client.onMessage('subtreeUpdate', ({nodes}) => {
+  const snapshotAtom = createState<String | undefined>(undefined);
+  client.onMessage('subtreeUpdate', ({nodes, snapshot}) => {
+    snapshotAtom.set(snapshot);
     nodesAtom.update((draft) => {
       for (const node of nodes) {
         draft.set(node.id, node);
@@ -36,7 +38,7 @@ export function plugin(client: PluginClient<Events>) {
     nodesAtom.set(new Map(nodes.map((node) => [node.id, node])));
   });
 
-  return {rootId, nodes: nodesAtom, perfEvents};
+  return {rootId, snapshot: snapshotAtom, nodes: nodesAtom, perfEvents};
 }
 
 export {Component} from './components/main';
diff --git a/desktop/plugins/public/ui-debugger/types.tsx b/desktop/plugins/public/ui-debugger/types.tsx
index b64d463e2..be9089fb9 100644
--- a/desktop/plugins/public/ui-debugger/types.tsx
+++ b/desktop/plugins/public/ui-debugger/types.tsx
@@ -10,7 +10,12 @@
 export type Events = {
   init: {rootId: string};
   nativeScan: {txId: number; nodes: UINode[]};
-  subtreeUpdate: {txId: number; nodes: UINode[]};
+  subtreeUpdate: {
+    txId: number;
+    rootId: String;
+    nodes: UINode[];
+    snapshot: String;
+  };
   perfStats: PerfStatsEvent;
 };