diff --git a/apps/admin/src/components/ui/EditableField.tsx b/apps/admin/src/components/ui/EditableField.tsx
index 00447a4..9c97007 100644
--- a/apps/admin/src/components/ui/EditableField.tsx
+++ b/apps/admin/src/components/ui/EditableField.tsx
@@ -30,6 +30,13 @@ export interface StringEditableFieldProps extends Omit<
   input?: FieldInputConfig;
 }
 
+function multilineSaveShortcutLabel(): string {
+  if (!("navigator" in globalThis)) {
+    return "Ctrl+Enter";
+  }
+  return /Mac|iPod|iPhone|iPad/.test(navigator.platform) ? "⌘↵" : "Ctrl+Enter";
+}
+
 function EditableFieldInner<T>({
   value,
   formatValue,
@@ -49,8 +56,11 @@ function EditableFieldInner<T>({
   isUnchanged,
 }: EditableFieldProps<T>): ReactElement {
   const [editing, setEditing] = useState(false);
+  const [savedValue, setSavedValue] = useState<T | undefined>(undefined);
   const [draft, setDraft] = useState(() => formatValue(value));
   const [error, setError] = useState<string | null>(null);
+  const multilineSaveShortcut = multilineSaveShortcutLabel();
+  const displayValue = savedValue ?? value;
 
   function valueIsEmpty(nextValue: T): boolean {
     if (isEmpty) {
@@ -66,21 +76,25 @@ function EditableFieldInner<T>({
     return formatValue(nextValue);
   }
 
+  useEffect(() => {
+    setSavedValue(undefined);
+  }, [value]);
+
   useEffect(() => {
     if (!editing) {
-      setDraft(formatValue(value));
+      setDraft(formatValue(displayValue));
       setError(null);
     }
-  }, [value, editing, formatValue]);
+  }, [displayValue, editing, formatValue]);
 
   function startEdit(): void {
-    setDraft(formatValue(value));
+    setDraft(formatValue(displayValue));
     setError(null);
     setEditing(true);
   }
 
   function cancelEdit(): void {
-    setDraft(formatValue(value));
+    setDraft(formatValue(displayValue));
     setError(null);
     setEditing(false);
   }
@@ -88,8 +102,8 @@ function EditableFieldInner<T>({
   async function handleSave(): Promise<void> {
     const nextDraft = trimOnCommit ? draft.trim() : draft;
     const changed = isUnchanged
-      ? !isUnchanged(nextDraft, value)
-      : nextDraft !== formatValue(value);
+      ? !isUnchanged(nextDraft, displayValue)
+      : nextDraft !== formatValue(displayValue);
 
     if (!changed) {
       setEditing(false);
@@ -97,14 +111,17 @@ function EditableFieldInner<T>({
       return;
     }
 
+    const parsed = parseDraft(nextDraft);
+
     try {
-      await onSave(parseDraft(nextDraft));
+      await onSave(parsed);
+      setSavedValue(parsed);
       setEditing(false);
       setError(null);
     } catch (err) {
       setError(formatCaughtError(err));
       if (revertOnError) {
-        setDraft(formatValue(value));
+        setDraft(formatValue(displayValue));
       }
     }
   }
@@ -133,6 +150,11 @@ function EditableFieldInner<T>({
   }
 
   if (editing) {
+    const saveShortcut =
+      input.kind === "textarea" || input.kind === "json"
+        ? multilineSaveShortcut
+        : "↵";
+
     return (
       <div className="min-w-0">
         <FieldInput
@@ -147,6 +169,14 @@ function EditableFieldInner<T>({
           onCancel={cancelEdit}
           commitOnChange={input.kind === "select"}
         />
+        {input.kind !== "select" ? (
+          <div className="mt-1 flex gap-2 text-xs text-muted">
+            <span className="flex items-center gap-0.5">
+              {saveShortcut} save
+            </span>
+            <span className="flex items-center gap-0.5">Esc cancel</span>
+          </div>
+        ) : null}
         {error ? <p className="mt-1 text-xs text-danger">{error}</p> : null}
       </div>
     );
@@ -159,7 +189,7 @@ function EditableFieldInner<T>({
         align === "start" ? "items-start" : "items-center",
       )}
     >
-      <div className="min-w-0 flex-1">{renderValue(value)}</div>
+      <div className="min-w-0 flex-1">{renderValue(displayValue)}</div>
       <button
         type="button"
         aria-label={editLabel}
diff --git a/apps/admin/src/components/ui/FieldInput.tsx b/apps/admin/src/components/ui/FieldInput.tsx
index da44e19..7fd827f 100644
--- a/apps/admin/src/components/ui/FieldInput.tsx
+++ b/apps/admin/src/components/ui/FieldInput.tsx
@@ -7,9 +7,13 @@ import {
   useRef,
   useState,
 } from "react";
-import { SuggestibleInput } from "@leda/lib/ui";
+import Editor from "@monaco-editor/react";
+import type * as Monaco from "monaco-editor";
+import { SuggestibleInput, useTheme } from "@leda/lib/ui";
 
 const SEARCH_DEBOUNCE_MS = 300;
+const JSON_EDITOR_LIGHT_THEME = "leda-json-light";
+const JSON_EDITOR_DARK_THEME = "leda-json-dark";
 
 export interface FieldOption {
   value: string;
@@ -97,12 +101,110 @@ function handleMultilineKeyDown(
     onCancel();
     return;
   }
-  if (event.key === "Enter" && event.metaKey && onSave) {
+  if (event.key === "Enter" && (event.metaKey || event.ctrlKey) && onSave) {
     event.preventDefault();
     onSave();
   }
 }
 
+interface JsonEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  disabled: boolean;
+  autoFocus: boolean;
+  className: string;
+  onSave?: () => void;
+  onCancel?: () => void;
+}
+
+function JsonEditor({
+  value,
+  onChange,
+  disabled,
+  autoFocus,
+  className,
+  onSave,
+  onCancel,
+}: JsonEditorProps): ReactElement {
+  const { effectiveTheme } = useTheme();
+  const onSaveRef = useRef(onSave);
+  const onCancelRef = useRef(onCancel);
+  const height = `${(value.split("\n").length + 1) * 20 + 8}px`;
+  const widestLineLength = Math.max(
+    1,
+    ...value.split("\n").map((line) => line.length),
+  );
+  const minWidth = `calc(${widestLineLength}ch + 16px)`;
+
+  onSaveRef.current = onSave;
+  onCancelRef.current = onCancel;
+
+  return (
+    <div
+      className={classNames(className, "overflow-hidden p-0")}
+      style={{ height, minWidth }}
+      onClick={(event) => event.stopPropagation()}
+    >
+      <Editor
+        height="100%"
+        language="json"
+        theme={
+          effectiveTheme === "dark"
+            ? JSON_EDITOR_DARK_THEME
+            : JSON_EDITOR_LIGHT_THEME
+        }
+        value={value}
+        onChange={(nextValue) => onChange(nextValue ?? "")}
+        beforeMount={(monaco: typeof Monaco) => {
+          monaco.editor.defineTheme(JSON_EDITOR_LIGHT_THEME, {
+            base: "vs",
+            inherit: true,
+            colors: { "editor.background": "#00000000" },
+            rules: [],
+          });
+          monaco.editor.defineTheme(JSON_EDITOR_DARK_THEME, {
+            base: "vs-dark",
+            inherit: true,
+            colors: { "editor.background": "#00000000" },
+            rules: [],
+          });
+        }}
+        onMount={(editor, monaco: typeof Monaco) => {
+          if (autoFocus) {
+            editor.focus();
+          }
+          editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, () =>
+            onSaveRef.current?.(),
+          );
+          editor.addCommand(monaco.KeyCode.Escape, () => {
+            onCancelRef.current?.();
+          });
+        }}
+        options={{
+          readOnly: disabled,
+          minimap: { enabled: false },
+          fontSize: 13,
+          lineNumbers: "off",
+          folding: false,
+          glyphMargin: false,
+          overviewRulerLanes: 0,
+          renderLineHighlight: "none",
+          scrollBeyondLastLine: false,
+          wordWrap: "off",
+          automaticLayout: true,
+          tabSize: 2,
+          padding: { top: 4, bottom: 4 },
+          scrollbar: {
+            horizontal: "hidden",
+            vertical: "hidden",
+            handleMouseWheel: false,
+          },
+        }}
+      />
+    </div>
+  );
+}
+
 interface AutocompleteInputProps {
   loadOptions: (query: string) => Promise<FieldOption[]>;
   value: string;
@@ -277,6 +379,20 @@ export function FieldInput({
     );
   }
 
+  if (input.kind === "json" && appearance === "inline") {
+    return (
+      <JsonEditor
+        value={value}
+        onChange={onChange}
+        disabled={disabled}
+        autoFocus={autoFocus}
+        className={resolvedClassName}
+        onSave={onSave}
+        onCancel={onCancel}
+      />
+    );
+  }
+
   if (input.kind === "textarea" || input.kind === "json") {
     return (
       <textarea
diff --git a/apps/admin/src/pages/ReferenceDetails.tsx b/apps/admin/src/pages/ReferenceDetails.tsx
index 4aaf126..12aa641 100644
--- a/apps/admin/src/pages/ReferenceDetails.tsx
+++ b/apps/admin/src/pages/ReferenceDetails.tsx
@@ -228,7 +228,6 @@ export function ReferenceDetailsPage(): ReactElement {
       if (response.error) {
         throw new Error(formatApiError(response.error));
       }
-      setRefreshKey((key) => key + 1);
     } catch (err) {
       setPatchError(formatCaughtError(err));
       throw err;
@@ -359,7 +358,7 @@ export function ReferenceDetailsPage(): ReactElement {
   const selectedKey = referenceTableKey(schema, table);
 
   return (
-    <div className="min-w-0 w-full max-w-full overflow-x-hidden">
+    <div className="min-w-0 w-full max-w-full">
       <div className="mb-4">
         <h2 className="text-3xl font-bold">
           {data.descriptor.description || selectedKey}
diff --git a/apps/admin/src/pages/TableDetails.tsx b/apps/admin/src/pages/TableDetails.tsx
index 8930e84..937ae6d 100644
--- a/apps/admin/src/pages/TableDetails.tsx
+++ b/apps/admin/src/pages/TableDetails.tsx
@@ -158,7 +158,6 @@ function renderMetadataDisplay(
 interface TableMetaProps {
   tableName: string;
   table: GetTableResponse;
-  onAfterPatch: () => void;
   className?: string;
 }
 
@@ -169,6 +168,17 @@ function TableMeta(props: TableMetaProps): ReactElement {
     "name" | "description" | "datatype" | "status" | null
   >(null);
   const [patchError, setPatchError] = useState<string | null>(null);
+  const [datatype, setDatatype] = useState(() =>
+    asDataType(String(props.table.meta.datatype)),
+  );
+  const [status, setStatus] = useState(() =>
+    asTableStatus(String(props.table.meta.status)),
+  );
+
+  useEffect(() => {
+    setDatatype(asDataType(String(props.table.meta.datatype)));
+    setStatus(asTableStatus(String(props.table.meta.status)));
+  }, [props.table.meta.datatype, props.table.meta.status]);
 
   async function runTablePatch(
     field: "name" | "description" | "datatype" | "status",
@@ -179,7 +189,7 @@ function TableMeta(props: TableMetaProps): ReactElement {
       datatype?: DataType;
       status?: TableStatus;
     },
-    onSuccess: () => void,
+    onSuccess?: () => void,
   ): Promise<void> {
     setPatchError(null);
     setSavingField(field);
@@ -191,7 +201,7 @@ function TableMeta(props: TableMetaProps): ReactElement {
       if (response.error) {
         throw new Error(JSON.stringify(response.error));
       }
-      onSuccess();
+      onSuccess?.();
     } catch (err) {
       setPatchError(formatCaughtError(err));
       throw err;
@@ -217,19 +227,14 @@ function TableMeta(props: TableMetaProps): ReactElement {
   }
 
   async function commitDescription(trimmed: string): Promise<void> {
-    await runTablePatch(
-      "description",
-      {
-        table_name: props.tableName,
-        description: trimmed,
-      },
-      () => props.onAfterPatch(),
-    );
+    await runTablePatch("description", {
+      table_name: props.tableName,
+      description: trimmed,
+    });
   }
 
   async function commitDatatype(next: DataType): Promise<void> {
-    const current = asDataType(String(props.table.meta.datatype));
-    if (next === current) {
+    if (next === datatype) {
       return;
     }
     await runTablePatch(
@@ -238,13 +243,12 @@ function TableMeta(props: TableMetaProps): ReactElement {
         table_name: props.tableName,
         datatype: next,
       },
-      () => props.onAfterPatch(),
+      () => setDatatype(next),
     );
   }
 
   async function commitStatus(next: TableStatus): Promise<void> {
-    const current = asTableStatus(String(props.table.meta.status));
-    if (next === current) {
+    if (next === status) {
       return;
     }
     await runTablePatch(
@@ -253,13 +257,13 @@ function TableMeta(props: TableMetaProps): ReactElement {
         table_name: props.tableName,
         status: next,
       },
-      () => props.onAfterPatch(),
+      () => setStatus(next),
     );
   }
 
   const datatypeControl = canEdit ? (
     <select
-      value={asDataType(String(props.table.meta.datatype))}
+      value={datatype}
       onChange={(event) => void commitDatatype(asDataType(event.target.value))}
       disabled={savingField !== null}
       className="bg-surface-2 border border-border rounded px-2 py-1 text-primary max-w-xs"
@@ -271,14 +275,12 @@ function TableMeta(props: TableMetaProps): ReactElement {
       ))}
     </select>
   ) : (
-    String(props.table.meta.datatype)
+    datatype.charAt(0).toUpperCase() + datatype.slice(1)
   );
 
-  const tableStatus = asTableStatus(String(props.table.meta.status));
-
   const statusControl = canEdit ? (
     <select
-      value={tableStatus}
+      value={status}
       onChange={(event) => void commitStatus(asTableStatus(event.target.value))}
       disabled={savingField !== null}
       className="bg-surface-2 border border-border rounded px-2 py-1 text-primary max-w-xs"
@@ -290,7 +292,7 @@ function TableMeta(props: TableMetaProps): ReactElement {
       ))}
     </select>
   ) : (
-    tableStatus.charAt(0).toUpperCase() + tableStatus.slice(1)
+    status.charAt(0).toUpperCase() + status.slice(1)
   );
 
   return (
@@ -498,7 +500,6 @@ function CatalogProgressCard({
 interface ColumnInfoProps {
   tableName: string;
   table: GetTableResponse;
-  onAfterPatch: () => void;
 }
 
 const COLUMN_SELECT_KEY = "";
@@ -579,7 +580,6 @@ function ColumnInfo(props: ColumnInfoProps): ReactElement {
       if (response.error) {
         throw new Error(JSON.stringify(response.error));
       }
-      props.onAfterPatch();
     } catch (err) {
       setPatchError(formatCaughtError(err));
       throw err;
@@ -736,57 +736,47 @@ async function fetcher(
 
 export function TableDetailsPage(): ReactElement {
   const { tableName } = useParams<{ tableName: string }>();
-  const [refreshKey, setRefreshKey] = useState(0);
 
   useEffect(() => {
     document.title = tableName ? `${tableName} | LEDA` : "Table | LEDA";
   }, [tableName]);
 
   const {
-    data: payload,
+    data: table,
     loading,
     error,
-  } = useDataFetching(() => fetcher(tableName), [tableName, refreshKey]);
-
-  function onAfterPatch(): void {
-    setRefreshKey((key) => key + 1);
-  }
+  } = useDataFetching(() => fetcher(tableName), [tableName]);
 
   if (loading) return <Loading />;
   if (error) return <ErrorPage message={error} />;
-  if (!payload) return <ErrorPage message="Unknown error" />;
+  if (!table) return <ErrorPage message="Unknown error" />;
 
   return (
     <div className="space-y-5">
       <div className="grid grid-cols-1 lg:grid-cols-6 gap-5">
         <TableMeta
           tableName={tableName ?? ""}
-          table={payload}
-          onAfterPatch={onAfterPatch}
+          table={table}
           className="lg:col-span-6"
         />
         <TableProgressSummaryCard
-          progress={payload.progress}
+          progress={table.progress}
           tableName={tableName ?? ""}
           className={
-            Object.keys(payload.progress.catalogs).length > 0
+            Object.keys(table.progress.catalogs).length > 0
               ? "lg:col-span-3"
               : "lg:col-span-6"
           }
         />
-        {Object.keys(payload.progress.catalogs).length > 0 ? (
+        {Object.keys(table.progress.catalogs).length > 0 ? (
           <CatalogProgressCard
-            catalogs={payload.progress.catalogs}
-            totalRecords={payload.progress.total_records}
+            catalogs={table.progress.catalogs}
+            totalRecords={table.progress.total_records}
             className="lg:col-span-3"
           />
         ) : null}
       </div>
-      <ColumnInfo
-        tableName={tableName ?? ""}
-        table={payload}
-        onAfterPatch={onAfterPatch}
-      />
+      <ColumnInfo tableName={tableName ?? ""} table={table} />
     </div>
   );
 }
diff --git a/packages/lib/src/ui/CommonTable.tsx b/packages/lib/src/ui/CommonTable.tsx
index 1fe98e9..4a84836 100644
--- a/packages/lib/src/ui/CommonTable.tsx
+++ b/packages/lib/src/ui/CommonTable.tsx
@@ -95,7 +95,6 @@ export function CommonTable({
           {children}
         </div>
       )}
-
       <div className="relative min-w-0 max-w-full">
         <div
           className={classNames(
@@ -104,7 +103,7 @@ export function CommonTable({
             loading && "opacity-50 pointer-events-none",
           )}
         >
-          <table className="w-max min-w-full border-collapse border border-border rounded-sm">
+          <table className="w-full table-auto border-collapse border border-border rounded-sm">
             <thead>
               <tr className="bg-surface-2">
                 {columns.map((column) => {
@@ -113,7 +112,7 @@ export function CommonTable({
                     <th
                       key={column.slug}
                       className={classNames(
-                        "border border-border px-2 py-1 text-center font-semibold text-primary",
+                        "border border-border px-2 py-1 text-center font-semibold text-primary whitespace-nowrap",
                         columnHeaderClassName,
                         columnWidthClassName(column.width),
                       )}
@@ -147,7 +146,7 @@ export function CommonTable({
                       <td
                         key={column.slug}
                         className={classNames(
-                          "border border-border px-2 py-1 align-top",
+                          "min-w-0 border border-border px-2 py-1 align-top [overflow-wrap:anywhere]",
                           cellClassName,
                           columnWidthClassName(column.width),
                         )}