diff --git a/web-console/src/bootstrap/ace.ts b/web-console/src/bootstrap/ace.ts
index 50ec648f562..1d8ea64d06a 100644
--- a/web-console/src/bootstrap/ace.ts
+++ b/web-console/src/bootstrap/ace.ts
@@ -18,6 +18,7 @@
import 'ace-builds/src-noconflict/ace'; // Import Ace editor and all the sub components used in the app
import 'ace-builds/src-noconflict/ext-language_tools';
+import 'ace-builds/src-noconflict/ext-searchbox';
import 'ace-builds/src-noconflict/theme-solarized_dark';
import '../ace-modes/dsql';
import '../ace-modes/hjson';
diff --git a/web-console/src/components/show-json/show-json.tsx b/web-console/src/components/show-json/show-json.tsx
index 18b331e41e4..c840c95e24b 100644
--- a/web-console/src/components/show-json/show-json.tsx
+++ b/web-console/src/components/show-json/show-json.tsx
@@ -16,10 +16,11 @@
* limitations under the License.
*/
-import { Button, ButtonGroup, Intent, TextArea } from '@blueprintjs/core';
+import { Button, ButtonGroup, Intent } from '@blueprintjs/core';
import copy from 'copy-to-clipboard';
import * as JSONBig from 'json-bigint-native';
import React from 'react';
+import AceEditor from 'react-ace';
import { useQueryManager } from '../../hooks';
import { Api, AppToaster, UrlBaser } from '../../singletons';
@@ -84,7 +85,18 @@ export const ShowJson = React.memo(function ShowJson(props: ShowJsonProps) {
{jsonState.loading ? (
) : (
-
+
)}