diff --git a/e2e/build.spec.ts b/e2e/build.spec.ts
index ec42fbd..d083323 100644
--- a/e2e/build.spec.ts
+++ b/e2e/build.spec.ts
@@ -51,6 +51,19 @@ const copied = async (page: Page): Promise<string> => {
   return page.evaluate(() => navigator.clipboard.readText())
 }
 
+/**
+ * Fills the source. It is edited in an editor, which loads apart and takes the textarea's place;
+ * the textarea stays under it holding the same text, which is how the page reads the source. The
+ * text is typed over a selection of all of it, made by the editor's own key: a page selection that
+ * a test makes itself can be taken back by the editor, which keeps its own.
+ */
+async function fillSource(page: Page, text: string): Promise<void> {
+  await page.locator('.source-editor .cm-content').click()
+  await page.keyboard.press('ControlOrMeta+a')
+  await page.keyboard.insertText(text)
+  await expect(page.locator('#source')).toHaveValue(text)
+}
+
 const playerState = (page: Page) => page.locator('h5p-player').evaluate((element: HTMLElement & { state?: string }) => element.state)
 
 async function expectPlays(page: Page): Promise<void> {
@@ -67,7 +80,7 @@ test('a pasted source builds, plays and downloads', async ({ page, baseURL }) =>
   await expect(page.locator('[data-theme-toggle]')).toBeVisible()
   await expect(page.locator('#files-step')).toBeHidden()
   // A chat hands the source in a code fence; the page takes what is inside it.
-  await page.locator('#source').fill('```json\n' + JSON.stringify(RIVERS, null, 2) + '\n```')
+  await fillSource(page, '```json\n' + JSON.stringify(RIVERS, null, 2) + '\n```')
   await page.locator('#build').click()
   await expectPlays(page)
   await expect(page.locator('#status')).toContainText('Built “Rivers”: H5P.Blanks, ')
@@ -96,7 +109,7 @@ test('a source with problems gets them all listed, ready for the chat', async ({
   await context.grantPermissions(['clipboard-read', 'clipboard-write'])
   await page.goto('/h5p/build/')
   const { title: _title, ...untitled } = RIVERS
-  await page.locator('#source').fill(JSON.stringify({ ...untitled, colour: 'blue' }))
+  await fillSource(page, JSON.stringify({ ...untitled, colour: 'blue' }))
   await page.locator('#build').click()
   await expect(page.locator('#status')).toHaveAttribute('data-state', 'error')
   const listed = page.locator('#problems li')
@@ -115,7 +128,7 @@ test('a source with problems gets them all listed, ready for the chat', async ({
   expect(files).toBe(await typeFile(request, 'H5P.Blanks'))
 
   // Text that is not JSON is a problem of its own, said where it is, and names no content type.
-  await page.locator('#source').fill('{ "type": "H5P.Blanks", ')
+  await fillSource(page, '{ "type": "H5P.Blanks", ')
   await page.locator('#build').click()
   await expect(listed).toHaveCount(1)
   await expect(listed.first()).toContainText('is not valid JSON')
@@ -144,7 +157,7 @@ test('the copy carries the type files of the source’s type and of the librarie
     }
   }
   await page.goto('/h5p/build/')
-  await page.locator('#source').fill(JSON.stringify(book))
+  await fillSource(page, JSON.stringify(book))
   await page.locator('#build').click()
   await expect(page.locator('#status')).toHaveAttribute('data-state', 'error')
   // The build says what to write, as h5p-author does since 0.7.0.
@@ -156,7 +169,7 @@ test('the copy carries the type files of the source’s type and of the librarie
   expect(files).toBe([await typeFile(request, 'H5P.InteractiveBook'), await typeFile(request, 'H5P.AdvancedText'), await typeFile(request, 'H5P.MultiChoice')].join('\n\n---\n\n'))
 
   // A type the pack does not have has no file: its problems are copied alone.
-  await page.locator('#source').fill(JSON.stringify({ ...book, type: 'H5P.ImageChoice', params: {} }))
+  await fillSource(page, JSON.stringify({ ...book, type: 'H5P.ImageChoice', params: {} }))
   await page.locator('#build').click()
   await expect(page.locator('#problems li')).not.toHaveCount(0)
   const alone = await copied(page)
@@ -173,7 +186,7 @@ test('the copy carries the type file of a type named as it is spoken of, or unde
   /** The type files a source's copy carries after its problems, once a problem of it is shown. */
   const filesOf = async (source: unknown, said: string): Promise<string | undefined> => {
     await page.goto('/h5p/build/')
-    await page.locator('#source').fill(JSON.stringify(source))
+    await fillSource(page, JSON.stringify(source))
     await page.locator('#build').click()
     await expect(page.locator('#problems')).toContainText(said)
     return (await copied(page)).split(`\n\n${TYPES_HEADING}\n\n`)[1]
@@ -209,7 +222,7 @@ test('the problems are copied alone where the type files cannot be fetched, and
   await page.route('**/h5p/build/types/**', (route) => route.fulfill({ status: 503, body: 'unavailable' }))
   await page.goto('/h5p/build/')
   const { title: _title, ...untitled } = RIVERS
-  await page.locator('#source').fill(JSON.stringify(untitled))
+  await fillSource(page, JSON.stringify(untitled))
   await page.locator('#build').click()
   await expect(page.locator('#problems li')).toHaveCount(1)
   expect(await copied(page)).toMatch(/^The build page found 1 problem in the source\. Fix them all and write the whole source again:\n- title: [^\n]*$/)
@@ -231,11 +244,11 @@ test('type files that arrive once newer problems are shown are not copied with t
   })
   await page.goto('/h5p/build/')
   const { title: _title, ...untitled } = RIVERS
-  await page.locator('#source').fill(JSON.stringify(untitled))
+  await fillSource(page, JSON.stringify(untitled))
   await page.locator('#build').click()
   await expect(page.locator('#problems li code')).toHaveText('title')
   // Its type file is on its way when the next source's problems replace these: text that names no type.
-  await page.locator('#source').fill('{ "type": ')
+  await fillSource(page, '{ "type": ')
   await page.locator('#build').click()
   await expect(page.locator('#problems li')).toContainText('is not valid JSON')
   const arrived = page.waitForResponse('**/h5p/build/types/H5P.Blanks.md')
@@ -333,3 +346,111 @@ test('a source that names a file waits for it, then builds with it', async ({ pa
   await expect.poll(() => page.frameLocator('h5p-player iframe').first().locator('img').first().evaluate((img: HTMLImageElement) => img.naturalWidth)).toBe(2)
   expect(problems, problems.join('\n')).toEqual([])
 })
+
+// The source's editor: CodeMirror, loaded apart, in place of the textarea, which stays under it.
+
+test('a mistake in the JSON is marked as it is typed, with its line and column, and goes when it is put right', async ({ page, baseURL }) => {
+  const { problems } = watch(page, baseURL)
+  await page.goto('/h5p/build/')
+  const state = page.locator('#source-state')
+  await expect(state).toHaveText('')
+  await fillSource(page, '{\n  "type": "H5P.Blanks"\n  "title": "Rivers"\n}')
+  // Said in words, with where, in the line under the source and in the editor itself.
+  await expect(state).toContainText('Not valid JSON at line 3, column 3: A comma is missing here')
+  await expect(page.locator('.source-editor .cm-lintRange-error')).toHaveCount(1)
+  // The button goes where the mistake is.
+  await state.getByRole('button', { name: 'Show where' }).click()
+  await expect(page.locator('.source-editor .cm-activeLine')).toContainText('"title": "Rivers"')
+  // Put right, it goes.
+  await fillSource(page, JSON.stringify(RIVERS))
+  await expect(state).toHaveText('')
+  await expect(page.locator('.source-editor .cm-lintRange-error')).toHaveCount(0)
+  expect(problems, problems.join('\n')).toEqual([])
+})
+
+test('Format lays the source out, and takes it out of the code fence a chat put it in', async ({ page, baseURL }) => {
+  const { problems } = watch(page, baseURL)
+  await page.goto('/h5p/build/')
+  await fillSource(page, '```json\n' + JSON.stringify(RIVERS) + '\n```')
+  await page.locator('#format').click()
+  await expect(page.locator('#source')).toHaveValue(JSON.stringify(RIVERS, null, 2))
+  await expect(page.locator('#source-state')).toHaveText('Laid out.')
+  await expect(page.locator('.source-editor .cm-line').first()).toHaveText('{')
+  // Text that is not JSON is left as it is, and the line under the source says where.
+  await fillSource(page, '{ "type": ')
+  await page.locator('#format').click()
+  await expect(page.locator('#source')).toHaveValue('{ "type": ')
+  await expect(page.locator('#source-state')).toContainText('The text ends before the JSON is complete')
+  expect(problems, problems.join('\n')).toEqual([])
+})
+
+test('a problem the build finds is marked where it is in the source, and its name goes there', async ({ page, baseURL }) => {
+  const { problems } = watch(page, baseURL)
+  await page.goto('/h5p/build/')
+  const { title: _title, ...untitled } = RIVERS
+  await fillSource(page, JSON.stringify({ ...untitled, colour: 'blue' }, null, 2))
+  await page.locator('#build').click()
+  await expect(page.locator('#status')).toHaveAttribute('data-state', 'error')
+  // The field that is not a field of a source, name and value; the one that is missing, in the object it is missing from.
+  const marks = page.locator('.source-editor .cm-lintRange-error')
+  await expect(marks).toHaveCount(2)
+  await expect(marks.filter({ hasText: '"colour": "blue"' })).toHaveCount(1)
+  // Each problem's name goes to its place.
+  await page.locator('#problems button.jump', { hasText: /^colour$/ }).click()
+  await expect(page.locator('.source-editor .cm-activeLine')).toContainText('"colour": "blue"')
+  await page.locator('#problems button.jump', { hasText: /^title$/ }).click()
+  await expect(page.locator('.source-editor .cm-activeLine')).toHaveText('{')
+  // The marks are of the text as it was built: a change to it clears them.
+  await page.keyboard.press('ArrowRight')
+  await page.keyboard.type(' ')
+  await expect(marks).toHaveCount(0)
+  // Text that is not JSON is a problem at a place of its own.
+  await fillSource(page, '{ "type": "H5P.Blanks" "title": 1 }')
+  await page.locator('#build').click()
+  await expect(page.locator('#problems li')).toContainText('is not valid JSON at line 1, column 24: A comma is missing here')
+  await page.locator('#problems button.jump').click()
+  await expect(page.locator('.source-editor .cm-activeLine')).toContainText('"title": 1')
+  expect(problems, problems.join('\n')).toEqual([])
+})
+
+test('the editor has a name, its label goes to it, and Tab leaves it', async ({ page }) => {
+  await page.goto('/h5p/build/')
+  const editor = page.getByRole('textbox', { name: 'The source, as JSON' })
+  await expect(editor).toBeVisible()
+  await page.getByText('The source, as JSON', { exact: true }).click()
+  await expect(editor).toBeFocused()
+  await page.keyboard.press('Tab')
+  await expect(page.locator('#format')).toBeFocused()
+})
+
+test('text typed over a selection is the editor’s own, so a bracket wraps it and the policy is not asked', async ({ page, baseURL }) => {
+  const { problems } = watch(page, baseURL)
+  await page.goto('/h5p/build/')
+  await fillSource(page, JSON.stringify(RIVERS, null, 2))
+  await page.locator('.source-editor .cm-content').click()
+  await page.keyboard.press('ControlOrMeta+a')
+  await page.keyboard.type('[')
+  await expect(page.locator('#source')).toHaveValue(`[${JSON.stringify(RIVERS, null, 2)}]`)
+  await page.keyboard.press('ControlOrMeta+a')
+  await page.keyboard.type('x')
+  await expect(page.locator('#source')).toHaveValue('x')
+  await page.keyboard.press('ControlOrMeta+z')
+  await expect(page.locator('#source')).toHaveValue(`[${JSON.stringify(RIVERS, null, 2)}]`)
+  expect(problems, problems.join('\n')).toEqual([])
+})
+
+test('where the editor cannot load, the source is the textarea, and the page works', async ({ page, baseURL }) => {
+  const { elsewhere } = watch(page, baseURL)
+  await page.route('**/h5p/assets/editor-*.js', (route) => route.abort())
+  await page.goto('/h5p/build/')
+  const field = page.locator('#source')
+  await expect(field).toBeVisible()
+  await field.fill(JSON.stringify({ ...RIVERS, authors: [] }))
+  await page.locator('#build').click()
+  await expect(page.locator('#problems li code')).toHaveText('authors')
+  // Its name selects where it is, in the textarea.
+  await page.locator('#problems button.jump').click()
+  expect(await field.evaluate((area: HTMLTextAreaElement) => area.value.slice(area.selectionStart, area.selectionEnd))).toBe('"authors":[')
+  await expect(page.locator('.source-editor')).toHaveCount(0)
+  expect(elsewhere).toEqual([])
+})
diff --git a/e2e/json-scan.spec.ts b/e2e/json-scan.spec.ts
new file mode 100644
index 0000000..9e4299a
--- /dev/null
+++ b/e2e/json-scan.spec.ts
@@ -0,0 +1,101 @@
+import { expect, test } from '@playwright/test'
+import { jsonError, lineColumn, locate } from '../src/h5p/build/json-scan'
+
+/*
+ * The reading of JSON text behind the build page's editor, with no browser: where a text stops being
+ * JSON and what is wrong there, and where a problem's path points. The page's own tests (build.spec.ts)
+ * show both in the editor.
+ */
+
+test('JSON, and text with nothing in it, has no mistake', () => {
+  for (const text of ['{}', '[]', ' { "a": [1, -2.5e+3, 0, true, false, null, "x\\n\\u00e9\\"", {}] } \n', '"text"', '0', '', '   \n']) {
+    expect(jsonError(text), JSON.stringify(text)).toBeNull()
+  }
+})
+
+test('a mistake is found where it is, and said in words for someone who does not write JSON', () => {
+  /** The text with a marker, `¦`, at the offset the mistake is expected at, taken out. */
+  const cases: [string, RegExp][] = [
+    ['{ "a": 1 ¦"b": 2 }', /comma is missing/],
+    ['{ "a": [1, 2 ¦}', /Expected "," or "\]"/],
+    ['{ "a": 1¦, }', /comma right before a closing bracket/],
+    ['[1, 2¦,]', /comma right before a closing bracket/],
+    ['{ "a": 1¦', /text ends before the JSON is complete/],
+    ['{ ¦\'a\': 1 }', /not in 'single quotes'/],
+    ['{ "a": ¦True }', /"True" is not JSON/],
+    ['{ "a": ¦nope }', /"nope" is not JSON/],
+    ['{ "a": "line¦\nbreak" }', /line break inside text in quotes/],
+    ['{ "a": ¦01 }', /not a valid number/],
+    ['{ "a": ¦1.5.2 }', /not a valid number/],
+    ['{ "a": 1 } ¦extra', /more text after the end/],
+    ['{ "a": ¦// note\n 1 }', /no comments/],
+    ['{ "a" ¦1 }', /Expected ":" after the name/],
+    ['{ "a": ¦}', /Expected a value here/],
+    ['{ "a": ¦"x', /not closed/],
+    ['{ "a": "x¦\\q" }', /A backslash starts an escape/],
+    ['{ "a": "x¦\\u12" }', /four hexadecimal digits/],
+    ['{ ¦a: 1 }', /Expected a name in "double quotes" here, but found "a"/],
+    ['{ "a": 1, ¦, "b": 2 }', /Expected a name in "double quotes" here, but found ","/]
+  ]
+  for (const [marked, message] of cases) {
+    const offset = marked.indexOf('¦')
+    const text = marked.replace('¦', '')
+    const error = jsonError(text)
+    expect(error, text).not.toBeNull()
+    expect(error!.offset, text).toBe(offset)
+    expect(error!.message, text).toMatch(message)
+  }
+})
+
+test('what is not JSON for JSON.parse is not for this reading either', () => {
+  for (const text of ['{ "a": 1 "b": 2 }', '{ "a": [1, 2 }', "{ 'a': 1 }", '{ "a": True }', '{ "a": 01 }', '{ "a": 1 } x', '{ "a": 1, }', '[1,]', '{"a" 1}', '{', '[', '"x', '{"a":"\n"}']) {
+    expect(() => JSON.parse(text), text).toThrow()
+    expect(jsonError(text), text).not.toBeNull()
+  }
+  for (const text of ['{"a":[1,2,{"b":null}]}', '[]', '{"a":"\\u00e9\\n"}', '-0.5E-3', '"
"']) {
+    expect(() => JSON.parse(text), text).not.toThrow()
+    expect(jsonError(text), text).toBeNull()
+  }
+})
+
+test('a text nested too deeply is a mistake, not a crash', () => {
+  const error = jsonError('['.repeat(1000))
+  expect(error?.message).toMatch(/nested too deeply/)
+})
+
+test('an offset is a line and a column, each from 1', () => {
+  const text = '{\n  "a": 1\n  "b": 2\n}'
+  const error = jsonError(text)
+  expect(lineColumn(text, error!.offset)).toEqual({ line: 3, column: 3 })
+  expect(lineColumn('', 0)).toEqual({ line: 1, column: 1 })
+  expect(lineColumn('abc', 3)).toEqual({ line: 1, column: 4 })
+})
+
+test('a problem’s path points at its name and value, or at what it is missing from', () => {
+  const source = JSON.stringify({ type: 'H5P.Blanks', title: 'Rivers', authors: [], params: { questions: ['a', 'b'] } }, null, 2)
+  const at = (path: string): { text: string; exact: boolean } | null => {
+    const found = locate(source, path)
+    return found && { text: source.slice(found.from, found.to), exact: found.exact }
+  }
+  // A scalar whole, with its name; an object or an array by its name and its opening bracket.
+  expect(at('title')).toEqual({ text: '"title": "Rivers"', exact: true })
+  expect(at('params.questions[1]')).toEqual({ text: '"b"', exact: true })
+  expect(at('params')).toEqual({ text: '"params": {', exact: true })
+  expect(at('authors')).toEqual({ text: '"authors": [', exact: true })
+  // What the source has none of is looked for in what it is missing from.
+  expect(at('colour')).toEqual({ text: '{', exact: false })
+  expect(at('params.questions[5]')).toEqual({ text: '"questions": [', exact: false })
+  expect(at('params.missing.deep')).toEqual({ text: '"params": {', exact: false })
+  expect(at('title.inside')).toEqual({ text: '"title": "Rivers"', exact: false })
+  // A path that cannot be read, and a text that is not JSON, have no place.
+  expect(at('nope[')).toBeNull()
+  expect(at('')).toBeNull()
+  expect(at('a..b')).toBeNull()
+  expect(locate('{ "title": ', 'title')).toBeNull()
+})
+
+test('a name with an escape in it is found by what it says', () => {
+  const text = '{ "caf\\u00e9": { "x": 1 } }'
+  const found = locate(text, 'café.x')
+  expect(found && text.slice(found.from, found.to)).toBe('"x": 1')
+})
diff --git a/package.json b/package.json
index aac751e..fcc48dc 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,14 @@
     "vite": "8.3.6"
   },
   "dependencies": {
+    "@codemirror/autocomplete": "6.20.4",
+    "@codemirror/commands": "6.11.1",
+    "@codemirror/lang-json": "6.0.2",
+    "@codemirror/language": "6.13.1",
+    "@codemirror/lint": "6.9.7",
+    "@codemirror/state": "6.7.6",
+    "@codemirror/view": "6.43.15",
+    "@lezer/highlight": "1.2.5",
     "@missing-elements/h5p-author": "0.9.2",
     "@missing-elements/h5p-libraries": "1.1.0",
     "@missing-elements/h5p-offline-player": "1.6.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index acfda85..ce7049d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,30 @@ importers:
 
   .:
     dependencies:
+      '@codemirror/autocomplete':
+        specifier: 6.20.4
+        version: 6.20.4
+      '@codemirror/commands':
+        specifier: 6.11.1
+        version: 6.11.1
+      '@codemirror/lang-json':
+        specifier: 6.0.2
+        version: 6.0.2
+      '@codemirror/language':
+        specifier: 6.13.1
+        version: 6.13.1
+      '@codemirror/lint':
+        specifier: 6.9.7
+        version: 6.9.7
+      '@codemirror/state':
+        specifier: 6.7.6
+        version: 6.7.6
+      '@codemirror/view':
+        specifier: 6.43.15
+        version: 6.43.15
+      '@lezer/highlight':
+        specifier: 1.2.5
+        version: 1.2.5
       '@missing-elements/h5p-author':
         specifier: 0.9.2
         version: 0.9.2(@missing-elements/h5p-runtime@1.0.1)
@@ -101,6 +125,45 @@ packages:
     resolution: {integrity: sha512-oI7m8pa7/IAU/3lqRU9vjBbs20iKFo7x+1K9kT3aVira6scc1X9MjBdgLCHzLJeJ7iB6wydioA+kr9/qPnvmlQ==}
     engines: {node: '>=18'}
 
+  '@codemirror/autocomplete@6.20.4':
+    resolution: {integrity: sha512-yF8RhOf2SXlg00+qtupzLhrglcas61boqaONiNcbPIebHCpJocpqTBA6dyrtUrQO47hqyTdeob/3XnYilT7TaQ==}
+
+  '@codemirror/commands@6.11.1':
+    resolution: {integrity: sha512-O/4hG3SC1YwcmQ0d2UVNDs+AsaNWd1iHVxbTeEBuqH+6bExAiPK3iS/BvpY6rZGURALv4ZD3sIgcCmRvw3ehBg==}
+
+  '@codemirror/lang-json@6.0.2':
+    resolution: {integrity: sha512-x2OtO+AvwEHrEwR0FyyPtfDUiloG3rnVTSZV1W8UteaLL8/MajQd8DpvUb2YVzC+/T18aSDv0H9mu+xw0EStoQ==}
+
+  '@codemirror/language@6.13.1':
+    resolution: {integrity: sha512-zfvU2r3TyylQLMj/te+5CnQ0rSqZi8B1oTCBbQkagcLW4Xc6imab6qN+pEJhsuNOLaJqiRyBXp9UhWA1DhVvDw==}
+
+  '@codemirror/lint@6.9.7':
+    resolution: {integrity: sha512-28/+iWLYxKxsvGYhSYL7zaCZqLz5+FFFDq9tVsvGv9kv8RY4fFAchJ5WX9M3YrrRlTIsECjsXPqeNgnSmNP2dg==}
+
+  '@codemirror/state@6.7.6':
+    resolution: {integrity: sha512-kAz+AncRtKuIknedxT1bq4XwXv4UowhbkHU1myPrtVb/jZtImWuV5BXzv5vK6i3kYACsdiZiQKFQQ5Mq7elW8w==}
+
+  '@codemirror/streamparser@6.0.0':
+    resolution: {integrity: sha512-JTFPF6xrfjt0mnfGPgzcLiMwYmvIyNaoizp8BYzv8FE8KrT6GBGDZ190rtt+O7Wke3gG/MFHyiY9YGNeimof4w==}
+
+  '@codemirror/view@6.43.15':
+    resolution: {integrity: sha512-HHsfpqFeHyXLs983pSRe38Xajs0vFWZQ2BuX0m7Ki8w3jZ5iD8cuR3lBz2/5/X53Dhf32SBHKh6rtSTB6tKeGw==}
+
+  '@lezer/common@1.5.5':
+    resolution: {integrity: sha512-Pw7PVCndruF1pb3ebCxpSVpkMHSDjwRCLcTRw+RizUKco5QbWylwq2g4lnG/RYN7yTTQDXE9F77MwtkAyphrjg==}
+
+  '@lezer/highlight@1.2.5':
+    resolution: {integrity: sha512-O1GMVKgtf5YspFaRzpmqkVgMtIk2HG9uMAbH6wdAIdNh3TVzCsch/+cRi+6l2//UGDKe6NB9BW3cvuR5ezMQ0w==}
+
+  '@lezer/json@1.0.3':
+    resolution: {integrity: sha512-BP9KzdF9Y35PDpv04r0VeSTKDeox5vVr3efE7eBbx3r4s3oNLfunchejZhjArmeieBH+nVOpgIiBJpEAv8ilqQ==}
+
+  '@lezer/lr@1.4.12':
+    resolution: {integrity: sha512-On9HU4oMMiHPMkQDgoTnGahjgG5n/MkN38CgG77sMraKLL+3JBbeQNi1FcCXV9QRqwF9/BUXP3caHyJC1fBOTQ==}
+
+  '@marijn/find-cluster-break@1.0.4':
+    resolution: {integrity: sha512-Wy0V7+SGUjnF9/TkiM1hKVDPj7jKXduPNboMVtHTA8dySMURWqfg/JZ9E2Sq8JgSJmkl7k7Qe9FLeMSrSraWmQ==}
+
   '@missing-elements/h5p-author@0.9.2':
     resolution: {integrity: sha512-TWUwkZfLngfmeamNYHAyVHZD7RolCey66LdNzzmvLJZDn8UWRpqqULk2cOUBAcINBxzNIRb6fpSSQ1/kgQlW/w==}
     engines: {node: '>=22'}
@@ -496,6 +559,9 @@ packages:
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
+  crelt@1.0.7:
+    resolution: {integrity: sha512-aK6BbWfhf4U/wCcLHKPJl/xa6VkVstRaPywWtMKGwuOLc/wZTyQYuoxgvZnNsBvv7Kg3YTBQYYBCggcviQczuA==}
+
   debug@2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
     peerDependencies:
@@ -929,6 +995,9 @@ packages:
     resolution: {integrity: sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==}
     engines: {node: '>=0.10.0'}
 
+  style-mod@4.1.4:
+    resolution: {integrity: sha512-XXWIQt633/EpAFx8aZDOTjBzrCaGmhvEQlQo6MVPfa2OzO2cWo+4hV9h+6UkHYlXGfy+ODXKUdP7Pthmcu5ATw==}
+
   tinyglobby@0.2.17:
     resolution: {integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==}
     engines: {node: '>=12.0.0'}
@@ -998,6 +1067,9 @@ packages:
       yaml:
         optional: true
 
+  w3c-keyname@2.2.8:
+    resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
+
   ws@8.22.0:
     resolution: {integrity: sha512-Ydggc987+RO0AnWtZ/7Wq9FtNvcrL1b/RO0ud9mWjUPgDrsAAwQSF51sm2hm1XofbU/4jkpGEsLFsZZxU+1DOg==}
     engines: {node: '>=10.0.0'}
@@ -1133,6 +1205,72 @@ snapshots:
       minimatch: 3.1.5
       slash: 3.0.0
 
+  '@codemirror/autocomplete@6.20.4':
+    dependencies:
+      '@codemirror/language': 6.13.1
+      '@codemirror/state': 6.7.6
+      '@codemirror/view': 6.43.15
+      '@lezer/common': 1.5.5
+
+  '@codemirror/commands@6.11.1':
+    dependencies:
+      '@codemirror/language': 6.13.1
+      '@codemirror/state': 6.7.6
+      '@codemirror/view': 6.43.15
+      '@lezer/common': 1.5.5
+
+  '@codemirror/lang-json@6.0.2':
+    dependencies:
+      '@codemirror/language': 6.13.1
+      '@lezer/json': 1.0.3
+
+  '@codemirror/language@6.13.1':
+    dependencies:
+      '@codemirror/state': 6.7.6
+      '@codemirror/streamparser': 6.0.0
+      '@codemirror/view': 6.43.15
+      '@lezer/common': 1.5.5
+      '@lezer/highlight': 1.2.5
+      '@lezer/lr': 1.4.12
+      style-mod: 4.1.4
+
+  '@codemirror/lint@6.9.7':
+    dependencies:
+      '@codemirror/state': 6.7.6
+      '@codemirror/view': 6.43.15
+      crelt: 1.0.7
+
+  '@codemirror/state@6.7.6':
+    dependencies:
+      '@marijn/find-cluster-break': 1.0.4
+
+  '@codemirror/streamparser@6.0.0': {}
+
+  '@codemirror/view@6.43.15':
+    dependencies:
+      '@codemirror/state': 6.7.6
+      crelt: 1.0.7
+      style-mod: 4.1.4
+      w3c-keyname: 2.2.8
+
+  '@lezer/common@1.5.5': {}
+
+  '@lezer/highlight@1.2.5':
+    dependencies:
+      '@lezer/common': 1.5.5
+
+  '@lezer/json@1.0.3':
+    dependencies:
+      '@lezer/common': 1.5.5
+      '@lezer/highlight': 1.2.5
+      '@lezer/lr': 1.4.12
+
+  '@lezer/lr@1.4.12':
+    dependencies:
+      '@lezer/common': 1.5.5
+
+  '@marijn/find-cluster-break@1.0.4': {}
+
   '@missing-elements/h5p-author@0.9.2(@missing-elements/h5p-runtime@1.0.1)':
     dependencies:
       '@missing-elements/h5p-libraries': 1.1.0
@@ -1378,6 +1516,8 @@ snapshots:
 
   concat-map@0.0.1: {}
 
+  crelt@1.0.7: {}
+
   debug@2.6.9:
     dependencies:
       ms: 2.0.0
@@ -1736,6 +1876,8 @@ snapshots:
 
   strip-bom-string@1.0.0: {}
 
+  style-mod@4.1.4: {}
+
   tinyglobby@0.2.17:
     dependencies:
       fdir: 6.5.0(picomatch@4.0.7)
@@ -1785,4 +1927,6 @@ snapshots:
       '@types/node': 26.6.6
       fsevents: 2.3.3
 
+  w3c-keyname@2.2.8: {}
+
   ws@8.22.0: {}
diff --git a/src/assets/site.css b/src/assets/site.css
index e286755..b97e158 100644
--- a/src/assets/site.css
+++ b/src/assets/site.css
@@ -582,6 +582,18 @@ tbody th a:hover code { text-decoration: underline; }
   font: 0.8125rem/1.6 var(--mono);
 }
 .build textarea:hover { border-color: var(--text); }
+/* The source's editor hides its textarea, which stays under it as the field the page reads. */
+.build textarea[hidden] { display: none; }
+.build .field { margin: 1rem 0 0.5rem; }
+.source-editor { display: block; }
+.build .source-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; margin: 0.6rem 0 0.4rem; }
+.build .source-tools .button { font-size: 0.875rem; padding: 0.25rem 0.8rem; }
+.build #source-state { margin: 0; }
+.build #source-state[data-state="error"] { color: var(--bad); }
+.build .link-button, .build .problems .jump {
+  padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer;
+}
+.build .problems .jump code { color: inherit; }
 .build input[type="file"] { max-width: 100%; font: inherit; font-size: 0.875rem; color: var(--muted); }
 .build input[type="file"]::file-selector-button {
   margin-right: 0.6rem;
diff --git a/src/h5p/build/build-page.ts b/src/h5p/build/build-page.ts
index 3023323..ebaa0d1 100644
--- a/src/h5p/build/build-page.ts
+++ b/src/h5p/build/build-page.ts
@@ -2,7 +2,9 @@ import '@missing-elements/h5p-offline-player'
 import { buildPackage, openPack, SourceError } from '@missing-elements/h5p-author/browser'
 import { pack as installPack } from '@missing-elements/h5p-libraries/install'
 import { runtime } from '@missing-elements/h5p-runtime'
-import { forTheChat, matchFiles, namedFiles, packageName, parseSource, sized, sourceFromFragment, typesNamed, type Problem, type TypeFile } from './build-source'
+import { forTheChat, formatSource, matchFiles, namedFiles, packageName, parseSource, sized, sourceFromFragment, typesNamed, type Problem, type TypeFile } from './build-source'
+import type { SourceEditor } from './editor'
+import { jsonProblem, place, type Target } from './json-scan'
 
 /**
  * The build page, `/h5p/build/`: a source an AI chat wrote with the h5p-author skill becomes a
@@ -14,8 +16,9 @@ import { forTheChat, matchFiles, namedFiles, packageName, parseSource, sized, so
  * player on this page and downloads from it. Nothing leaves the browser: a link that carries a
  * source carries it in its fragment, `#source=`, which no server sees. A source with problems gets
  * them listed, and copied for the chat with the skill's type files, which this site serves beside
- * the page (`TYPES`). The page's markup is `index.njk` beside this file, and its styles are the
- * site's own, in `site.css`.
+ * the page (`TYPES`). The source is edited in an editor (`editor.ts`), loaded apart, in place of the
+ * textarea, which stays under it as the field this page reads. The page's markup is `index.njk`
+ * beside this file, and its styles are the site's own, in `site.css`.
  */
 
 type Opened = Awaited<ReturnType<typeof openPack>>
@@ -27,6 +30,9 @@ const $ = <T extends HTMLElement>(id: string): T => {
 }
 
 const sourceField = $<HTMLTextAreaElement>('source')
+const sourceLabel = $('source-label')
+const sourceState = $('source-state')
+const formatButton = $<HTMLButtonElement>('format')
 const sourceFile = $<HTMLInputElement>('source-file')
 const filesStep = $('files-step')
 const fileList = $<HTMLUListElement>('file-list')
@@ -48,6 +54,8 @@ const player = $('player') as HTMLElementTagNameMap['h5p-player']
 
 player.runtime = runtime
 
+/** The editor the source is in, once it has loaded; until then, and where it cannot, the textarea. */
+let editor: SourceEditor | null = null
 /** The pack, opened at the first build and kept for the page's builds. */
 let opened: Promise<Opened> | null = null
 /** The files chosen so far, by name; a file chosen again under the same name replaces the first. */
@@ -74,12 +82,38 @@ function setStatus(text: string, state: 'idle' | 'building' | 'ready' | 'error')
   status.dataset.state = state
 }
 
-function fillList(list: HTMLUListElement, items: Problem[]): void {
-  list.replaceChildren(...items.map(({ path, message }) => {
+/** Where a problem is in the source, for the button that goes there: its place in the text, or none. */
+function target({ path, at }: Problem): Target {
+  return at === undefined ? { path } : { at }
+}
+
+/** Selects where a target is in the source, in the editor or, where it has not loaded, the textarea. */
+function goTo(where: Target): boolean {
+  if (editor) return editor.goTo(where)
+  const range = place(sourceField.value, where)
+  if (!range) return false
+  sourceField.focus()
+  sourceField.setSelectionRange(range.from, range.to)
+  return true
+}
+
+/** The list's items, each problem's path a button that goes where it is in the source, where it is anywhere. */
+function fillList(list: HTMLUListElement, items: Problem[], jump = false): void {
+  list.replaceChildren(...items.map((problem) => {
     const item = document.createElement('li')
     const where = document.createElement('code')
-    where.textContent = path
-    item.append(where, ` ${message}`)
+    where.textContent = problem.path
+    if (jump && place(sourceField.value, target(problem))) {
+      const button = document.createElement('button')
+      button.type = 'button'
+      button.className = 'jump'
+      button.title = 'Show where it is in the source'
+      button.append(where)
+      button.addEventListener('click', () => goTo(target(problem)))
+      item.append(button, ` ${problem.message}`)
+    } else {
+      item.append(where, ` ${problem.message}`)
+    }
     return item
   }))
 }
@@ -122,7 +156,8 @@ function showProblems(problems: Problem[], source?: unknown): void {
   const show = ++shows
   shownProblems = problems
   shownTypeFiles = []
-  fillList(problemsList, problems)
+  fillList(problemsList, problems, true)
+  editor?.mark(problems)
   problemsBox.hidden = problems.length === 0
   copyResult.textContent = ''
   copyTypes.hidden = true
@@ -235,19 +270,69 @@ player.addEventListener('error', (event) => {
   setStatus(`It was built, but does not play: ${message}`, 'error')
 })
 
+/** Says where the source stops being JSON, if it does, as it is typed, and what it names. */
+function checkSource(): void {
+  const problem = jsonProblem(sourceField.value)
+  sourceState.dataset.state = problem ? 'error' : ''
+  if (!problem) {
+    sourceState.replaceChildren()
+    return
+  }
+  const nodes: (string | HTMLElement)[] = [`Not valid JSON ${problem.message}`]
+  if (problem.at !== undefined) {
+    const at = problem.at
+    const show = document.createElement('button')
+    show.type = 'button'
+    show.className = 'link-button'
+    show.textContent = 'Show where'
+    show.addEventListener('click', () => goTo({ at }))
+    nodes.push(' ', show)
+  }
+  sourceState.replaceChildren(...nodes)
+}
+
 let typing: ReturnType<typeof setTimeout> | undefined
-sourceField.addEventListener('input', () => {
+/** The source changed, by typing or by the editor: what it says is looked at once the typing pauses. */
+function sourceChanged(): void {
   clearTimeout(typing)
-  typing = setTimeout(updateFiles, 300)
-})
+  typing = setTimeout(() => {
+    checkSource()
+    updateFiles()
+  }, 300)
+}
+sourceField.addEventListener('input', sourceChanged)
+
+/** The source replaced, as by a file or a link: in the editor if it is there, and always in the textarea. */
+function setSource(text: string): void {
+  sourceField.value = text
+  editor?.set(text)
+  checkSource()
+  updateFiles()
+}
 
 sourceFile.addEventListener('change', async () => {
   const file = sourceFile.files?.[0]
   if (!file) return
-  sourceField.value = await file.text()
-  updateFiles()
+  setSource(await file.text())
 })
 
+formatButton.addEventListener('click', () => {
+  const formatted = formatSource(sourceField.value)
+  if (formatted === null) {
+    // Nothing to lay out, or not JSON yet: the line under the source says where, and the source shows it.
+    checkSource()
+    const problem = jsonProblem(sourceField.value)
+    if (problem?.at !== undefined) goTo({ at: problem.at })
+    else if (!sourceField.value.trim()) sourceState.textContent = 'There is nothing to lay out yet.'
+    return
+  }
+  setSource(formatted)
+  sourceState.textContent = 'Laid out.'
+})
+
+// The label is for the textarea, which the editor hides: a click on it goes to the editor.
+sourceLabel.addEventListener('click', () => editor?.focus())
+
 filesInput.addEventListener('change', () => {
   for (const file of filesInput.files ?? []) chosen.set(file.name, file)
   filesInput.value = ''
@@ -277,7 +362,7 @@ async function fromLink(): Promise<void> {
     return
   }
   if (text === null) return
-  sourceField.value = text
+  setSource(text)
   const paths = updateFiles()
   if (paths.length) setStatus('The source names files: choose them, then Build.', 'idle')
   else await build()
@@ -286,3 +371,10 @@ async function fromLink(): Promise<void> {
 updateFiles()
 void fromLink()
 window.addEventListener('hashchange', () => void fromLink())
+
+// The editor is loaded apart: where it cannot be, the textarea is the source, as it was.
+import('./editor').then(({ mountEditor }) => {
+  editor = mountEditor(sourceField, sourceChanged)
+}).catch((error: unknown) => {
+  console.warn('The source editor did not load; the source stays a plain text field.', error)
+})
diff --git a/src/h5p/build/build-source.ts b/src/h5p/build/build-source.ts
index 3fef3ad..81f830e 100644
--- a/src/h5p/build/build-source.ts
+++ b/src/h5p/build/build-source.ts
@@ -5,11 +5,17 @@
  */
 
 import { sourceType } from '@missing-elements/h5p-author/browser'
+import { jsonProblem, unfence } from './json-scan'
 
-/** A problem or a note, as the author package reports them: where in the source, and what. */
+/**
+ * A problem or a note, as the author package reports them: where in the source, and what. A
+ * problem with the text itself, which is not JSON, has no path in the source, and says where in
+ * the text it is: `at`, an offset.
+ */
 export interface Problem {
   path: string
   message: string
+  at?: number
 }
 
 /** A content type's file of the h5p-author skill: its notes, an example and its fields. */
@@ -62,13 +68,19 @@ function isJson(text: string): boolean {
  */
 export function parseSource(text: string): { source: unknown } | { problem: Problem } {
   if (!text.trim()) return { problem: { path: 'source', message: 'is empty: paste the JSON the chat wrote' } }
+  const problem = jsonProblem(text)
+  if (problem) return { problem: { path: 'source', message: `is not valid JSON ${problem.message}`, at: problem.at } }
   // A chat often hands the source inside a Markdown code fence; take what is inside it.
-  const fenced = /^\s*```[\w-]*\s*\n([\s\S]*?)\n\s*```\s*$/.exec(text)
-  try {
-    return { source: JSON.parse(fenced ? fenced[1] : text) }
-  } catch (error) {
-    return { problem: { path: 'source', message: `is not valid JSON: ${error instanceof Error ? error.message : error}` } }
-  }
+  return { source: JSON.parse(unfence(text).text) }
+}
+
+/**
+ * The source laid out, one field to a line, and out of the code fence a chat may have put it in:
+ * the same JSON, as the text of an editor that tidies it, or `null` where it is not JSON.
+ */
+export function formatSource(text: string): string | null {
+  if (!text.trim() || jsonProblem(text)) return null
+  return JSON.stringify(JSON.parse(unfence(text).text), null, 2)
 }
 
 /** Whether a file's `path` is a web address, which the build fetches itself, rather than a file to choose. */
diff --git a/src/h5p/build/editor.ts b/src/h5p/build/editor.ts
new file mode 100644
index 0000000..7d9036a
--- /dev/null
+++ b/src/h5p/build/editor.ts
@@ -0,0 +1,178 @@
+import { closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete'
+import { defaultKeymap, history, historyKeymap } from '@codemirror/commands'
+import { json } from '@codemirror/lang-json'
+import { bracketMatching, HighlightStyle, indentOnInput, syntaxHighlighting } from '@codemirror/language'
+import { type Diagnostic, linter, lintGutter, setDiagnostics } from '@codemirror/lint'
+import { EditorState } from '@codemirror/state'
+import { drawSelection, EditorView, highlightActiveLine, highlightActiveLineGutter, keymap, lineNumbers, placeholder } from '@codemirror/view'
+import { tags } from '@lezer/highlight'
+import { jsonProblem, place, type Target } from './json-scan'
+
+/**
+ * The editor of the build page's source, `/h5p/build/`, in place of its textarea: JSON in colours,
+ * a mistake in it marked as it is typed, and the problems the build finds marked where they are.
+ * It is CodeMirror 6, loaded apart from the page, so that where it cannot load the textarea stays
+ * as it is and the page works. The textarea stays beside it, hidden, holding the text, so that the
+ * rest of the page reads the source as it always did.
+ *
+ * It is mounted in a shadow root. The page's policy has no `style-src 'unsafe-inline'`, and an
+ * editor that adds a `<style>` to the page is refused; in a shadow root it adopts its styles as a
+ * constructed stylesheet instead, which the policy does not govern. Its colours are the site's own,
+ * custom properties that reach in from outside, so the site's light and dark themes need no code.
+ * Tab is not the editor's: it leaves it, so that the keyboard is never trapped.
+ */
+export interface SourceEditor {
+  /** Replaces the whole text. */
+  set(text: string): void
+  focus(): void
+  /** Selects where a target is and shows it; `false` where the text has no such place. */
+  goTo(target: Target): boolean
+  /** Marks where each problem is, until the text changes; none clears the marks. */
+  mark(problems: { path: string; message: string; at?: number }[]): void
+}
+
+const highlight = HighlightStyle.define([
+  { tag: tags.propertyName, color: 'var(--t-attr)' },
+  { tag: tags.string, color: 'var(--t-string)' },
+  { tag: tags.number, color: 'var(--t-number)' },
+  { tag: [tags.bool, tags.null], color: 'var(--t-keyword)' },
+  { tag: [tags.brace, tags.squareBracket, tags.separator], color: 'var(--muted)' }
+])
+
+const theme = EditorView.theme({
+  '&': {
+    height: '20rem',
+    minHeight: '8rem',
+    maxHeight: '80vh',
+    resize: 'vertical',
+    overflow: 'hidden',
+    color: 'var(--text)',
+    backgroundColor: 'var(--raised)',
+    border: '1px solid var(--border)',
+    borderRadius: 'var(--radius)',
+    fontSize: '0.875rem'
+  },
+  '&:hover': { borderColor: 'var(--text)' },
+  '&.cm-focused': { outline: '2px solid var(--focus)', outlineOffset: '1px' },
+  '.cm-scroller': { fontFamily: 'var(--mono)', lineHeight: '1.55' },
+  '.cm-content': { caretColor: 'var(--text)', padding: '0.5rem 0' },
+  '.cm-cursor, .cm-dropCursor': { borderLeftColor: 'var(--text)' },
+  '.cm-gutters': { backgroundColor: 'var(--surface)', color: 'var(--muted)', border: 'none', borderRight: '1px solid var(--border)' },
+  '.cm-activeLine': { backgroundColor: 'var(--tint)' },
+  '.cm-activeLineGutter': { backgroundColor: 'var(--tint)' },
+  '.cm-selectionBackground, &.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground': {
+    backgroundColor: 'color-mix(in srgb, var(--accent) 30%, transparent)'
+  },
+  '&.cm-focused .cm-matchingBracket': { backgroundColor: 'var(--tint)', outline: '1px solid var(--control)' },
+  '.cm-placeholder': { color: 'var(--muted)' },
+  '.cm-tooltip': { backgroundColor: 'var(--raised)', color: 'var(--text)', border: '1px solid var(--border)', borderRadius: 'var(--radius)' },
+  '.cm-diagnostic': { fontFamily: 'var(--font)' },
+  '.cm-diagnostic-error': { borderLeft: '3px solid var(--bad)' }
+})
+
+/**
+ * Text typed over a selection is put in by the editor, not by the browser. Chrome's own editing
+ * gives text typed over a selection of coloured text a `style` attribute, which the page's policy
+ * refuses and reports in the console, and the editor has to read the text through. The editor's
+ * input handlers still see it first, so that a bracket or a quote typed over a selection wraps it.
+ */
+const typeOverSelection = EditorView.domEventHandlers({
+  beforeinput(event, view) {
+    if (event.inputType !== 'insertText' || event.data === null || event.isComposing || view.state.selection.main.empty) return false
+    event.preventDefault()
+    const text = event.data
+    const { from, to } = view.state.selection.main
+    const insert = () => view.state.update({ changes: { from, to, insert: text }, selection: { anchor: from + text.length }, userEvent: 'input.type', scrollIntoView: true })
+    if (!view.state.facet(EditorView.inputHandler).some((handler) => handler(view, from, to, text, insert))) view.dispatch(insert())
+    return true
+  }
+})
+
+/** The mistake in the text, as the editor marks it while the text is typed. */
+const mistakes = linter((view): Diagnostic[] => {
+  const text = view.state.doc.toString()
+  const problem = jsonProblem(text)
+  if (!problem) return []
+  const from = Math.min(problem.at ?? 0, Math.max(0, text.length - 1))
+  return [{ from, to: Math.min(from + 1, text.length), severity: 'error', message: `Not valid JSON ${problem.message}` }]
+}, { delay: 300 })
+
+/**
+ * Puts the editor where the textarea is, with the textarea's text, and calls `onChange` with the
+ * text of every change, which it has already written into the textarea.
+ */
+export function mountEditor(textarea: HTMLTextAreaElement, onChange: (text: string) => void): SourceEditor {
+  const host = document.createElement('div')
+  host.className = 'source-editor'
+  const shadow = host.attachShadow({ mode: 'open' })
+  const parent = shadow.appendChild(document.createElement('div'))
+  textarea.after(host)
+
+  const view = new EditorView({
+    parent,
+    root: shadow,
+    state: EditorState.create({
+      doc: textarea.value,
+      extensions: [
+        lineNumbers(),
+        highlightActiveLineGutter(),
+        history(),
+        drawSelection(),
+        indentOnInput(),
+        bracketMatching(),
+        closeBrackets(),
+        highlightActiveLine(),
+        EditorView.lineWrapping,
+        keymap.of([...closeBracketsKeymap, ...defaultKeymap, ...historyKeymap]),
+        json(),
+        syntaxHighlighting(highlight),
+        mistakes,
+        lintGutter(),
+        placeholder(textarea.placeholder),
+        theme,
+        EditorView.contentAttributes.of({
+          'aria-label': 'The source, as JSON',
+          spellcheck: 'false',
+          autocapitalize: 'off',
+          autocorrect: 'off'
+        }),
+        typeOverSelection,
+        EditorView.updateListener.of((update) => {
+          if (!update.docChanged) return
+          const text = update.state.doc.toString()
+          textarea.value = text
+          onChange(text)
+        })
+      ]
+    })
+  })
+  textarea.hidden = true
+
+  return {
+    set(text) {
+      view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: text }, selection: { anchor: 0 }, scrollIntoView: true })
+    },
+    focus() {
+      view.focus()
+    },
+    goTo(target) {
+      const range = place(view.state.doc.toString(), target)
+      if (!range) return false
+      view.dispatch({ selection: { anchor: range.from, head: range.to }, effects: EditorView.scrollIntoView(range.from, { y: 'center' }) })
+      view.focus()
+      return true
+    },
+    mark(problems) {
+      const text = view.state.doc.toString()
+      const diagnostics: Diagnostic[] = []
+      for (const { path, message, at } of problems) {
+        const range = place(text, at === undefined ? { path } : { at })
+        if (!range || !text) continue
+        // At least a character is marked, and one that is in the text: a mistake at its very end marks the last.
+        const from = Math.min(range.from, text.length - 1)
+        diagnostics.push({ from, to: Math.min(Math.max(range.to, from + 1), text.length), severity: 'error', message: `${path}: ${message}` })
+      }
+      view.dispatch(setDiagnostics(view.state, diagnostics))
+    }
+  }
+}
diff --git a/src/h5p/build/index.njk b/src/h5p/build/index.njk
index 0b977c7..75cbed7 100644
--- a/src/h5p/build/index.njk
+++ b/src/h5p/build/index.njk
@@ -31,9 +31,18 @@ csp: "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' da
 
   <section class="step" aria-labelledby="source-heading">
     <h2 id="source-heading"><span class="step-number">1</span> Source</h2>
-    <p>
-      <label for="source">The source, as JSON</label>
+    <div class="field">
+      <label for="source" id="source-label">The source, as JSON</label>
       <textarea id="source" rows="12" spellcheck="false" autocomplete="off" placeholder='{ "type": "H5P.Blanks", "title": "Rivers", "language": "en", "license": "CC BY", "authors": [{ "name": "Ann Author", "role": "Author" }], "params": { "questions": ["The *Danube* flows into the Black Sea."] } }'></textarea>
+    </div>
+    <p class="source-tools">
+      <button type="button" class="button" id="format">Format</button>
+      <span class="hint" id="source-state" role="status" aria-live="polite"></span>
+    </p>
+    <p class="hint">
+      You can change the source here before you build it. A mistake in the JSON is marked as you
+      type, and each problem the build finds is marked where it is: choose its name in the list
+      to go there.
     </p>
     <p>
       <label for="source-file" class="inline-label">Or open a file</label>
diff --git a/src/h5p/build/json-scan.ts b/src/h5p/build/json-scan.ts
new file mode 100644
index 0000000..95d1274
--- /dev/null
+++ b/src/h5p/build/json-scan.ts
@@ -0,0 +1,328 @@
+/**
+ * JSON text read for where things are in it, with no DOM, for the build page's editor. `JSON.parse`
+ * says where a mistake is differently in each browser (Safari says nothing) and in words for
+ * programmers, and the build names the place of a problem by a path in the source,
+ * `params.chapters[0].metadata.title`, not by a line. This reads the text once, as strictly as JSON
+ * does, and keeps the offset of every name and value, so that both can be pointed at.
+ */
+
+/** Where a text stops being JSON, and what is wrong there, in words for someone who does not write JSON. */
+export interface JsonError {
+  offset: number
+  message: string
+}
+
+/** A stretch of the text, as offsets. */
+export interface Range {
+  from: number
+  to: number
+}
+
+interface Member {
+  key: Range
+  value: Node
+}
+
+type Node =
+  | { kind: 'object'; from: number; to: number; members: Map<string, Member> }
+  | { kind: 'array'; from: number; to: number; items: Node[] }
+  | { kind: 'scalar'; from: number; to: number }
+
+class Stop extends Error {
+  constructor(readonly offset: number, message: string) {
+    super(message)
+  }
+}
+
+/** Deeper than a source goes, and a stack that a text cannot be allowed to fill. */
+const MAX_DEPTH = 200
+const NUMBER = /-?(?:0|[1-9]\d*)(?:\.\d+)?(?:[eE][+-]?\d+)?/y
+const WORD = /[A-Za-z]+/y
+const ESCAPES: Record<string, string> = { '"': '"', '\\': '\\', '/': '/', b: '\b', f: '\f', n: '\n', r: '\r', t: '\t' }
+
+function read(text: string): Node {
+  let pos = 0
+
+  const fail = (message: string, at = pos): Stop => new Stop(at, message)
+  const skip = (): void => {
+    while (pos < text.length && ' \t\n\r'.includes(text[pos])) pos++
+  }
+  /** What is at the position, for a message. */
+  const found = (): string => {
+    if (pos >= text.length) return 'the end of the text'
+    const char = text[pos]
+    return char === '\n' || char === '\r' ? 'a line break' : `"${char}"`
+  }
+  const ended = (): Stop => fail('The text ends before the JSON is complete: a closing bracket or quote is missing', text.length)
+
+  function string(): { range: Range; value: string } {
+    const from = pos
+    pos++
+    let value = ''
+    for (;;) {
+      if (pos >= text.length) throw fail('This text in quotes is not closed: a closing " is missing', from)
+      const char = text[pos]
+      if (char === '"') {
+        pos++
+        return { range: { from, to: pos }, value }
+      }
+      if (char === '\\') {
+        const next = text[pos + 1]
+        if (next === 'u') {
+          const hex = text.slice(pos + 2, pos + 6)
+          if (!/^[0-9a-fA-F]{4}$/.test(hex)) throw fail('A \\u must be followed by four hexadecimal digits, as in \\u00e9')
+          value += String.fromCharCode(parseInt(hex, 16))
+          pos += 6
+        } else if (next !== undefined && Object.hasOwn(ESCAPES, next)) {
+          value += ESCAPES[next]
+          pos += 2
+        } else {
+          throw fail('A backslash starts an escape: write \\\\ for a backslash, \\" for a quote or \\n for a line break')
+        }
+        continue
+      }
+      if (char < ' ') {
+        throw fail(char === '\n' || char === '\r'
+          ? 'A line break inside text in quotes: write \\n for one, or close the quote first'
+          : 'A tab or other control character inside text in quotes: write \\t, or remove it')
+      }
+      value += char
+      pos++
+    }
+  }
+
+  function number(): Range {
+    const from = pos
+    NUMBER.lastIndex = pos
+    const match = NUMBER.exec(text)
+    if (!match) throw fail('This is not a number')
+    pos += match[0].length
+    if (/[0-9.eE+-]/.test(text[pos] ?? '')) throw fail('This is not a valid number: JSON has none with a leading zero, a "+" or a lone "."', from)
+    return { from, to: pos }
+  }
+
+  function literal(): Range {
+    const from = pos
+    WORD.lastIndex = pos
+    const word = WORD.exec(text)?.[0] ?? ''
+    if (word !== 'true' && word !== 'false' && word !== 'null') {
+      throw fail(`"${word}" is not JSON: it has true, false and null, in lower case, and other text goes in "double quotes"`)
+    }
+    pos += word.length
+    return { from, to: pos }
+  }
+
+  function value(depth: number): Node {
+    if (depth > MAX_DEPTH) throw fail('This is nested too deeply to read')
+    skip()
+    if (pos >= text.length) throw ended()
+    const char = text[pos]
+    if (char === '{') return object(depth)
+    if (char === '[') return array(depth)
+    if (char === '"') return { kind: 'scalar', ...string().range }
+    if (char === '-' || (char >= '0' && char <= '9')) return { kind: 'scalar', ...number() }
+    if (/[A-Za-z]/.test(char)) return { kind: 'scalar', ...literal() }
+    if (char === "'") throw fail('Text goes in "double quotes" in JSON, not in \'single quotes\'')
+    if (char === '/') throw fail('JSON has no comments: remove this')
+    throw fail(`Expected a value here, but found ${found()}`)
+  }
+
+  function object(depth: number): Node {
+    const from = pos
+    pos++
+    const members = new Map<string, Member>()
+    skip()
+    if (text[pos] === '}') {
+      pos++
+      return { kind: 'object', from, to: pos, members }
+    }
+    let comma = -1
+    for (;;) {
+      skip()
+      if (pos >= text.length) throw ended()
+      if (text[pos] === '}' && comma >= 0) throw fail('A comma right before a closing bracket is not allowed: remove it', comma)
+      if (text[pos] !== '"') {
+        throw fail(text[pos] === "'"
+          ? 'Names go in "double quotes" in JSON, not in \'single quotes\''
+          : `Expected a name in "double quotes" here, but found ${found()}`)
+      }
+      const key = string()
+      skip()
+      if (pos >= text.length) throw ended()
+      if (text[pos] !== ':') throw fail(`Expected ":" after the name, but found ${found()}`)
+      pos++
+      members.set(key.value, { key: key.range, value: value(depth + 1) })
+      skip()
+      if (text[pos] === ',') {
+        comma = pos
+        pos++
+        continue
+      }
+      if (text[pos] === '}') {
+        pos++
+        return { kind: 'object', from, to: pos, members }
+      }
+      if (pos >= text.length) throw ended()
+      throw fail(text[pos] === '"' ? 'A comma is missing here, after the value before it' : `Expected "," or "}" here, but found ${found()}`)
+    }
+  }
+
+  function array(depth: number): Node {
+    const from = pos
+    pos++
+    const items: Node[] = []
+    skip()
+    if (text[pos] === ']') {
+      pos++
+      return { kind: 'array', from, to: pos, items }
+    }
+    let comma = -1
+    for (;;) {
+      skip()
+      if (pos >= text.length) throw ended()
+      if (text[pos] === ']' && comma >= 0) throw fail('A comma right before a closing bracket is not allowed: remove it', comma)
+      items.push(value(depth + 1))
+      skip()
+      if (text[pos] === ',') {
+        comma = pos
+        pos++
+        continue
+      }
+      if (text[pos] === ']') {
+        pos++
+        return { kind: 'array', from, to: pos, items }
+      }
+      if (pos >= text.length) throw ended()
+      throw fail(/["{[\-0-9A-Za-z]/.test(text[pos]) ? 'A comma is missing here, after the value before it' : `Expected "," or "]" here, but found ${found()}`)
+    }
+  }
+
+  skip()
+  if (pos >= text.length) throw fail('There is no JSON here', 0)
+  const root = value(0)
+  skip()
+  if (pos < text.length) throw fail('There is more text after the end of the JSON: remove it')
+  return root
+}
+
+/** Where a text stops being JSON, or `null` for JSON, and for text with nothing in it. */
+export function jsonError(text: string): JsonError | null {
+  if (!text.trim()) return null
+  try {
+    read(text)
+    return null
+  } catch (error) {
+    if (error instanceof Stop) return { offset: error.offset, message: error.message }
+    throw error
+  }
+}
+
+/** An offset as a line and a column, each counted from 1, as an editor shows them. */
+export function lineColumn(text: string, offset: number): { line: number; column: number } {
+  const before = text.slice(0, offset)
+  const line = before.split('\n').length
+  return { line, column: offset - (before.lastIndexOf('\n') + 1) + 1 }
+}
+
+/** The steps of a path as the build writes it: `params.chapters[0].metadata.title`. */
+function steps(path: string): (string | number)[] | null {
+  const found: (string | number)[] = []
+  let at = 0
+  while (at < path.length) {
+    if (path[at] === '[') {
+      const index = /^\[(\d+)\]/.exec(path.slice(at))
+      if (!index) return null
+      found.push(Number(index[1]))
+      at += index[0].length
+    } else {
+      if (path[at] === '.') at++
+      const name = /^[^.[\]]+/.exec(path.slice(at))
+      if (!name) return null
+      found.push(name[0])
+      at += name[0].length
+    }
+  }
+  return found.length ? found : null
+}
+
+/**
+ * What to point at for a node, and for the name it is under: the name and a scalar value whole,
+ * and of an object or an array its name and its opening bracket, so that a mark does not cover a
+ * page of text.
+ */
+function around(node: Node, key: Range | null): Range {
+  const from = key?.from ?? node.from
+  return { from, to: node.kind === 'scalar' ? node.to : node.from + 1 }
+}
+
+/**
+ * Where a problem's path points in the text: the name and value it names, or, where the source
+ * has none (a field that is missing), the object it is missing from, with `exact` false. `null`
+ * for a path that cannot be read, and for text that is not JSON, which has no places.
+ */
+export function locate(text: string, path: string): (Range & { exact: boolean }) | null {
+  const wanted = steps(path)
+  if (!wanted) return null
+  let node: Node
+  try {
+    node = read(text)
+  } catch (error) {
+    if (error instanceof Stop) return null
+    throw error
+  }
+  let key: Range | null = null
+  for (const step of wanted) {
+    if (typeof step === 'number') {
+      if (node.kind !== 'array' || step >= node.items.length) return { ...around(node, key), exact: false }
+      node = node.items[step]
+      key = null
+    } else {
+      const member = node.kind === 'object' ? node.members.get(step) : undefined
+      if (!member) return { ...around(node, key), exact: false }
+      key = member.key
+      node = member.value
+    }
+  }
+  return { ...around(node, key), exact: true }
+}
+
+/**
+ * What is inside a Markdown code fence the text may be wrapped in, as a chat often hands over a
+ * source, and where it starts in the text. Text with no fence is taken as it is.
+ */
+export function unfence(text: string): { text: string; offset: number } {
+  const fenced = /^(\s*```[\w-]*\s*\n)([\s\S]*?)\n\s*```\s*$/.exec(text)
+  return fenced ? { text: fenced[2], offset: fenced[1].length } : { text, offset: 0 }
+}
+
+/**
+ * What is wrong with text that is not JSON, in words for someone who does not write JSON, to
+ * follow "is not valid JSON", and where, as an offset into the text it is given: `null` for JSON
+ * and for nothing. `JSON.parse` is what says whether it is JSON; `jsonError` says where, which
+ * `JSON.parse` does not in every browser.
+ */
+export function jsonProblem(text: string): { message: string; at?: number } | null {
+  if (!text.trim()) return null
+  const { text: body, offset } = unfence(text)
+  try {
+    JSON.parse(body)
+    return null
+  } catch (error) {
+    const found = jsonError(body)
+    if (!found) return { message: `(${error instanceof Error ? error.message : String(error)})` }
+    const at = offset + found.offset
+    const { line, column } = lineColumn(text, at)
+    return { message: `at line ${line}, column ${column}: ${found.message}`, at }
+  }
+}
+
+/** Where to take the person to in a source: an offset, or what a problem's path points at. */
+export type Target = { at: number } | { path: string }
+
+/** The stretch of the text a target is, in the text as it is, fence and all; `null` where it has none. */
+export function place(text: string, target: Target): Range | null {
+  if ('at' in target) return { from: target.at, to: Math.min(target.at + 1, text.length) }
+  const { text: body, offset } = unfence(text)
+  const found = locate(body, target.path)
+  return found && { from: found.from + offset, to: found.to + offset }
+}