Implementation:Apache Druid JsonInput

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

Overview

JsonInput is an Ace Editor-based JSON/HJSON editing component with real-time validation, error highlighting, and optional autocompletion.

Description

The component renders an Ace Editor in HJSON mode with Solarized Dark theme, providing a rich editing experience for JSON configuration values. It parses input using HJSON (a more human-friendly JSON superset), validates changes in real-time, and reports errors both via a callback and via a clickable error message overlay that navigates the cursor to the error location. The component supports BigInt-safe JSON serialization and optional custom autocompletion rules.

Usage

Used in the Druid web console for editing ingestion specs, query contexts, compaction configurations, and any other JSON-structured configuration inputs.

Code Reference

Source Location

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

Signature

export function extractRowColumnFromHjsonError(
  error: Error,
): { row: number; column: number } | undefined;

export const JsonInput: React.NamedExoticComponent<JsonInputProps>;

Import

import { JsonInput } from './components/json-input/json-input';

I/O Contract

Inputs

Name	Type	Required	Description
value	any	Yes	The JSON value to display and edit
onChange	(value: any) => void	No	Callback fired with the parsed JSON value when input is valid; absence makes the editor read-only
setError	(error: Error or undefined) => void	No	Callback to propagate parse errors to the parent component
placeholder	string	No	Placeholder text shown when the editor is empty
focus	boolean	No	Whether the editor should auto-focus on mount
width	string	No	CSS width of the editor (defaults to '100%')
height	string	No	CSS height of the editor (defaults to '8vh')
showLineNumbers	boolean	No	Whether to display line numbers in the gutter
issueWithValue	(value: any) => string or undefined	No	Custom validation function returning an error message if the value is invalid
jsonCompletions	JsonCompletionRule[]	No	Autocompletion rules for context-aware JSON key/value suggestions

Outputs

Name	Type	Description
JSX.Element	div	A container div wrapping the AceEditor and an optional error message overlay

Usage Examples

Editable JSON input with error handling

<JsonInput
  value={ingestionSpec}
  onChange={setIngestionSpec}
  setError={setJsonError}
  height="400px"
  showLineNumbers
  issueWithValue={spec => {
    if (!spec?.type) return 'Spec must have a type';
    return undefined;
  }}
/>

Related Pages

• Environment:Apache_Druid_Web_Console_Development