diff --git a/package-lock.json b/package-lock.json
index 399d899e3..d2961fffb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.0.1",
       "dependencies": {
         "@apollo/client": "^3.8.5",
-        "@edsc/metadata-preview": "^1.5.12",
+        "@edsc/metadata-preview": "^1.5.13",
         "@node-saml/node-saml": "^5.1.0",
         "@rjsf/core": "^5.15.0",
         "@rjsf/utils": "^5.15.0",
@@ -17900,6 +17900,166 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.22.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.22.1.tgz",
+      "integrity": "sha512-5p2rnlVTv6Gpw4PlTLq925nTVh+HFh4MpegX8dPDYJae+NFVjQ67gY7O6iHIzQjLipDiYejFF0yHrhjU3XgLBQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.22.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.22.1.tgz",
+      "integrity": "sha512-1FaBtcFrZqB2hkFbAxY//Pnp8koThvyB6AhjbdVqKD4/pu13Rl91fKt2N9qyeQPUt3xy7ORUvSO+dPk3J6EjXg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.22.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.22.1.tgz",
+      "integrity": "sha512-6rub98tYGfE5I5j0BP8t/2d4BZyu1S7Iz9vUkm0H26snAFHYxLfj3RbQn0xHHIePSetjLnhcg3QlfwUAkD/FYg==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.22.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.22.1.tgz",
+      "integrity": "sha512-nYO5qGtb/1kkTZu3FeTiM+2B2TAb7m2DkLCTgQIs2bk2o9aEs7I96fwySKcoHWQAiQDGR9sMux9vkV4KQXqPaQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.22.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.22.1.tgz",
+      "integrity": "sha512-MCV6RuRpzXbunvzwY644iz8cw4oQxvW7oer9xPkdadYqlEyiJJ6wl7FyJOH7Q6ZYH4yjGAUCvxDBxPbnDu9ZVg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.22.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.22.1.tgz",
+      "integrity": "sha512-RjNgpdM20VUXgV7us/VmlO3Vn2ZRiDnc3/bUxCVvySZWPiVPprpqW/QDWuzkGa+NCUf6saAM5CLsZLSxncXJwg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.22.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.22.1.tgz",
+      "integrity": "sha512-ZgO4C7Rd6Hv/5MnyY2KxOYmIlzk4rplVolDt3NbkNR8DndnyX0Q5IR4acJWNTBICQ21j3zySzKbcJaiJpk/4YA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.22.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.22.1.tgz",
+      "integrity": "sha512-4pozV4eyD0MDET41ZLHAeBo+H04Nm2UEYIk5w/ts40231dRFV7E0cjwbnZvSoc1DXFgecAhiC0L16ruv/ZDCpg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/lilconfig": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
@@ -26892,23 +27052,6 @@
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
       "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
     },
-    "node_modules/yaml": {
-      "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.9.0.tgz",
-      "integrity": "sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==",
-      "license": "ISC",
-      "optional": true,
-      "peer": true,
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/eemeli"
-      }
-    },
     "node_modules/yargs": {
       "version": "17.7.2",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
diff --git a/package.json b/package.json
index d958b1bf4..8117a39f7 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@apollo/client": "^3.8.5",
-    "@edsc/metadata-preview": "^1.5.12",
+    "@edsc/metadata-preview": "^1.5.13",
     "@node-saml/node-saml": "^5.1.0",
     "@rjsf/core": "^5.15.0",
     "@rjsf/utils": "^5.15.0",
diff --git a/static/src/js/components/JsonPreview/JsonPreview.jsx b/static/src/js/components/JsonPreview/JsonPreview.jsx
index a136288b2..6ca58e242 100644
--- a/static/src/js/components/JsonPreview/JsonPreview.jsx
+++ b/static/src/js/components/JsonPreview/JsonPreview.jsx
@@ -1,36 +1,242 @@
-import React from 'react'
+import React, { useState } from 'react'
 import Accordion from 'react-bootstrap/Accordion'
 import JSONPretty from 'react-json-pretty'
 import { cloneDeep } from 'lodash-es'
+import PropTypes from 'prop-types'
+import validator from '@rjsf/validator-ajv8'
 
 import useAppContext from '../../hooks/useAppContext'
 import removeEmpty from '../../utils/removeEmpty'
+import Button from '../Button/Button'
+import CustomModal from '../CustomModal/CustomModal'
 
-const JsonPreview = () => {
+const JsonPreview = ({ schema }) => {
   const {
-    draft = {}
+    draft = {},
+    setDraft
   } = useAppContext()
 
-  // Remove || {} in MMT-4070
   const { ummMetadata = {} } = draft || {}
 
   const data = cloneDeep(removeEmpty(ummMetadata))
 
+  const [isEditing, setIsEditing] = useState(false)
+  const [jsonText, setJsonText] = useState('')
+
+  // Inline, blocking error -- only ever a JSON.parse failure.
+  const [parseError, setParseError] = useState(null)
+
+  // Schema/structural errors surfaced on Apply. These block saving -- the
+  // errors modal below is a dead end that only lets the user go back and
+  // fix the JSON, it never commits the invalid draft.
+  const [pendingErrors, setPendingErrors] = useState([])
+  const [showErrors, setShowErrors] = useState(false)
+
+  const handleEditClick = () => {
+    setJsonText(JSON.stringify(data, null, 2))
+    setParseError(null)
+    setPendingErrors([])
+    setIsEditing(true)
+  }
+
+  const handleCancel = () => {
+    setJsonText(JSON.stringify(data, null, 2))
+    setParseError(null)
+    setPendingErrors([])
+    setShowErrors(false)
+    setIsEditing(false)
+  }
+
+  const handleTextChange = (event) => {
+    setJsonText(event.target.value)
+    if (parseError) setParseError(null)
+  }
+
+  const handleApplyClick = () => {
+    let parsed
+
+    try {
+      parsed = JSON.parse(jsonText)
+    } catch (parseErrorObj) {
+      setParseError(`Invalid JSON: ${parseErrorObj.message}`)
+
+      return
+    }
+
+    setParseError(null)
+
+    if (schema) {
+      const { errors: schemaErrors = [] } = validator.validateFormData(parsed, schema)
+
+      // Only surface structural errors (unknown field, wrong type, oneOf/anyOf
+      // mismatches). 'required' errors are ignored so the JSON editor stays as
+      // permissive as the form.
+      const structuralErrors = schemaErrors.filter(({ name }) => name !== 'required')
+
+      if (structuralErrors.length > 0) {
+        const messages = structuralErrors.map(({
+          name,
+          property,
+          message,
+          params
+        }) => {
+          // AJV reports the bad key in params.additionalProperty, not in `message`
+          if (name === 'additionalProperties' && params?.additionalProperty) {
+            const location = property ? `${property} ` : ''
+
+            return `${location} must NOT have additional property '${params.additionalProperty}'`
+          }
+
+          return property ? `${property} ${message}` : message
+        })
+
+        setPendingErrors(messages)
+        setShowErrors(true)
+
+        return
+      }
+    }
+
+    setDraft({
+      ...draft,
+      ummMetadata: parsed
+    })
+
+    setParseError(null)
+    setPendingErrors([])
+    setShowErrors(false)
+    setIsEditing(false)
+  }
+
+  const handleErrorsBack = () => {
+    setShowErrors(false)
+    setPendingErrors([])
+  }
+
   return (
-    <Accordion
-      defaultActiveKey="0"
-      className="mt-5"
-    >
-      <Accordion.Item eventKey="0">
-        <Accordion.Header>
-          JSON
-        </Accordion.Header>
-        <Accordion.Body>
-          <JSONPretty data={data} />
-        </Accordion.Body>
-      </Accordion.Item>
-    </Accordion>
+    <>
+      <Accordion
+        defaultActiveKey="0"
+        className="mt-5"
+      >
+        <Accordion.Item eventKey="0">
+          <Accordion.Header>
+            JSON
+          </Accordion.Header>
+          <Accordion.Body>
+            <div className="d-flex justify-content-end mb-2">
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={handleEditClick}
+              >
+                Edit JSON
+              </Button>
+            </div>
+
+            <JSONPretty data={data} />
+          </Accordion.Body>
+        </Accordion.Item>
+      </Accordion>
+
+      <CustomModal
+        show={isEditing}
+        toggleModal={
+          (nextShow) => {
+            if (!nextShow) handleCancel()
+          }
+        }
+        size="xl"
+        header="Editing JSON"
+        message={
+          (
+            <>
+              {
+                parseError && (
+                  <div className="text-danger small mb-2" role="alert">
+                    {parseError}
+                  </div>
+                )
+              }
+
+              <textarea
+                className={`form-control font-monospace ${parseError ? 'is-invalid' : ''}`}
+                rows={32}
+                value={jsonText}
+                onChange={handleTextChange}
+                spellCheck={false}
+                aria-label="Editable JSON metadata"
+              />
+            </>
+          )
+        }
+        actions={
+          [
+            {
+              label: 'Cancel',
+              variant: 'secondary',
+              onClick: handleCancel
+            },
+            {
+              label: 'Apply',
+              variant: 'primary',
+              onClick: handleApplyClick
+            }
+          ]
+        }
+      />
+
+      <CustomModal
+        show={showErrors}
+        toggleModal={
+          (nextShow) => {
+            if (!nextShow) handleErrorsBack()
+          }
+        }
+        size="lg"
+        header="Invalid JSON"
+        message={
+          (
+            <>
+              <p>Your record has the following errors:</p>
+
+              <ul>
+                {
+                  pendingErrors.map((message, index) => (
+                    // eslint-disable-next-line react/no-array-index-key
+                    <li key={`${index}-${message}`}>{message}</li>
+                  ))
+                }
+              </ul>
+
+              <p>You must fix these errors before proceeding to save.</p>
+            </>
+          )
+        }
+        actions={
+          [
+            {
+              label: 'Go Back',
+              variant: 'primary',
+              onClick: handleErrorsBack
+            }
+          ]
+        }
+      />
+    </>
   )
 }
 
+JsonPreview.defaultProps = {
+  schema: null
+}
+
+JsonPreview.propTypes = {
+  // The full UMM schema (not a section-limited schema) to validate the
+  // edited JSON against on save. If omitted, only JSON-syntax validation
+  // is performed.
+  // eslint-disable-next-line react/forbid-prop-types
+  schema: PropTypes.object
+}
+
 export default JsonPreview
diff --git a/static/src/js/components/JsonPreview/__tests__/JsonPreview.test.jsx b/static/src/js/components/JsonPreview/__tests__/JsonPreview.test.jsx
index 72fc1e055..39fa2b5a0 100644
--- a/static/src/js/components/JsonPreview/__tests__/JsonPreview.test.jsx
+++ b/static/src/js/components/JsonPreview/__tests__/JsonPreview.test.jsx
@@ -1,5 +1,10 @@
 import React from 'react'
-import { render } from '@testing-library/react'
+import {
+  render,
+  screen,
+  within
+} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import JSONPretty from 'react-json-pretty'
 
 import JsonPreview from '../JsonPreview'
@@ -7,14 +12,125 @@ import AppContext from '../../../context/AppContext'
 
 vi.mock('react-json-pretty')
 
-const setup = (draft = undefined) => {
-  render(
-    <AppContext.Provider value={{ draft }}>
-      <JsonPreview />
+const mockSchema = {
+  type: 'object',
+  additionalProperties: false,
+  required: ['Name'],
+  properties: {
+    Name: { type: 'string' },
+    Age: { type: 'number' }
+  }
+}
+
+// A discriminated-union-style schema: a valid document must satisfy exactly
+// one of the two branches below. Each branch has its own required field, so
+// AJV reports a missing branch field as both a `required` error *and* a
+// wrapping `oneOf` error ("must match a schema in oneOf") at the root. Only
+// the `required` error is filtered -- the `oneOf` error is now surfaced too.
+const mockOneOfSchema = {
+  type: 'object',
+  additionalProperties: false,
+  oneOf: [
+    {
+      required: ['Name'],
+      properties: {
+        Name: { type: 'string' },
+        Age: { type: 'number' }
+      }
+    },
+    {
+      required: ['Nickname'],
+      properties: {
+        Nickname: { type: 'string' },
+        Age: { type: 'number' }
+      }
+    }
+  ],
+  properties: {
+    Name: { type: 'string' },
+    Nickname: { type: 'string' },
+    Age: { type: 'number' }
+  }
+}
+
+// A controlled-vocabulary field expressed as `oneOf: [{ const: ... }]`
+// rather than a plain `enum`. There's no missing-required-field involved
+// here, so this exercises the oneOf error path independent of `required`.
+const mockEnumAsOneOfSchema = {
+  type: 'object',
+  additionalProperties: false,
+  properties: {
+    Status: {
+      oneOf: [
+        {
+          const: 'Active',
+          title: 'Active'
+        },
+        {
+          const: 'Inactive',
+          title: 'Inactive'
+        }
+      ]
+    }
+  }
+}
+
+const setup = (draft = undefined, { schema = null } = {}) => {
+  const setDraft = vi.fn()
+
+  const { rerender } = render(
+    <AppContext.Provider
+      value={
+        {
+          draft,
+          setDraft
+        }
+      }
+    >
+      <JsonPreview schema={schema} />
     </AppContext.Provider>
   )
+
+  // Allows a test to simulate the draft changing out from under JsonPreview
+  // (e.g. the UI form calling its own setDraft) by re-rendering with a new
+  // draft, without going through JsonPreview's own setDraft mock.
+  const rerenderWithDraft = (nextDraft) => {
+    rerender(
+      <AppContext.Provider
+        value={
+          {
+            draft: nextDraft,
+            setDraft
+          }
+        }
+      >
+        <JsonPreview schema={schema} />
+      </AppContext.Provider>
+    )
+  }
+
+  return {
+    setDraft,
+    rerenderWithDraft
+  }
 }
 
+// Opens the edit modal and replaces its textarea contents with `jsonText`.
+const openEditorAndType = async (user, jsonText) => {
+  await user.click(screen.getByRole('button', { name: 'Edit JSON' }))
+
+  const textarea = screen.getByRole('textbox', { name: 'Editable JSON metadata' })
+
+  await user.clear(textarea)
+  await user.type(textarea, jsonText, { skipClick: true })
+
+  return textarea
+}
+
+// Joins the text content of the errors modal's list items, since that's
+// where the structural-error messages themselves are rendered.
+const errorListText = () => screen.getAllByRole('listitem').map((item) => item.textContent).join(' ')
+
 describe('JsonPreview Component', () => {
   describe('when draft is not present in the context', () => {
     test('renders JSONPretty', () => {
@@ -65,4 +181,401 @@ describe('JsonPreview Component', () => {
       }), {})
     })
   })
+
+  describe('when in view mode', () => {
+    test('renders an Edit JSON button and no modal', () => {
+      setup({
+        ummMetadata: {
+          Name: 'Mock Name'
+        }
+      })
+
+      expect(screen.getByRole('button', { name: 'Edit JSON' })).toBeInTheDocument()
+      expect(screen.queryByText('Editing JSON')).not.toBeInTheDocument()
+      expect(screen.queryByText('Invalid JSON')).not.toBeInTheDocument()
+      expect(screen.queryByRole('textbox', { name: 'Editable JSON metadata' })).not.toBeInTheDocument()
+    })
+  })
+
+  describe('when the user clicks Edit JSON', () => {
+    test('opens a modal with a textarea pre-populated with the current JSON', async () => {
+      const user = userEvent.setup()
+
+      setup({
+        ummMetadata: {
+          Name: 'Mock Name'
+        }
+      })
+
+      await user.click(screen.getByRole('button', { name: 'Edit JSON' }))
+
+      const textarea = screen.getByRole('textbox', { name: 'Editable JSON metadata' })
+
+      expect(screen.getByText('Editing JSON')).toBeInTheDocument()
+      expect(textarea).toBeInTheDocument()
+      expect(textarea.value).toContain('"Name": "Mock Name"')
+
+      expect(screen.getByRole('button', { name: 'Apply' })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument()
+    })
+  })
+
+  describe('when the user edits the JSON and clicks Apply', () => {
+    test('calls setDraft with the parsed JSON merged into the draft and closes the modal', async () => {
+      const user = userEvent.setup()
+
+      const { setDraft } = setup({
+        nativeId: 'MOCK-123',
+        ummMetadata: {
+          Name: 'Mock Name'
+        }
+      })
+
+      await openEditorAndType(user, '{{"Name": "Updated Name"}')
+
+      await user.click(screen.getByRole('button', { name: 'Apply' }))
+
+      expect(setDraft).toHaveBeenCalledTimes(1)
+      expect(setDraft).toHaveBeenCalledWith({
+        nativeId: 'MOCK-123',
+        ummMetadata: {
+          Name: 'Updated Name'
+        }
+      })
+
+      expect(screen.queryByText('Editing JSON')).not.toBeInTheDocument()
+      expect(screen.queryByRole('textbox', { name: 'Editable JSON metadata' })).not.toBeInTheDocument()
+    })
+  })
+
+  describe('when the user enters invalid JSON and clicks Apply', () => {
+    test('shows an inline error, does not call setDraft, does not open the errors modal, and stays in edit mode', async () => {
+      const user = userEvent.setup()
+
+      const { setDraft } = setup({
+        ummMetadata: {
+          Name: 'Mock Name'
+        }
+      })
+
+      await openEditorAndType(user, '{{ this is not valid json')
+
+      await user.click(screen.getByRole('button', { name: 'Apply' }))
+
+      expect(setDraft).not.toHaveBeenCalled()
+      expect(screen.getByRole('alert')).toHaveTextContent(/Invalid JSON/)
+
+      // A parse failure isn't something the errors modal makes sense for --
+      // there's no parsed data to report structural errors about.
+      expect(screen.queryByText('Invalid JSON')).not.toBeInTheDocument()
+
+      // Should remain in the edit modal with Apply/Cancel still present
+      expect(screen.getByText('Editing JSON')).toBeInTheDocument()
+      expect(screen.getByRole('textbox', { name: 'Editable JSON metadata' })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Apply' })).toBeInTheDocument()
+    })
+
+    test('clears the error once the user starts typing again', async () => {
+      const user = userEvent.setup()
+
+      setup({
+        ummMetadata: {
+          Name: 'Mock Name'
+        }
+      })
+
+      const textarea = await openEditorAndType(user, '{{ not valid')
+
+      await user.click(screen.getByRole('button', { name: 'Apply' }))
+
+      expect(screen.getByRole('alert')).toBeInTheDocument()
+
+      await user.type(textarea, 'a')
+
+      expect(screen.queryByRole('alert')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('when the user clicks Cancel after editing', () => {
+    test('discards changes, does not call setDraft, and closes the modal', async () => {
+      const user = userEvent.setup()
+
+      const { setDraft } = setup({
+        ummMetadata: {
+          Name: 'Mock Name'
+        }
+      })
+
+      await openEditorAndType(user, '{{"Name": "Should Not Save"}')
+
+      await user.click(screen.getByRole('button', { name: 'Cancel' }))
+
+      expect(setDraft).not.toHaveBeenCalled()
+      expect(screen.queryByText('Editing JSON')).not.toBeInTheDocument()
+      expect(screen.queryByRole('textbox', { name: 'Editable JSON metadata' })).not.toBeInTheDocument()
+
+      // Re-opening edit mode should show the original (unsaved-change-free) JSON again
+      await user.click(screen.getByRole('button', { name: 'Edit JSON' }))
+
+      expect(screen.getByRole('textbox', { name: 'Editable JSON metadata' }).value).toContain('"Name": "Mock Name"')
+    })
+  })
+
+  describe('when a schema prop is provided', () => {
+    describe('when the edited JSON is only missing a required field', () => {
+      test('saves immediately with no errors modal, since missing-required-field errors are ignored', async () => {
+        const user = userEvent.setup()
+
+        const { setDraft } = setup({
+          ummMetadata: {
+            Name: 'Mock Name'
+          }
+        }, { schema: mockSchema })
+
+        // Removes the required `Name` field entirely
+        await openEditorAndType(user, '{{}')
+
+        await user.click(screen.getByRole('button', { name: 'Apply' }))
+
+        expect(setDraft).toHaveBeenCalledTimes(1)
+        expect(setDraft).toHaveBeenCalledWith({
+          ummMetadata: {}
+        })
+
+        expect(screen.queryByText('Editing JSON')).not.toBeInTheDocument()
+        expect(screen.queryByText('Invalid JSON')).not.toBeInTheDocument()
+      })
+    })
+
+    describe('when the edited JSON has an unknown/typo\'d field name', () => {
+      test('opens an errors modal naming the offending field, and does not save', async () => {
+        const user = userEvent.setup()
+
+        const { setDraft } = setup({
+          ummMetadata: {
+            Name: 'Mock Name'
+          }
+        }, { schema: mockSchema })
+
+        await openEditorAndType(user, '{{"Name": "Mock Name", "Nmae": "typo"}')
+
+        await user.click(screen.getByRole('button', { name: 'Apply' }))
+
+        expect(setDraft).not.toHaveBeenCalled()
+
+        expect(screen.getByText('Invalid JSON')).toBeInTheDocument()
+        expect(errorListText()).toMatch(/Nmae/)
+        expect(errorListText()).toMatch(/must NOT have additional property/)
+        expect(screen.getByText(/must fix these errors before proceeding to save/i)).toBeInTheDocument()
+
+        // There's no way to save from here -- only a way back to editing.
+        // The edit modal stays mounted underneath (with Apply still on it),
+        // so this has to be scoped to the errors modal itself.
+        const errorsModal = screen
+          .getAllByRole('dialog')
+          .find((dialog) => within(dialog).queryByText('Invalid JSON'))
+
+        expect(within(errorsModal).queryByRole('button', { name: 'Apply' })).not.toBeInTheDocument()
+        expect(within(errorsModal).queryByRole('button', { name: 'Save & Continue' })).not.toBeInTheDocument()
+        expect(within(errorsModal).getByRole('button', { name: 'Go Back' })).toBeInTheDocument()
+
+        // The edit modal stays open underneath, with the unsaved text intact
+        expect(screen.getByText('Editing JSON')).toBeInTheDocument()
+        expect(screen.getByRole('textbox', { name: 'Editable JSON metadata' }).value).toContain('Nmae')
+      })
+
+      test('clicking "Go Back" closes the errors modal without saving, keeping the edit modal open', async () => {
+        const user = userEvent.setup()
+
+        const { setDraft } = setup({
+          ummMetadata: {
+            Name: 'Mock Name'
+          }
+        }, { schema: mockSchema })
+
+        await openEditorAndType(user, '{{"Name": "Mock Name", "Nmae": "typo"}')
+        await user.click(screen.getByRole('button', { name: 'Apply' }))
+
+        await user.click(screen.getByRole('button', { name: 'Go Back' }))
+
+        expect(setDraft).not.toHaveBeenCalled()
+        expect(screen.queryByText('Invalid JSON')).not.toBeInTheDocument()
+
+        expect(screen.getByText('Editing JSON')).toBeInTheDocument()
+        expect(screen.getByRole('textbox', { name: 'Editable JSON metadata' }).value).toContain('Nmae')
+      })
+    })
+
+    describe('when the edited JSON has a value of the wrong type', () => {
+      test('opens an errors modal with the type error', async () => {
+        const user = userEvent.setup()
+
+        const { setDraft } = setup({
+          ummMetadata: {
+            Name: 'Mock Name'
+          }
+        }, { schema: mockSchema })
+
+        await openEditorAndType(user, '{{"Name": "Mock Name", "Age": "not a number"}')
+
+        await user.click(screen.getByRole('button', { name: 'Apply' }))
+
+        expect(setDraft).not.toHaveBeenCalled()
+
+        expect(screen.getByText('Invalid JSON')).toBeInTheDocument()
+        expect(errorListText()).toMatch(/Age/)
+        expect(errorListText()).toMatch(/must be number/)
+      })
+    })
+
+    describe('when the edited JSON has an invalid value for a oneOf/const-style enum field', () => {
+      test('opens an errors modal instead of silently saving the invalid value', async () => {
+        const user = userEvent.setup()
+
+        const { setDraft } = setup({
+          ummMetadata: {
+            Status: 'Active'
+          }
+        }, { schema: mockEnumAsOneOfSchema })
+
+        // "Bogus" doesn't match either const branch, and there's no
+        // required-field error at this path to (correctly) suppress it
+        await openEditorAndType(user, '{{"Status": "Bogus"}')
+
+        await user.click(screen.getByRole('button', { name: 'Apply' }))
+
+        expect(setDraft).not.toHaveBeenCalled()
+
+        expect(screen.getByText('Invalid JSON')).toBeInTheDocument()
+        expect(errorListText()).toMatch(/Status/)
+        expect(screen.getByText(/must fix these errors before proceeding to save/i)).toBeInTheDocument()
+      })
+
+      test('a valid enum value saves immediately with no errors modal', async () => {
+        const user = userEvent.setup()
+
+        const { setDraft } = setup({
+          ummMetadata: {
+            Status: 'Active'
+          }
+        }, { schema: mockEnumAsOneOfSchema })
+
+        await openEditorAndType(user, '{{"Status": "Inactive"}')
+
+        await user.click(screen.getByRole('button', { name: 'Apply' }))
+
+        expect(setDraft).toHaveBeenCalledTimes(1)
+        expect(setDraft).toHaveBeenCalledWith({
+          ummMetadata: {
+            Status: 'Inactive'
+          }
+        })
+
+        expect(screen.queryByText('Editing JSON')).not.toBeInTheDocument()
+        expect(screen.queryByText('Invalid JSON')).not.toBeInTheDocument()
+      })
+    })
+
+    describe('when the edited JSON has both a missing required field and a structural error', () => {
+      test('the errors modal names only the structural error, the required error is omitted', async () => {
+        const user = userEvent.setup()
+
+        const { setDraft } = setup({
+          ummMetadata: {
+            Name: 'Mock Name'
+          }
+        }, { schema: mockSchema })
+
+        // Missing required `Name`, and has an unknown field `Nmae`
+        await openEditorAndType(user, '{{"Nmae": "typo"}')
+
+        await user.click(screen.getByRole('button', { name: 'Apply' }))
+
+        expect(setDraft).not.toHaveBeenCalled()
+
+        expect(errorListText()).toMatch(/Nmae/)
+        expect(errorListText()).not.toMatch(/"required"/)
+
+        // A single structural error still renders as a one-item list
+        expect(screen.getAllByRole('listitem')).toHaveLength(1)
+      })
+    })
+
+    describe('when the edited JSON is missing the required field in every oneOf branch', () => {
+      test('opens an errors modal for the oneOf wrapper error and does not save', async () => {
+        const user = userEvent.setup()
+
+        const { setDraft } = setup({
+          ummMetadata: {
+            Name: 'Mock Name'
+          }
+        }, { schema: mockOneOfSchema })
+
+        // Satisfies neither branch: no `Name` and no `Nickname`. The
+        // `required` errors for each branch are filtered, but the wrapping
+        // `oneOf` error at the root is not, so it should still be reported.
+        await openEditorAndType(user, '{{"Age": 5}')
+
+        await user.click(screen.getByRole('button', { name: 'Apply' }))
+
+        expect(setDraft).not.toHaveBeenCalled()
+
+        expect(screen.getByText('Invalid JSON')).toBeInTheDocument()
+        expect(errorListText()).not.toMatch(/"required"/)
+        expect(screen.getByText(/must fix these errors before proceeding to save/i)).toBeInTheDocument()
+
+        expect(screen.getByText('Editing JSON')).toBeInTheDocument()
+      })
+    })
+
+    describe('when the edited JSON has an unknown field under a oneOf schema', () => {
+      test('still opens an errors modal for the structural error, even though the oneOf wrapper error is ignored', async () => {
+        const user = userEvent.setup()
+
+        const { setDraft } = setup({
+          ummMetadata: {
+            Name: 'Mock Name'
+          }
+        }, { schema: mockOneOfSchema })
+
+        // Satisfies the `Name` branch, but also has a typo'd unknown field
+        await openEditorAndType(user, '{{"Name": "Mock Name", "Nmae": "typo"}')
+
+        await user.click(screen.getByRole('button', { name: 'Apply' }))
+
+        expect(setDraft).not.toHaveBeenCalled()
+
+        expect(screen.getByText('Invalid JSON')).toBeInTheDocument()
+        expect(errorListText()).toMatch(/Nmae/)
+        expect(errorListText()).toMatch(/must NOT have additional property/)
+      })
+    })
+
+    describe('when the edited JSON has multiple structural errors', () => {
+      test('renders each error as a separate list item in the errors modal', async () => {
+        const user = userEvent.setup()
+
+        const { setDraft } = setup({
+          ummMetadata: {
+            Name: 'Mock Name'
+          }
+        }, { schema: mockSchema })
+
+        await openEditorAndType(user, '{{"Name": "Mock Name", "Nmae": "typo", "Aeg": "typo2"}')
+
+        await user.click(screen.getByRole('button', { name: 'Apply' }))
+
+        expect(setDraft).not.toHaveBeenCalled()
+
+        const listItems = screen.getAllByRole('listitem')
+
+        expect(listItems).toHaveLength(2)
+
+        const combinedText = listItems.map((item) => item.textContent).join(' ')
+
+        expect(combinedText).toContain('Nmae')
+        expect(combinedText).toContain('Aeg')
+      })
+    })
+  })
 })
diff --git a/static/src/js/components/MetadataForm/MetadataForm.jsx b/static/src/js/components/MetadataForm/MetadataForm.jsx
index c4507e851..2410d5444 100644
--- a/static/src/js/components/MetadataForm/MetadataForm.jsx
+++ b/static/src/js/components/MetadataForm/MetadataForm.jsx
@@ -406,7 +406,7 @@ const MetadataForm = () => {
 
       <Row className="json-view">
         <Col sm={8}>
-          <JsonPreview />
+          <JsonPreview schema={schema} />
         </Col>
       </Row>
     </Container>
diff --git a/static/src/js/components/TemplateForm/TemplateForm.jsx b/static/src/js/components/TemplateForm/TemplateForm.jsx
index 3b129caf6..59831d185 100644
--- a/static/src/js/components/TemplateForm/TemplateForm.jsx
+++ b/static/src/js/components/TemplateForm/TemplateForm.jsx
@@ -382,7 +382,7 @@ const TemplateForm = () => {
         </Row>
         <Row className="json-view">
           <Col sm={8}>
-            <JsonPreview />
+            <JsonPreview schema={ummCTemplateSchema} />
           </Col>
         </Row>
       </Container>
diff --git a/static/src/js/components/TemplateForm/__tests__/TemplateForm.test.jsx b/static/src/js/components/TemplateForm/__tests__/TemplateForm.test.jsx
index 9b6a3356e..5d59322c1 100644
--- a/static/src/js/components/TemplateForm/__tests__/TemplateForm.test.jsx
+++ b/static/src/js/components/TemplateForm/__tests__/TemplateForm.test.jsx
@@ -38,6 +38,7 @@ import StreetAddressField from '@/js/components/StreetAddressField/StreetAddress
 import createTemplate from '@/js/utils/createTemplate'
 import errorLogger from '@/js/utils/errorLogger'
 import getTemplate from '@/js/utils/getTemplate'
+import getUmmVersion from '@/js/utils/getUmmVersion'
 import updateTemplate from '@/js/utils/updateTemplate'
 
 import { INGEST_DRAFT } from '@/js/operations/mutations/ingestDraft'
@@ -46,18 +47,21 @@ import useAvailableProviders from '@/js/hooks/useAvailableProviders'
 
 import TemplateForm from '../TemplateForm'
 
-import staticConfig from '../../../../../../static.config.json'
-
 vi.mock('@/js/utils/createTemplate')
 vi.mock('@/js/utils/errorLogger')
 vi.mock('@/js/utils/getTemplate')
+vi.mock('@/js/utils/getUmmVersion')
 vi.mock('@/js/utils/updateTemplate')
 vi.mock('@/js/components/ErrorBanner/ErrorBanner')
 vi.mock('@/js/components/FormNavigation/FormNavigation')
 
-const getConfig = () => staticConfig
+// The actual UMM-C version number is irrelevant to these tests - they only
+// care that whatever version getUmmVersion resolves to is threaded through
+// to the mutation correctly. Using a fixed, fake value keeps this test from
+// breaking every time the real UMM version is bumped in config.
+const mockUmmVersion = 'mock-umm-c-version'
 
-const ummCVersion = getConfig().ummVersions.ummC
+getUmmVersion.mockReturnValue(mockUmmVersion)
 
 vi.mock('@/js/hooks/useAvailableProviders')
 useAvailableProviders.mockReturnValue({
@@ -509,7 +513,7 @@ describe('TemplateForm', () => {
                   },
                   nativeId: 'MMT_mock-uuid',
                   providerId: 'MMT_2',
-                  ummVersion: `${ummCVersion}`
+                  ummVersion: mockUmmVersion
                 }
               },
               result: {
@@ -563,7 +567,7 @@ describe('TemplateForm', () => {
                   },
                   nativeId: 'MMT_mock-uuid',
                   providerId: 'MMT_2',
-                  ummVersion: `${ummCVersion}`
+                  ummVersion: mockUmmVersion
                 }
               },
               error: new Error('An error occurred')
diff --git a/static/src/js/components/TemplatePreview/__tests__/TemplatePreview.test.jsx b/static/src/js/components/TemplatePreview/__tests__/TemplatePreview.test.jsx
index f46130eab..bbe15623b 100644
--- a/static/src/js/components/TemplatePreview/__tests__/TemplatePreview.test.jsx
+++ b/static/src/js/components/TemplatePreview/__tests__/TemplatePreview.test.jsx
@@ -22,19 +22,23 @@ import ErrorBanner from '../../ErrorBanner/ErrorBanner'
 import deleteTemplate from '../../../utils/deleteTemplate'
 import errorLogger from '../../../utils/errorLogger'
 import getTemplate from '../../../utils/getTemplate'
+import getUmmVersion from '../../../utils/getUmmVersion'
 import { INGEST_DRAFT } from '../../../operations/mutations/ingestDraft'
 
-import staticConfig from '../../../../../../static.config.json'
-
 vi.mock('../../../utils/getTemplate')
 vi.mock('../../ErrorBanner/ErrorBanner')
 vi.mock('../../PreviewProgress/PreviewProgress')
 vi.mock('../../../utils/errorLogger')
 vi.mock('../../../utils/deleteTemplate')
+vi.mock('../../../utils/getUmmVersion')
 
-const getConfig = () => staticConfig
+// The actual UMM-C version number is irrelevant to these tests - they only
+// care that whatever version getUmmVersion resolves to is threaded through
+// to the mutation correctly. Using a fixed, fake value keeps this test from
+// breaking every time the real UMM version is bumped in config.
+const mockUmmVersion = 'mock-umm-c-version'
 
-const ummCVersion = getConfig().ummVersions.ummC
+getUmmVersion.mockReturnValue(mockUmmVersion)
 
 const setup = () => {
   const user = userEvent.setup()
@@ -371,7 +375,7 @@ describe('TemplatePreview', () => {
                 },
                 nativeId: 'MMT_mock-uuid',
                 providerId: 'MMT_2',
-                ummVersion: `${ummCVersion}`
+                ummVersion: mockUmmVersion
               }
             },
             result: {
@@ -413,7 +417,7 @@ describe('TemplatePreview', () => {
                 },
                 nativeId: 'MMT_mock-uuid',
                 providerId: 'MMT_2',
-                ummVersion: `${ummCVersion}`
+                ummVersion: mockUmmVersion
               }
             },
             error: new Error('An error occurred')