diff --git a/packages/react-query-devtools/src/devtools.tsx b/packages/react-query-devtools/src/devtools.tsx
index 36e6148e37..7d6d0fcc4e 100644
--- a/packages/react-query-devtools/src/devtools.tsx
+++ b/packages/react-query-devtools/src/devtools.tsx
@@ -22,6 +22,7 @@ import {
   getResizeHandleStyle,
   getSidedProp,
   defaultPanelSize,
+  displayValue,
 } from './utils'
 import type { Corner, Side } from './utils'
 import {
@@ -846,7 +847,7 @@ const ActiveQuery = ({
                 overflow: 'auto',
               }}
             >
-              {JSON.stringify(activeQuery.queryKey, null, 2)}
+              {displayValue(activeQuery.queryKey, true)}
             </pre>
           </Code>
           <span
diff --git a/packages/react-query-devtools/src/utils.ts b/packages/react-query-devtools/src/utils.ts
index 43fe2c26fc..1bcad75982 100644
--- a/packages/react-query-devtools/src/utils.ts
+++ b/packages/react-query-devtools/src/utils.ts
@@ -117,11 +117,12 @@ export function useIsMounted() {
 /**
  * Displays a string regardless the type of the data
  * @param {unknown} value Value to be stringified
+ * @param {boolean} beautify Formats json to multiline
  */
-export const displayValue = (value: unknown) => {
+export const displayValue = (value: unknown, beautify: boolean = false) => {
   const { json } = SuperJSON.serialize(value)
 
-  return JSON.stringify(json)
+  return JSON.stringify(json, null, beautify ? 2 : undefined)
 }
 
 // Sorting functions