Implementation:Apache Druid ShowJson

Knowledge Sources	Apache_Druid
Domains	Web_Console, Data_Inspection
Last Updated	2026-02-10 10:00 GMT

Overview

ShowJson is a React component that fetches JSON data from a Druid API endpoint and displays it in a read-only Ace Editor with action buttons for refresh, download, copy, and raw viewing.

Description

The component uses the useQueryManager hook to asynchronously fetch data from the specified endpoint, applies an optional transformation, and pretty-prints it as formatted JSON using BigInt-safe serialization. The resulting JSON string is displayed in a read-only Ace Editor with the HJSON mode and Solarized Dark theme. Error messages are displayed inline in the editor when the fetch fails.

Usage

Used throughout the Druid web console for inspecting raw JSON responses from Druid API endpoints, such as supervisor payloads, datasource metadata, task payloads, and coordinator status.

Code Reference

Source Location

• Repository: Apache Druid
• File: web-console/src/components/show-json/show-json.tsx
• Lines: 1-110

Signature

export interface ShowJsonProps {
  endpoint: string;
  transform?: (x: any) => any;
  downloadFilename?: string;
}

export const ShowJson: React.NamedExoticComponent<ShowJsonProps>;

Import

import { ShowJson } from './components/show-json/show-json';

I/O Contract

Inputs

Name	Type	Required	Description
endpoint	string	Yes	The Druid API endpoint URL path to fetch JSON data from
transform	(x: any) => any	No	An optional transformation function applied to the response data before display
downloadFilename	string	No	If provided, enables a download button that saves the JSON with this filename

Outputs

Name	Type	Description
JSX.Element	div	A container with action buttons and a read-only AceEditor or Loader

Usage Examples

Displaying supervisor status JSON

<ShowJson
  endpoint={`/druid/indexer/v1/supervisor/${supervisorId}`}
  downloadFilename={`supervisor-${supervisorId}.json`}
/>

Related Pages

• Environment:Apache_Druid_Web_Console_Development