diff --git a/src/components/JsonField.tsx b/src/components/JsonField.tsx
new file mode 100644
index 000000000..11ae46079
--- /dev/null
+++ b/src/components/JsonField.tsx
@@ -0,0 +1,286 @@
+import * as React from "react";
+import {
+  useState,
+  useRef,
+  useEffect,
+  useImperativeHandle,
+  forwardRef,
+} from "react";
+import CopyIcon from "./icons/CopyIcon";
+import XCloseIcon from "./icons/XCloseIcon";
+import { SettingData } from "../interfaces";
+
+export interface JsonFieldProps {
+  setting: SettingData;
+  value?: any;
+  disabled?: boolean;
+  readOnly?: boolean;
+  onChange?: (value: any) => void;
+}
+
+export interface JsonFieldHandle {
+  getValue(): any;
+  clear(): void;
+}
+
+const JsonField = forwardRef<JsonFieldHandle, JsonFieldProps>(
+  function JsonField({ setting, value, disabled, readOnly, onChange }, ref) {
+    const [text, setText] = useState(() => valueToText(value));
+    const [jsonError, setJsonError] = useState<string | null>(null);
+    const [copied, setCopied] = useState(false);
+    const [copyFailed, setCopyFailed] = useState(false);
+    const [previousText, setPreviousText] = useState<string | null>(null);
+    const [clearFeedback, setClearFeedback] = useState(false);
+    const [focused, setFocused] = useState(false);
+
+    const copyTimeoutId = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const clearFeedbackTimeoutId = useRef<ReturnType<typeof setTimeout> | null>(
+      null
+    );
+
+    // Sync external value changes to internal text (replaces UNSAFE_componentWillReceiveProps).
+    // Uses reference equality: callers must not pass a new object literal on every render
+    // (e.g. value={{ key: "val" }}), or in-progress edits will be wiped. Values sourced
+    // from Redux state are stable references and satisfy this requirement.
+    const [prevValue, setPrevValue] = useState(value);
+    if (prevValue !== value) {
+      setPrevValue(value);
+      setText(valueToText(value));
+      setJsonError(null);
+      setPreviousText(null);
+      setClearFeedback(false);
+      setCopied(false);
+      setCopyFailed(false);
+    }
+
+    useTimeoutCleanup({
+      refs: [copyTimeoutId, clearFeedbackTimeoutId],
+      deps: [value],
+    });
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        getValue() {
+          const { parsed, error } = parseJson(text);
+          return error ? undefined : parsed;
+        },
+        clear() {
+          cancelTimer(clearFeedbackTimeoutId);
+          cancelTimer(copyTimeoutId);
+          setText("");
+          setJsonError(null);
+          setCopied(false);
+          setCopyFailed(false);
+          setPreviousText(null);
+          setClearFeedback(false);
+          if (onChange) onChange(null);
+        },
+      }),
+      [text, onChange]
+    );
+
+    function handleChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
+      const newText = e.target.value;
+      const { parsed, error } = parseJson(newText);
+      cancelTimer(clearFeedbackTimeoutId);
+      cancelTimer(copyTimeoutId);
+      setText(newText);
+      setJsonError(error);
+      setPreviousText(null);
+      setClearFeedback(false);
+      setCopied(false);
+      setCopyFailed(false);
+      if (!error && onChange) {
+        onChange(newText.trim() ? parsed : null);
+      }
+    }
+
+    function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
+      if ((e.ctrlKey || e.metaKey) && e.key === "z" && previousText !== null) {
+        e.preventDefault();
+        cancelTimer(clearFeedbackTimeoutId);
+        const { parsed, error } = parseJson(previousText);
+        setText(previousText);
+        setJsonError(error);
+        setPreviousText(null);
+        setClearFeedback(false);
+        if (!error && onChange) {
+          onChange(previousText.trim() ? parsed : null);
+        }
+      }
+    }
+
+    function handleCopy() {
+      cancelTimer(copyTimeoutId);
+
+      function applyCopyResult(success: boolean) {
+        setCopied(success);
+        setCopyFailed(!success);
+        copyTimeoutId.current = setTimeout(() => {
+          setCopied(false);
+          setCopyFailed(false);
+          copyTimeoutId.current = null;
+        }, 2000);
+      }
+
+      if (!navigator.clipboard) {
+        applyCopyResult(false);
+        return;
+      }
+      navigator.clipboard.writeText(text).then(
+        () => applyCopyResult(true),
+        () => applyCopyResult(false)
+      );
+    }
+
+    function handleClearClick() {
+      cancelTimer(clearFeedbackTimeoutId);
+      cancelTimer(copyTimeoutId);
+      setClearFeedback(true);
+      clearFeedbackTimeoutId.current = setTimeout(() => {
+        setClearFeedback(false);
+        clearFeedbackTimeoutId.current = null;
+      }, 5000);
+      setText("");
+      setJsonError(null);
+      setCopied(false);
+      setCopyFailed(false);
+      setPreviousText(text);
+      if (onChange) onChange(null);
+    }
+
+    // Prevents buttons from stealing focus from the textarea.
+    function preventButtonBlur(e: React.MouseEvent) {
+      e.preventDefault();
+    }
+
+    const textareaId = `json-field-${setting.key}`;
+    const descId = setting.description ? `json-desc-${setting.key}` : undefined;
+    const errorId = `json-error-${setting.key}`;
+    const showErrorMsg = focused || !!jsonError;
+    const describedBy =
+      [descId, jsonError ? errorId : undefined].filter(Boolean).join(" ") ||
+      undefined;
+    const isEmpty = !text;
+
+    return (
+      <div
+        className={`form-group json-field-group${
+          jsonError ? " field-error" : ""
+        }`}
+      >
+        <label className="control-label" htmlFor={textareaId}>
+          {setting.label}
+          {setting.required && <span className="required-field">Required</span>}
+        </label>
+        <div className="json-field-textarea-wrap">
+          <textarea
+            id={textareaId}
+            className="form-control"
+            name={setting.key}
+            value={text}
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            onFocus={() => setFocused(true)}
+            onBlur={() => setFocused(false)}
+            disabled={disabled}
+            readOnly={readOnly}
+            aria-invalid={jsonError ? true : undefined}
+            aria-describedby={describedBy}
+          />
+          <div className="json-field-actions">
+            <span className="json-field-copied-feedback" aria-live="polite">
+              {copied ? "Copied!" : ""}
+            </span>
+            <span
+              className="json-field-copy-failed-feedback"
+              aria-live="assertive"
+            >
+              {copyFailed ? "Copy failed." : ""}
+            </span>
+            <span className="json-field-cleared-feedback" aria-live="polite">
+              {clearFeedback ? "Cleared! Ctrl-Z / Cmd-Z to recover." : ""}
+            </span>
+            <button
+              type="button"
+              aria-label="Copy to clipboard"
+              onClick={handleCopy}
+              onMouseDown={preventButtonBlur}
+              disabled={isEmpty}
+            >
+              <CopyIcon />
+            </button>
+            <button
+              type="button"
+              aria-label="Clear field"
+              onClick={handleClearClick}
+              onMouseDown={preventButtonBlur}
+              disabled={disabled || readOnly || isEmpty}
+            >
+              <XCloseIcon />
+            </button>
+          </div>
+        </div>
+        {setting.description && (
+          <p
+            id={descId}
+            className="description"
+            dangerouslySetInnerHTML={{ __html: setting.description }}
+          />
+        )}
+        {showErrorMsg && (
+          <p id={errorId} className="json-field-error-msg">
+            {jsonError ?? ""}
+          </p>
+        )}
+      </div>
+    );
+  }
+);
+
+JsonField.displayName = "JsonField";
+
+/**
+ * Hook to set up timer cleanup when the specified dependency array changes.
+ *
+ * Note that there's no body in the contained `useEffect`. It just returns a
+ * cleanup function that will be invoked before the next run or unmount.
+ *
+ * @param refs - Refs holding active timeout IDs to cancel on cleanup.
+ * @param deps - Dependency array that triggers the cleanup; defaults to `[]` (unmount only).
+ */
+function useTimeoutCleanup({
+  refs,
+  deps = [],
+}: {
+  refs: React.MutableRefObject<ReturnType<typeof setTimeout> | null>[];
+  deps?: React.DependencyList;
+}) {
+  useEffect(() => () => refs.forEach(cancelTimer), deps);
+}
+
+function cancelTimer(
+  ref: React.MutableRefObject<ReturnType<typeof setTimeout> | null>
+) {
+  if (ref.current) {
+    clearTimeout(ref.current);
+    ref.current = null;
+  }
+}
+
+function valueToText(value: any): string {
+  if (value === null || value === undefined) return "";
+  return JSON.stringify(value, null, 2);
+}
+
+function parseJson(s: string): { parsed: any; error: string | null } {
+  if (!s.trim()) return { parsed: null, error: null };
+  try {
+    return { parsed: JSON.parse(s), error: null };
+  } catch (err) {
+    return { parsed: null, error: (err as Error).message };
+  }
+}
+
+export default JsonField;
diff --git a/src/components/ProtocolFormField.tsx b/src/components/ProtocolFormField.tsx
index 88c918ddd..353dd1b97 100644
--- a/src/components/ProtocolFormField.tsx
+++ b/src/components/ProtocolFormField.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 import EditableInput from "./EditableInput";
 import ColorPicker from "./ColorPicker";
+import JsonField, { JsonFieldHandle } from "./JsonField";
 import { Button } from "library-simplified-reusable-components";
 import InputList from "./InputList";
 import { SettingData, CustomListsSetting } from "../interfaces";
@@ -13,6 +14,8 @@ export interface ProtocolFormFieldProps {
     | string
     | string[]
     | object[]
+    | object
+    | null
     | Array<string | object | JSX.Element>
     | JSX.Element;
   altValue?: string;
@@ -43,6 +46,7 @@ export default class ProtocolFormField extends React.Component<
   private inputListRef = React.createRef<InputList>();
   private colorPickerRef = React.createRef<ColorPicker>();
   private elementRef = React.createRef<EditableInput>();
+  private jsonFieldRef = React.createRef<JsonFieldHandle>();
   static defaultProps = {
     readOnly: false,
   };
@@ -63,6 +67,8 @@ export default class ProtocolFormField extends React.Component<
         ? this.renderListSetting(setting)
         : setting.type === "color-picker"
         ? this.renderColorPickerSetting(setting)
+        : setting.type === "json"
+        ? this.renderJsonSetting(setting)
         : this.renderSetting(setting);
     // Special handling for hidden settings.
     return setting.hidden ? this.renderHiddenElement(element) : element;
@@ -208,6 +214,19 @@ export default class ProtocolFormField extends React.Component<
     );
   }
 
+  renderJsonSetting(setting: SettingData): JSX.Element {
+    return (
+      <JsonField
+        ref={this.jsonFieldRef}
+        setting={setting}
+        value={defaultValueIfMissing(this.props.value, setting.default)}
+        disabled={this.props.disabled}
+        readOnly={this.props.readOnly}
+        onChange={this.props.onChange}
+      />
+    );
+  }
+
   labelAndDescription(setting: SettingData): JSX.Element[] {
     const label = <label key={setting.label}>{setting.label}</label>;
     const description = setting.description && (
@@ -236,6 +255,9 @@ export default class ProtocolFormField extends React.Component<
   }
 
   getValue() {
+    if (this.jsonFieldRef.current) {
+      return this.jsonFieldRef.current.getValue();
+    }
     return this.findRef().getValue();
   }
 
@@ -249,6 +271,7 @@ export default class ProtocolFormField extends React.Component<
     element?.setState({ value: random });
   }
 
+  // Excludes jsonFieldRef: JsonFieldHandle lacks setState, which randomize() calls.
   findRef() {
     return (this.inputListRef?.current ||
       this.elementRef?.current ||
@@ -256,6 +279,10 @@ export default class ProtocolFormField extends React.Component<
   }
 
   clear() {
+    if (this.jsonFieldRef.current) {
+      this.jsonFieldRef.current.clear();
+      return;
+    }
     const element = this.findRef();
     if (element && element.clear) {
       element.clear();
diff --git a/src/components/icons/CopyIcon.tsx b/src/components/icons/CopyIcon.tsx
new file mode 100644
index 000000000..6a43d8d5f
--- /dev/null
+++ b/src/components/icons/CopyIcon.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+
+const CopyIcon = (): JSX.Element => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    aria-hidden="true"
+  >
+    <path d="M16 1H4C2.9 1 2 1.9 2 3v14h2V3h12V1zm3 4H8C6.9 5 6 5.9 6 7v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" />
+  </svg>
+);
+
+export default CopyIcon;
diff --git a/src/interfaces.ts b/src/interfaces.ts
index 9fb366d67..a513427a0 100644
--- a/src/interfaces.ts
+++ b/src/interfaces.ts
@@ -299,6 +299,7 @@ export type SpecificSettingType =
   | "date"
   | "date-picker"
   | "image"
+  | "json"
   | "list"
   | "menu"
   | "select"
diff --git a/src/stylesheets/app.scss b/src/stylesheets/app.scss
index 77d626e2b..da72757b8 100644
--- a/src/stylesheets/app.scss
+++ b/src/stylesheets/app.scss
@@ -42,6 +42,7 @@ $fontfamily: 'Open Sans', sans-serif;
 @import "header";
 @import "icon";
 @import "individual_admin_edit_form";
+@import "json_field";
 @import "input_list";
 @import "lane_editor";
 @import "lanes";
diff --git a/src/stylesheets/colors.scss b/src/stylesheets/colors.scss
index 80913e047..11a12fd4c 100644
--- a/src/stylesheets/colors.scss
+++ b/src/stylesheets/colors.scss
@@ -10,6 +10,7 @@ $red-tint: tint($red, 30%);
 $light-gray: #D7D4D0;
 $medium-gray: #DDD;
 $medium-dark-gray: #AAA;
+$gray-accessible: #767676;
 $dark-gray: #080807;
 $gray-tint: #F5F5F4;
 $gray-border: #CCCCCC;
diff --git a/src/stylesheets/json_field.scss b/src/stylesheets/json_field.scss
new file mode 100644
index 000000000..20a71c07f
--- /dev/null
+++ b/src/stylesheets/json_field.scss
@@ -0,0 +1,91 @@
+.json-field-group {
+  // The global .field-error .description rule would color the setting
+  // description red; only the dedicated error element should be red.
+  &.field-error .description {
+    color: inherit;
+  }
+
+  .json-field-error-msg {
+    font-size: 0.8rem;
+    line-height: 1.5;
+    color: $red;
+    margin-top: 5px;
+    min-height: 1.5em;
+  }
+}
+
+.json-field-textarea-wrap {
+  position: relative;
+
+  textarea {
+    padding-right: 3.5em;
+  }
+
+  .json-field-actions {
+    display: flex;
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    align-items: center;
+    gap: 2px;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.1s ease;
+
+    .json-field-copied-feedback,
+    .json-field-copy-failed-feedback,
+    .json-field-cleared-feedback {
+      font-size: 0.75em;
+      white-space: nowrap;
+      padding-right: 2px;
+    }
+
+    .json-field-copied-feedback,
+    .json-field-cleared-feedback {
+      color: $blue-dark;
+    }
+
+    .json-field-copy-failed-feedback {
+      color: $red;
+    }
+
+    button {
+      background: transparent;
+      border: none;
+      padding: 3px;
+      cursor: pointer;
+      color: $gray-accessible;
+      line-height: 1;
+
+      svg {
+        display: block;
+        height: 1em;
+        width: 1em;
+        fill: currentColor;
+      }
+
+      &:hover:not(:disabled) {
+        color: $dark-gray;
+      }
+
+      &:focus-visible {
+        outline: 2px solid $blue-dark;
+        outline-offset: 2px;
+        border-radius: 2px;
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+        color: $medium-dark-gray;
+      }
+    }
+  }
+
+  &:focus-within,
+  &:hover {
+    .json-field-actions {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+}
diff --git a/tests/jest/components/JsonField.test.tsx b/tests/jest/components/JsonField.test.tsx
new file mode 100644
index 000000000..582bd017c
--- /dev/null
+++ b/tests/jest/components/JsonField.test.tsx
@@ -0,0 +1,518 @@
+import * as React from "react";
+import { render, screen, act, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import JsonField, { JsonFieldHandle } from "../../../src/components/JsonField";
+
+const setting = {
+  key: "my_json",
+  label: "JSON Setting",
+  description: "<p>A JSON field</p>",
+};
+
+const requiredSetting = { ...setting, required: true };
+
+describe("JsonField", () => {
+  it("renders textarea with label and description", () => {
+    render(<JsonField setting={setting} />);
+    expect(screen.getByLabelText("JSON Setting")).toBeInstanceOf(
+      HTMLTextAreaElement
+    );
+    expect(screen.getByText("A JSON field")).toBeInTheDocument();
+  });
+
+  it("shows empty textarea for null value", () => {
+    render(<JsonField setting={setting} value={null} />);
+    const ta = screen.getByLabelText("JSON Setting") as HTMLTextAreaElement;
+    expect(ta.value).toBe("");
+  });
+
+  it("shows empty textarea when no value prop provided", () => {
+    render(<JsonField setting={setting} />);
+    const ta = screen.getByLabelText("JSON Setting") as HTMLTextAreaElement;
+    expect(ta.value).toBe("");
+  });
+
+  it("displays pretty-printed JSON for an object value", () => {
+    const obj = { foo: "bar", baz: 42 };
+    render(<JsonField setting={setting} value={obj} />);
+    const ta = screen.getByLabelText("JSON Setting") as HTMLTextAreaElement;
+    expect(ta.value).toBe(JSON.stringify(obj, null, 2));
+  });
+
+  it("displays pretty-printed JSON for an array value", () => {
+    const arr = [1, "two", { three: 3 }];
+    render(<JsonField setting={setting} value={arr} />);
+    const ta = screen.getByLabelText("JSON Setting") as HTMLTextAreaElement;
+    expect(ta.value).toBe(JSON.stringify(arr, null, 2));
+  });
+
+  it("resets textarea when value prop changes externally", () => {
+    const { rerender } = render(
+      <JsonField setting={setting} value={{ a: 1 }} />
+    );
+    const ta = screen.getByLabelText("JSON Setting") as HTMLTextAreaElement;
+    expect(ta.value).toBe(JSON.stringify({ a: 1 }, null, 2));
+
+    rerender(<JsonField setting={setting} value={{ b: 2 }} />);
+    expect(ta.value).toBe(JSON.stringify({ b: 2 }, null, 2));
+  });
+
+  it("shows inline error for invalid JSON input", () => {
+    render(<JsonField setting={setting} />);
+    const ta = screen.getByLabelText("JSON Setting");
+    fireEvent.change(ta, { target: { value: "not valid json" } });
+    expect(screen.getByText(/unexpected token|expected/i)).toBeInTheDocument();
+  });
+
+  it("clears the error when input becomes valid JSON", () => {
+    render(<JsonField setting={setting} />);
+    const ta = screen.getByLabelText("JSON Setting");
+
+    fireEvent.change(ta, { target: { value: "{invalid" } });
+    expect(screen.getByText(/unexpected token|expected/i)).toBeInTheDocument();
+
+    fireEvent.change(ta, { target: { value: '{"key":"value"}' } });
+    expect(
+      screen.queryByText(/unexpected token|expected/i)
+    ).not.toBeInTheDocument();
+  });
+
+  it("clears the error when textarea is emptied", () => {
+    render(<JsonField setting={setting} />);
+    const ta = screen.getByLabelText("JSON Setting");
+
+    fireEvent.change(ta, { target: { value: "bad" } });
+    expect(screen.getByText(/unexpected token|expected/i)).toBeInTheDocument();
+
+    fireEvent.change(ta, { target: { value: "" } });
+    expect(
+      screen.queryByText(/unexpected token|expected/i)
+    ).not.toBeInTheDocument();
+  });
+
+  it("shows the Required badge for required settings", () => {
+    render(<JsonField setting={requiredSetting} />);
+    expect(screen.getByText("Required")).toBeInTheDocument();
+  });
+
+  it("disables the textarea when disabled prop is true", () => {
+    render(<JsonField setting={setting} disabled={true} />);
+    expect(screen.getByLabelText("JSON Setting")).toBeDisabled();
+  });
+
+  it("calls onChange with parsed value on valid input", () => {
+    const onChange = jest.fn();
+    render(<JsonField setting={setting} onChange={onChange} />);
+    const ta = screen.getByLabelText("JSON Setting");
+
+    fireEvent.change(ta, { target: { value: '{"x":1}' } });
+    expect(onChange).toHaveBeenCalledWith({ x: 1 });
+  });
+
+  it("does not call onChange when JSON is invalid", () => {
+    const onChange = jest.fn();
+    render(<JsonField setting={setting} onChange={onChange} />);
+    const ta = screen.getByLabelText("JSON Setting");
+
+    fireEvent.change(ta, { target: { value: "{bad" } });
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  describe("error message visibility", () => {
+    it("is absent before the field is focused and there is no error", () => {
+      render(<JsonField setting={setting} />);
+      expect(
+        document.querySelector(".json-field-error-msg")
+      ).not.toBeInTheDocument();
+    });
+
+    it("appears (empty) when the field is focused with no error", () => {
+      render(<JsonField setting={setting} />);
+      const ta = screen.getByLabelText("JSON Setting");
+      fireEvent.focus(ta);
+      const el = document.querySelector(".json-field-error-msg");
+      expect(el).toBeInTheDocument();
+      expect(el!.textContent).toBe("");
+    });
+
+    it("disappears on blur when there is no error", () => {
+      render(<JsonField setting={setting} />);
+      const ta = screen.getByLabelText("JSON Setting");
+      fireEvent.focus(ta);
+      fireEvent.blur(ta);
+      expect(
+        document.querySelector(".json-field-error-msg")
+      ).not.toBeInTheDocument();
+    });
+
+    it("stays visible after blur when there is an error", () => {
+      render(<JsonField setting={setting} />);
+      const ta = screen.getByLabelText("JSON Setting");
+      fireEvent.focus(ta);
+      fireEvent.change(ta, { target: { value: "bad json" } });
+      fireEvent.blur(ta);
+      expect(
+        screen.getByText(/unexpected token|expected/i)
+      ).toBeInTheDocument();
+    });
+
+    it("sets aria-invalid on the textarea when JSON is invalid", () => {
+      render(<JsonField setting={setting} />);
+      const ta = screen.getByLabelText("JSON Setting");
+      expect(ta).not.toHaveAttribute("aria-invalid", "true");
+      fireEvent.change(ta, { target: { value: "bad json" } });
+      expect(ta).toHaveAttribute("aria-invalid", "true");
+      fireEvent.change(ta, { target: { value: '{"x":1}' } });
+      expect(ta).not.toHaveAttribute("aria-invalid", "true");
+    });
+
+    it("adds the error element id to aria-describedby when invalid", () => {
+      render(<JsonField setting={setting} />);
+      const ta = screen.getByLabelText("JSON Setting");
+      expect(ta.getAttribute("aria-describedby") ?? "").not.toContain(
+        "json-error-"
+      );
+      fireEvent.change(ta, { target: { value: "bad" } });
+      expect(ta.getAttribute("aria-describedby")).toContain("json-error-");
+    });
+
+    it("includes the description element id in aria-describedby when description is present", () => {
+      render(<JsonField setting={setting} />);
+      const ta = screen.getByLabelText("JSON Setting");
+      expect(ta.getAttribute("aria-describedby")).toContain("json-desc-");
+    });
+  });
+
+  describe("getValue()", () => {
+    it("returns null for empty textarea", () => {
+      const ref = React.createRef<JsonFieldHandle>();
+      render(<JsonField setting={setting} ref={ref} />);
+      expect(ref.current!.getValue()).toBeNull();
+    });
+
+    it("returns parsed object for valid JSON", () => {
+      const ref = React.createRef<JsonFieldHandle>();
+      render(<JsonField setting={setting} ref={ref} />);
+      const ta = screen.getByLabelText("JSON Setting");
+
+      fireEvent.change(ta, { target: { value: '{"a":1}' } });
+      expect(ref.current!.getValue()).toEqual({ a: 1 });
+    });
+
+    it("returns undefined for invalid JSON", () => {
+      const ref = React.createRef<JsonFieldHandle>();
+      render(<JsonField setting={setting} ref={ref} />);
+      const ta = screen.getByLabelText("JSON Setting");
+
+      fireEvent.change(ta, { target: { value: "not json" } });
+      expect(ref.current!.getValue()).toBeUndefined();
+    });
+  });
+
+  describe("Copy button", () => {
+    beforeEach(() => {
+      Object.defineProperty(navigator, "clipboard", {
+        value: { writeText: jest.fn().mockResolvedValue(undefined) },
+        writable: true,
+        configurable: true,
+      });
+    });
+
+    it("is disabled when textarea is empty", () => {
+      render(<JsonField setting={setting} />);
+      expect(
+        screen.getByRole("button", { name: "Copy to clipboard" })
+      ).toBeDisabled();
+    });
+
+    it("is enabled when textarea has content", () => {
+      render(<JsonField setting={setting} value={{ a: 1 }} />);
+      expect(
+        screen.getByRole("button", { name: "Copy to clipboard" })
+      ).not.toBeDisabled();
+    });
+
+    it("copies textarea text to clipboard", () => {
+      const obj = { a: 1 };
+      render(<JsonField setting={setting} value={obj} />);
+      fireEvent.click(
+        screen.getByRole("button", { name: "Copy to clipboard" })
+      );
+      expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
+        JSON.stringify(obj, null, 2)
+      );
+    });
+
+    it("shows Copied! text briefly after click then hides it", async () => {
+      jest.useFakeTimers();
+      render(<JsonField setting={setting} value={{ a: 1 }} />);
+      expect(screen.queryByText("Copied!")).not.toBeInTheDocument();
+      await act(async () => {
+        fireEvent.click(
+          screen.getByRole("button", { name: "Copy to clipboard" })
+        );
+      });
+      expect(screen.getByText("Copied!")).toBeInTheDocument();
+      act(() => jest.advanceTimersByTime(2000));
+      expect(screen.queryByText("Copied!")).not.toBeInTheDocument();
+      jest.useRealTimers();
+    });
+
+    it("shows 'Copy failed.' when navigator.clipboard is unavailable", () => {
+      Object.defineProperty(navigator, "clipboard", {
+        value: undefined,
+        writable: true,
+        configurable: true,
+      });
+      render(<JsonField setting={setting} value={{ a: 1 }} />);
+      fireEvent.click(
+        screen.getByRole("button", { name: "Copy to clipboard" })
+      );
+      expect(screen.getByText("Copy failed.")).toBeInTheDocument();
+      expect(screen.queryByText("Copied!")).not.toBeInTheDocument();
+    });
+
+    it("shows 'Copy failed.' when clipboard write fails", async () => {
+      Object.defineProperty(navigator, "clipboard", {
+        value: {
+          writeText: jest.fn().mockRejectedValue(new Error("denied")),
+        },
+        writable: true,
+        configurable: true,
+      });
+      render(<JsonField setting={setting} value={{ a: 1 }} />);
+      await act(async () => {
+        fireEvent.click(
+          screen.getByRole("button", { name: "Copy to clipboard" })
+        );
+      });
+      const msg = screen.getByText("Copy failed.");
+      expect(msg).toBeInTheDocument();
+      expect(msg).toHaveAttribute("aria-live", "assertive");
+      expect(screen.queryByText("Copied!")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Clear button", () => {
+    it("is disabled when textarea is empty", () => {
+      render(<JsonField setting={setting} />);
+      expect(
+        screen.getByRole("button", { name: "Clear field" })
+      ).toBeDisabled();
+    });
+
+    it("is disabled when field is disabled", () => {
+      render(<JsonField setting={setting} value={{ a: 1 }} disabled={true} />);
+      expect(
+        screen.getByRole("button", { name: "Clear field" })
+      ).toBeDisabled();
+    });
+
+    it("is disabled when field is readOnly", () => {
+      render(<JsonField setting={setting} value={{ a: 1 }} readOnly={true} />);
+      expect(
+        screen.getByRole("button", { name: "Clear field" })
+      ).toBeDisabled();
+    });
+
+    it("clears the textarea when clicked", () => {
+      render(<JsonField setting={setting} value={{ a: 1 }} />);
+      const ta = screen.getByLabelText("JSON Setting") as HTMLTextAreaElement;
+      expect(ta.value).not.toBe("");
+      fireEvent.click(screen.getByRole("button", { name: "Clear field" }));
+      expect(ta.value).toBe("");
+    });
+
+    it("calls onChange with null when clicked", () => {
+      const onChange = jest.fn();
+      render(
+        <JsonField setting={setting} value={{ a: 1 }} onChange={onChange} />
+      );
+      fireEvent.click(screen.getByRole("button", { name: "Clear field" }));
+      expect(onChange).toHaveBeenCalledWith(null);
+    });
+
+    it("clears inline JSON error when clicked", () => {
+      render(<JsonField setting={setting} />);
+      const ta = screen.getByLabelText("JSON Setting");
+      fireEvent.change(ta, { target: { value: "bad json" } });
+      expect(
+        screen.queryByText(/unexpected token|expected/i)
+      ).toBeInTheDocument();
+      fireEvent.click(screen.getByRole("button", { name: "Clear field" }));
+      expect(
+        screen.queryByText(/unexpected token|expected/i)
+      ).not.toBeInTheDocument();
+    });
+
+    it("shows 'Cleared! Ctrl-Z / Cmd-Z to recover.' message after clicking", () => {
+      render(<JsonField setting={setting} value={{ a: 1 }} />);
+      expect(screen.queryByText(/Cleared!/i)).not.toBeInTheDocument();
+      fireEvent.click(screen.getByRole("button", { name: "Clear field" }));
+      expect(
+        screen.getByText("Cleared! Ctrl-Z / Cmd-Z to recover.")
+      ).toBeInTheDocument();
+    });
+
+    it("hides 'Cleared!' message after timeout", () => {
+      jest.useFakeTimers();
+      render(<JsonField setting={setting} value={{ a: 1 }} />);
+      fireEvent.click(screen.getByRole("button", { name: "Clear field" }));
+      expect(
+        screen.getByText("Cleared! Ctrl-Z / Cmd-Z to recover.")
+      ).toBeInTheDocument();
+      act(() => jest.advanceTimersByTime(5000));
+      expect(screen.queryByText(/Cleared!/i)).not.toBeInTheDocument();
+      jest.useRealTimers();
+    });
+
+    it("hides 'Cleared!' message when user starts typing", () => {
+      render(<JsonField setting={setting} value={{ a: 1 }} />);
+      const ta = screen.getByLabelText("JSON Setting");
+      fireEvent.click(screen.getByRole("button", { name: "Clear field" }));
+      expect(
+        screen.getByText("Cleared! Ctrl-Z / Cmd-Z to recover.")
+      ).toBeInTheDocument();
+      fireEvent.change(ta, { target: { value: "42" } });
+      expect(screen.queryByText(/Cleared!/i)).not.toBeInTheDocument();
+    });
+  });
+
+  describe("undo after clear (Ctrl+Z)", () => {
+    it("restores content after clicking Clear then pressing Ctrl+Z", () => {
+      render(<JsonField setting={setting} value={{ a: 1 }} />);
+      const ta = screen.getByLabelText("JSON Setting") as HTMLTextAreaElement;
+      const original = ta.value;
+
+      fireEvent.click(screen.getByRole("button", { name: "Clear field" }));
+      expect(ta.value).toBe("");
+
+      fireEvent.keyDown(ta, { key: "z", ctrlKey: true });
+      expect(ta.value).toBe(original);
+    });
+
+    it("hides 'Cleared!' message on undo", () => {
+      render(<JsonField setting={setting} value={{ a: 1 }} />);
+      const ta = screen.getByLabelText("JSON Setting");
+      fireEvent.click(screen.getByRole("button", { name: "Clear field" }));
+      expect(
+        screen.getByText("Cleared! Ctrl-Z / Cmd-Z to recover.")
+      ).toBeInTheDocument();
+      fireEvent.keyDown(ta, { key: "z", ctrlKey: true });
+      expect(screen.queryByText(/Cleared!/i)).not.toBeInTheDocument();
+    });
+
+    it("restores content using Cmd+Z (macOS)", () => {
+      render(<JsonField setting={setting} value={{ a: 1 }} />);
+      const ta = screen.getByLabelText("JSON Setting") as HTMLTextAreaElement;
+      const original = ta.value;
+
+      fireEvent.click(screen.getByRole("button", { name: "Clear field" }));
+      fireEvent.keyDown(ta, { key: "z", metaKey: true });
+      expect(ta.value).toBe(original);
+    });
+
+    it("calls onChange with restored value on undo", () => {
+      const onChange = jest.fn();
+      const obj = { a: 1 };
+      render(<JsonField setting={setting} value={obj} onChange={onChange} />);
+      const ta = screen.getByLabelText("JSON Setting");
+
+      fireEvent.click(screen.getByRole("button", { name: "Clear field" }));
+      onChange.mockClear();
+      fireEvent.keyDown(ta, { key: "z", ctrlKey: true });
+      expect(onChange).toHaveBeenCalledWith(obj);
+    });
+
+    it("does not undo when no clear has occurred", () => {
+      render(<JsonField setting={setting} value={{ a: 1 }} />);
+      const ta = screen.getByLabelText("JSON Setting") as HTMLTextAreaElement;
+      const original = ta.value;
+
+      fireEvent.keyDown(ta, { key: "z", ctrlKey: true });
+      expect(ta.value).toBe(original);
+    });
+
+    it("discards undo state once the user starts typing after a clear", () => {
+      render(<JsonField setting={setting} value={{ a: 1 }} />);
+      const ta = screen.getByLabelText("JSON Setting") as HTMLTextAreaElement;
+
+      fireEvent.click(screen.getByRole("button", { name: "Clear field" }));
+      fireEvent.change(ta, { target: { value: "42" } });
+      fireEvent.keyDown(ta, { key: "z", ctrlKey: true });
+      // Should stay at "42", not jump back to original
+      expect(ta.value).toBe("42");
+    });
+
+    it("restores partial/invalid JSON text on undo without throwing", () => {
+      render(<JsonField setting={setting} />);
+      const ta = screen.getByLabelText("JSON Setting") as HTMLTextAreaElement;
+
+      fireEvent.change(ta, { target: { value: '{"partial":' } });
+      fireEvent.click(screen.getByRole("button", { name: "Clear field" }));
+      expect(ta.value).toBe("");
+
+      fireEvent.keyDown(ta, { key: "z", ctrlKey: true });
+      expect(ta.value).toBe('{"partial":');
+      expect(
+        screen.queryByText(/unexpected token|expected/i)
+      ).toBeInTheDocument();
+    });
+
+    it("does not call onChange when restored text is invalid JSON", () => {
+      const onChange = jest.fn();
+      render(<JsonField setting={setting} onChange={onChange} />);
+      const ta = screen.getByLabelText("JSON Setting");
+
+      fireEvent.change(ta, { target: { value: '{"partial":' } });
+      fireEvent.click(screen.getByRole("button", { name: "Clear field" }));
+      onChange.mockClear();
+
+      fireEvent.keyDown(ta, { key: "z", ctrlKey: true });
+      expect(onChange).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("clear()", () => {
+    it("resets text and clears parse error", () => {
+      const ref = React.createRef<JsonFieldHandle>();
+      render(<JsonField setting={setting} ref={ref} value={{ a: 1 }} />);
+      const ta = screen.getByLabelText("JSON Setting") as HTMLTextAreaElement;
+
+      expect(ta.value).toBe(JSON.stringify({ a: 1 }, null, 2));
+
+      fireEvent.change(ta, { target: { value: "bad json" } });
+      expect(
+        screen.queryByText(/unexpected token|expected/i)
+      ).toBeInTheDocument();
+
+      act(() => {
+        ref.current!.clear();
+      });
+
+      expect(ta.value).toBe("");
+      expect(
+        screen.queryByText(/unexpected token|expected/i)
+      ).not.toBeInTheDocument();
+    });
+
+    it("calls onChange with null when cleared programmatically", () => {
+      const onChange = jest.fn();
+      const ref = React.createRef<JsonFieldHandle>();
+      render(
+        <JsonField
+          setting={setting}
+          ref={ref}
+          value={{ a: 1 }}
+          onChange={onChange}
+        />
+      );
+
+      act(() => {
+        ref.current!.clear();
+      });
+
+      expect(onChange).toHaveBeenCalledWith(null);
+    });
+  });
+});
diff --git a/tests/jest/components/ProtocolFormField.test.tsx b/tests/jest/components/ProtocolFormField.test.tsx
index 7eceeb77c..30ee3d7c5 100644
--- a/tests/jest/components/ProtocolFormField.test.tsx
+++ b/tests/jest/components/ProtocolFormField.test.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { render, screen } from "@testing-library/react";
+import { render, screen, fireEvent, act } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import ProtocolFormField from "../../../src/components/ProtocolFormField";
 
@@ -9,6 +9,61 @@ import ProtocolFormField from "../../../src/components/ProtocolFormField";
 // Those tests should eventually be migrated here and
 // adapted to the Jest/React Testing Library paradigm.
 
+describe("ProtocolFormField — json type", () => {
+  const jsonSetting = {
+    key: "config",
+    label: "Config JSON",
+    description: "<p>JSON configuration</p>",
+    type: "json",
+  };
+
+  it("renders a textarea (not an input) for json type", () => {
+    const value = { enabled: true, count: 3 };
+    render(
+      <ProtocolFormField setting={jsonSetting} disabled={false} value={value} />
+    );
+    const ta = screen.getByLabelText("Config JSON") as HTMLTextAreaElement;
+    expect(ta.tagName).toBe("TEXTAREA");
+    expect(ta.value).toBe(JSON.stringify(value, null, 2));
+  });
+
+  it("renders empty textarea for null value", () => {
+    render(
+      <ProtocolFormField setting={jsonSetting} disabled={false} value={null} />
+    );
+    const ta = screen.getByLabelText("Config JSON") as HTMLTextAreaElement;
+    expect(ta.value).toBe("");
+  });
+
+  it("getValue() returns parsed object", () => {
+    const ref = React.createRef<ProtocolFormField>();
+    render(
+      <ProtocolFormField setting={jsonSetting} disabled={false} ref={ref} />
+    );
+    const ta = screen.getByLabelText("Config JSON");
+    fireEvent.change(ta, { target: { value: '{"x":42}' } });
+    expect(ref.current!.getValue()).toEqual({ x: 42 });
+  });
+
+  it("clear() resets the textarea", () => {
+    const ref = React.createRef<ProtocolFormField>();
+    render(
+      <ProtocolFormField
+        setting={jsonSetting}
+        disabled={false}
+        ref={ref}
+        value={{ x: 42 }}
+      />
+    );
+    const ta = screen.getByLabelText("Config JSON") as HTMLTextAreaElement;
+    expect(ta.value).not.toBe("");
+    act(() => {
+      ref.current!.clear();
+    });
+    expect(ta.value).toBe("");
+  });
+});
+
 describe("ProtocolFormField", () => {
   it("renders date-picker setting", async () => {
     const user = userEvent.setup();