From e3a1f190572708b422457e2d50eb031f85ba4f52 Mon Sep 17 00:00:00 2001
From: Simon Willison <swillison@gmail.com>
Date: Sat, 13 Jun 2026 14:19:39 -0700
Subject: [PATCH 01/23] Edit/delete icon prototype

---
 datasette/static/app.css | 55 +++++++++++++++++++++++++++++++++
 datasette/views/table.py | 67 +++++++++++++++++++++++++++++++++++-----
 2 files changed, 115 insertions(+), 7 deletions(-)

diff --git a/datasette/static/app.css b/datasette/static/app.css
index 6d675d9f..ec3a85fb 100644
--- a/datasette/static/app.css
+++ b/datasette/static/app.css
@@ -1192,6 +1192,50 @@ dialog.set-column-type-dialog::backdrop {
     cursor: wait;
 }
 
+.row-link-with-actions {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    flex-wrap: wrap;
+}
+
+.row-inline-actions {
+    display: inline-flex;
+    gap: 0.2rem;
+    align-items: center;
+}
+
+.row-inline-action {
+    appearance: none;
+    border: 1px solid rgba(74, 85, 104, 0.24);
+    background: transparent;
+    color: #4a5568;
+    border-radius: 4px;
+    cursor: pointer;
+    display: inline-grid;
+    place-items: center;
+    min-height: 24px;
+    min-width: 24px;
+    padding: 2px;
+    position: relative;
+}
+
+.row-inline-action:hover,
+.row-inline-action:focus {
+    background: rgba(74, 85, 104, 0.07);
+}
+
+.row-inline-action:focus {
+    outline: 3px solid #b3d4ff;
+    outline-offset: 1px;
+}
+
+.row-inline-action-icon {
+    display: block;
+    height: 13px;
+    width: 13px;
+}
+
 @media (max-width: 640px) {
     dialog.mobile-column-actions-dialog {
         width: 95vw;
@@ -1239,6 +1283,17 @@ dialog.set-column-type-dialog::backdrop {
         padding-left: 18px;
         padding-right: 18px;
     }
+
+    .row-inline-action {
+        min-height: 30px;
+        min-width: 30px;
+        padding: 4px;
+    }
+
+    .row-inline-action-icon {
+        height: 14px;
+        width: 14px;
+    }
 }
 
 @media only screen and (max-width: 576px) {
diff --git a/datasette/views/table.py b/datasette/views/table.py
index 65388c9c..49238ff4 100644
--- a/datasette/views/table.py
+++ b/datasette/views/table.py
@@ -194,6 +194,13 @@ async def display_columns_and_rows(
     pks_for_display = pks
     if not pks_for_display:
         pks_for_display = ["rowid"]
+    row_action_permissions = {}
+    if link_column and request is not None and db.is_mutable:
+        row_action_permissions = await datasette.allowed_many(
+            actions=["update-row", "delete-row"],
+            resource=TableResource(database=database_name, table=table_name),
+            actor=request.actor,
+        )
 
     columns = []
     for r in description:
@@ -233,19 +240,65 @@ async def display_columns_and_rows(
         if link_column:
             is_special_link_column = len(pks) != 1
             pk_path = path_from_row_pks(row, pks, not pks, False)
+            row_path = path_from_row_pks(row, pks, not pks)
+            row_link = '<a href="{table_path}/{flat_pks_quoted}">{flat_pks}</a>'.format(
+                table_path=datasette.urls.table(database_name, table_name),
+                flat_pks=str(markupsafe.escape(pk_path)),
+                flat_pks_quoted=row_path,
+            )
+            edit_icon = (
+                '<svg class="row-inline-action-icon" aria-hidden="true" '
+                'xmlns="http://www.w3.org/2000/svg" width="14" height="14" '
+                'viewBox="0 0 24 24" fill="none" stroke="currentColor" '
+                'stroke-width="2" stroke-linecap="round" stroke-linejoin="round">'
+                '<path d="M12 20h9"></path>'
+                '<path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"></path>'
+                "</svg>"
+            )
+            delete_icon = (
+                '<svg class="row-inline-action-icon" aria-hidden="true" '
+                'xmlns="http://www.w3.org/2000/svg" width="14" height="14" '
+                'viewBox="0 0 24 24" fill="none" stroke="currentColor" '
+                'stroke-width="2" stroke-linecap="round" stroke-linejoin="round">'
+                '<path d="M3 6h18"></path>'
+                '<path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>'
+                '<path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path>'
+                '<path d="M10 11v6"></path>'
+                '<path d="M14 11v6"></path>'
+                "</svg>"
+            )
+            row_actions = []
+            if row_action_permissions.get("update-row"):
+                row_actions.append(
+                    '<button type="button" class="row-inline-action row-inline-action-edit" '
+                    'aria-label="Edit row {row_label}" title="Edit row">'
+                    "{edit_icon}</button>".format(
+                        edit_icon=edit_icon,
+                        row_label=markupsafe.escape(pk_path),
+                    )
+                )
+            if row_action_permissions.get("delete-row"):
+                row_actions.append(
+                    '<button type="button" class="row-inline-action row-inline-action-delete" '
+                    'aria-label="Delete row {row_label}" title="Delete row">'
+                    "{delete_icon}</button>".format(
+                        delete_icon=delete_icon,
+                        row_label=markupsafe.escape(pk_path),
+                    )
+                )
+            if row_actions:
+                row_link = (
+                    '<span class="row-link-with-actions">{row_link}'
+                    '<span class="row-inline-actions" aria-label="Row actions">'
+                    "{row_actions}</span></span>"
+                ).format(row_link=row_link, row_actions="".join(row_actions))
             cells.append(
                 {
                     "column": pks[0] if len(pks) == 1 else "Link",
                     "value_type": "pk",
                     "is_special_link_column": is_special_link_column,
                     "raw": pk_path,
-                    "value": markupsafe.Markup(
-                        '<a href="{table_path}/{flat_pks_quoted}">{flat_pks}</a>'.format(
-                            table_path=datasette.urls.table(database_name, table_name),
-                            flat_pks=str(markupsafe.escape(pk_path)),
-                            flat_pks_quoted=path_from_row_pks(row, pks, not pks),
-                        )
-                    ),
+                    "value": markupsafe.Markup(row_link),
                 }
             )
 

From de5f72dd8847be184f5283491a4df38c63f823bd Mon Sep 17 00:00:00 2001
From: Simon Willison <swillison@gmail.com>
Date: Sat, 13 Jun 2026 14:38:49 -0700
Subject: [PATCH 02/23] hash busting thing on table.js

Addd for Codex Desktop, which has real trouble with edits
to files like this as the in-app browser does not seem to
have a cache-busting reload option.
---
 datasette/app.py               | 1 +
 datasette/templates/table.html | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/datasette/app.py b/datasette/app.py
index 9979b6c5..4931f486 100644
--- a/datasette/app.py
+++ b/datasette/app.py
@@ -2312,6 +2312,7 @@ class Datasette:
                 and "ds_actor" in request.cookies
                 and request.actor,
                 "app_css_hash": self.app_css_hash(),
+                "table_js_hash": self.static_hash("table.js"),
                 "zip": zip,
                 "body_scripts": body_scripts,
                 "format_bytes": format_bytes,
diff --git a/datasette/templates/table.html b/datasette/templates/table.html
index c841e1be..4dc908e0 100644
--- a/datasette/templates/table.html
+++ b/datasette/templates/table.html
@@ -5,7 +5,7 @@
 {% block extra_head %}
 {{- super() -}}
 <script src="{{ urls.static('column-chooser.js') }}" defer></script>
-<script src="{{ urls.static('table.js') }}" defer></script>
+<script src="{{ urls.static('table.js') }}?hash={{ table_js_hash }}" defer></script>
 <script src="{{ urls.static('mobile-column-actions.js') }}" defer></script>
 <script>DATASETTE_ALLOW_FACET = {{ datasette_allow_facet }};</script>
 <style>

From 20824bd707c35ec56830ba8465cb3b5f7698a6a3 Mon Sep 17 00:00:00 2001
From: Simon Willison <swillison@gmail.com>
Date: Sat, 13 Jun 2026 14:40:29 -0700
Subject: [PATCH 03/23] Delete icon on table page now works

---
 datasette/static/app.css        | 159 +++++++++++++++++++
 datasette/static/table.js       | 273 ++++++++++++++++++++++++++++++++
 datasette/templates/_table.html |   2 +-
 datasette/views/table.py        |  37 ++++-
 tests/test_table_html.py        |  47 ++++++
 5 files changed, 513 insertions(+), 5 deletions(-)

diff --git a/datasette/static/app.css b/datasette/static/app.css
index ec3a85fb..36335146 100644
--- a/datasette/static/app.css
+++ b/datasette/static/app.css
@@ -1192,6 +1192,147 @@ dialog.set-column-type-dialog::backdrop {
     cursor: wait;
 }
 
+.row-delete-status {
+    margin: 0 0 0.75rem;
+    padding: 8px 10px;
+    border-left: 4px solid #54AC8E;
+    background: rgba(103,201,141,0.12);
+    color: #222;
+}
+
+.row-delete-status[hidden] {
+    display: none;
+}
+
+.row-delete-status-error {
+    border-left-color: #D0021B;
+    background: rgba(208,2,27,0.12);
+}
+
+dialog.row-delete-dialog {
+    --ink: #0f0f0f;
+    --paper: #f5f3ef;
+    --muted: #6b6b6b;
+    --rule: #e2dfd8;
+    --accent: #1a56db;
+    --card: #ffffff;
+    border: none;
+    border-radius: var(--modal-border-radius, 0.75rem);
+    padding: 0;
+    margin: auto;
+    width: min(440px, calc(100vw - 32px));
+    max-width: 95vw;
+    box-shadow: var(--modal-shadow, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04));
+    animation: datasette-modal-slide-in var(--modal-animation-duration, 0.2s) ease-out;
+    overflow: hidden;
+    font-family: system-ui, -apple-system, sans-serif;
+    background: var(--card);
+}
+
+dialog.row-delete-dialog[open] {
+    display: flex;
+    flex-direction: column;
+}
+
+dialog.row-delete-dialog::backdrop {
+    background: var(--modal-backdrop-bg, rgba(0, 0, 0, 0.5));
+    backdrop-filter: var(--modal-backdrop-blur, blur(4px));
+    -webkit-backdrop-filter: var(--modal-backdrop-blur, blur(4px));
+    animation: datasette-modal-fade-in var(--modal-animation-duration, 0.2s) ease-out;
+}
+
+.row-delete-dialog .modal-header {
+    padding: 20px 24px 12px;
+    border-bottom: 1px solid var(--rule);
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 12px;
+    flex-shrink: 0;
+}
+
+.row-delete-dialog .modal-title {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--ink);
+}
+
+.row-delete-message,
+.row-delete-error {
+    margin: 0;
+    padding: 16px 24px 0;
+}
+
+.row-delete-message {
+    color: var(--ink);
+    font-size: 0.95rem;
+}
+
+.row-delete-id {
+    display: inline;
+    padding: 2px 5px;
+    border: 1px solid var(--rule);
+    border-radius: 4px;
+    background: var(--paper);
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: 0.92em;
+    overflow-wrap: anywhere;
+}
+
+.row-delete-error {
+    color: #b91c1c;
+    font-size: 0.9rem;
+}
+
+.row-delete-dialog .modal-footer {
+    padding: 18px 20px 14px;
+    border-top: 1px solid var(--rule);
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 10px;
+    flex-shrink: 0;
+    background: var(--paper);
+    margin-top: 18px;
+}
+
+.row-delete-dialog .btn {
+    border: none;
+    border-radius: 5px;
+    padding: 9px 20px;
+    font-size: 0.85rem;
+    font-weight: 500;
+    cursor: pointer;
+    touch-action: manipulation;
+    font-family: inherit;
+    transition: background 0.12s;
+}
+
+.row-delete-dialog .btn-ghost {
+    background: transparent;
+    color: var(--muted);
+    border: 1px solid var(--rule);
+}
+
+.row-delete-dialog .btn-ghost:hover {
+    background: var(--rule);
+    color: var(--ink);
+}
+
+.row-delete-dialog .btn-primary {
+    background: var(--accent);
+    color: #fff;
+}
+
+.row-delete-dialog .btn-primary:hover {
+    background: #1949b8;
+}
+
+.row-delete-dialog .btn:disabled {
+    opacity: 0.65;
+    cursor: wait;
+}
+
 .row-link-with-actions {
     display: inline-flex;
     align-items: center;
@@ -1284,6 +1425,24 @@ dialog.set-column-type-dialog::backdrop {
         padding-right: 18px;
     }
 
+    dialog.row-delete-dialog {
+        width: 95vw;
+        max-height: 85vh;
+        border-radius: 0.5rem;
+    }
+
+    .row-delete-dialog .modal-header,
+    .row-delete-message,
+    .row-delete-error {
+        padding-left: 18px;
+        padding-right: 18px;
+    }
+
+    .row-delete-dialog .modal-footer {
+        padding-left: 18px;
+        padding-right: 18px;
+    }
+
     .row-inline-action {
         min-height: 30px;
         min-width: 30px;
diff --git a/datasette/static/table.js b/datasette/static/table.js
index e9115453..cd69f474 100644
--- a/datasette/static/table.js
+++ b/datasette/static/table.js
@@ -12,6 +12,8 @@ var DROPDOWN_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="14" heig
 
 var SET_COLUMN_TYPE_DIALOG_ID = "set-column-type-dialog";
 var setColumnTypeDialogState = null;
+var ROW_DELETE_DIALOG_ID = "row-delete-dialog";
+var rowDeleteDialogState = null;
 
 function getParams() {
   return new URLSearchParams(location.search);
@@ -355,6 +357,276 @@ function openSetColumnTypeDialog(th) {
   }
 }
 
+function ensureRowDeleteStatus(manager) {
+  var status = document.querySelector(".row-delete-status");
+  if (status) {
+    return status;
+  }
+
+  status = document.createElement("p");
+  status.className = "row-delete-status";
+  status.hidden = true;
+  status.setAttribute("role", "status");
+  status.setAttribute("aria-live", "polite");
+  status.setAttribute("tabindex", "-1");
+
+  var tableWrapper = document.querySelector(manager.selectors.tableWrapper);
+  if (tableWrapper && tableWrapper.parentNode) {
+    tableWrapper.parentNode.insertBefore(status, tableWrapper);
+  } else {
+    document.body.appendChild(status);
+  }
+  return status;
+}
+
+function showRowDeleteStatus(manager, message, isError) {
+  var status = ensureRowDeleteStatus(manager);
+  status.hidden = false;
+  status.classList.toggle("row-delete-status-error", !!isError);
+  status.textContent = message;
+  return status;
+}
+
+function setRowDeleteDialogBusy(state, isBusy) {
+  state.isBusy = isBusy;
+  state.confirmButton.disabled = isBusy;
+  state.cancelButton.disabled = isBusy;
+  state.confirmButton.textContent = isBusy ? "Deleting..." : "Delete row";
+}
+
+function clearRowDeleteDialogError(state) {
+  state.error.hidden = true;
+  state.error.textContent = "";
+}
+
+function showRowDeleteDialogError(state, message) {
+  state.error.hidden = false;
+  state.error.textContent = message;
+}
+
+function rowDeleteRequestError(response, data) {
+  if (data && data.errors) {
+    return new Error(data.errors.join(" "));
+  }
+  if (data && data.error) {
+    return new Error(data.error);
+  }
+  if (data && data.title) {
+    return new Error(data.title);
+  }
+  return new Error("Delete failed with HTTP " + response.status);
+}
+
+function nextRowDeleteFocusTarget(row, manager) {
+  var sibling = row.nextElementSibling;
+  while (sibling) {
+    var nextButton = sibling.querySelector(
+      'button[data-row-action="delete"]:not([disabled])',
+    );
+    if (nextButton) {
+      return nextButton;
+    }
+    sibling = sibling.nextElementSibling;
+  }
+
+  sibling = row.previousElementSibling;
+  while (sibling) {
+    var previousButton = sibling.querySelector(
+      'button[data-row-action="delete"]:not([disabled])',
+    );
+    if (previousButton) {
+      return previousButton;
+    }
+    sibling = sibling.previousElementSibling;
+  }
+
+  return ensureRowDeleteStatus(manager);
+}
+
+function ensureRowDeleteDialog(manager) {
+  if (rowDeleteDialogState) {
+    return rowDeleteDialogState;
+  }
+  if (!window.HTMLDialogElement) {
+    return null;
+  }
+
+  var dialog = document.createElement("dialog");
+  dialog.id = ROW_DELETE_DIALOG_ID;
+  dialog.className = "row-delete-dialog";
+  dialog.setAttribute("aria-labelledby", "row-delete-title");
+  dialog.setAttribute("aria-describedby", "row-delete-message");
+  dialog.innerHTML = `
+    <div class="modal-header">
+      <span class="modal-title" id="row-delete-title">Delete row</span>
+    </div>
+    <p class="row-delete-message" id="row-delete-message">Delete row <span class="row-delete-id"></span>?</p>
+    <p class="row-delete-error" role="alert" hidden></p>
+    <div class="modal-footer">
+      <button type="button" class="btn btn-ghost row-delete-cancel">Cancel</button>
+      <button type="button" class="btn btn-primary row-delete-confirm">Delete row</button>
+    </div>
+  `;
+  document.body.appendChild(dialog);
+
+  rowDeleteDialogState = {
+    dialog: dialog,
+    message: dialog.querySelector(".row-delete-message"),
+    rowId: dialog.querySelector(".row-delete-id"),
+    error: dialog.querySelector(".row-delete-error"),
+    cancelButton: dialog.querySelector(".row-delete-cancel"),
+    confirmButton: dialog.querySelector(".row-delete-confirm"),
+    currentRow: null,
+    currentDeleteUrl: null,
+    currentPkPath: null,
+    manager: manager,
+    isBusy: false,
+    shouldRestoreFocus: true,
+  };
+
+  rowDeleteDialogState.cancelButton.addEventListener("click", function () {
+    if (!rowDeleteDialogState.isBusy) {
+      rowDeleteDialogState.shouldRestoreFocus = true;
+      dialog.close();
+    }
+  });
+
+  dialog.addEventListener("click", function (ev) {
+    if (ev.target === dialog && !rowDeleteDialogState.isBusy) {
+      rowDeleteDialogState.shouldRestoreFocus = true;
+      dialog.close();
+    }
+  });
+
+  dialog.addEventListener("keydown", function (ev) {
+    if (
+      ev.key === "Enter" &&
+      document.activeElement === rowDeleteDialogState.confirmButton
+    ) {
+      ev.preventDefault();
+      if (!rowDeleteDialogState.isBusy) {
+        rowDeleteDialogState.confirmButton.click();
+      }
+      return;
+    }
+    if (ev.key !== "Escape") {
+      return;
+    }
+    if (rowDeleteDialogState.isBusy) {
+      ev.preventDefault();
+      return;
+    }
+    ev.preventDefault();
+    rowDeleteDialogState.shouldRestoreFocus = true;
+    dialog.close();
+  });
+
+  dialog.addEventListener("cancel", function (ev) {
+    if (rowDeleteDialogState.isBusy) {
+      ev.preventDefault();
+    } else {
+      rowDeleteDialogState.shouldRestoreFocus = true;
+    }
+  });
+
+  dialog.addEventListener("close", function () {
+    var state = rowDeleteDialogState;
+    clearRowDeleteDialogError(state);
+    setRowDeleteDialogBusy(state, false);
+    if (
+      state.shouldRestoreFocus &&
+      state.currentButton &&
+      document.contains(state.currentButton)
+    ) {
+      state.currentButton.focus();
+    }
+  });
+
+  rowDeleteDialogState.confirmButton.addEventListener("click", async function () {
+    var state = rowDeleteDialogState;
+    clearRowDeleteDialogError(state);
+    setRowDeleteDialogBusy(state, true);
+
+    try {
+      var response = await fetch(state.currentDeleteUrl, {
+        method: "POST",
+        headers: {
+          Accept: "application/json",
+        },
+      });
+      var data = null;
+      try {
+        data = await response.json();
+      } catch (_error) {
+        data = null;
+      }
+      if (!response.ok || (data && data.ok === false)) {
+        throw rowDeleteRequestError(response, data);
+      }
+
+      var focusTarget = nextRowDeleteFocusTarget(state.currentRow, state.manager);
+      var statusMessage = state.currentPkPath
+        ? "Deleted row " + state.currentPkPath + "."
+        : "Deleted row.";
+      state.shouldRestoreFocus = false;
+      state.dialog.close();
+      state.currentRow.remove();
+      showRowDeleteStatus(state.manager, statusMessage, false);
+      if (focusTarget && document.contains(focusTarget)) {
+        focusTarget.focus();
+      } else {
+        ensureRowDeleteStatus(state.manager).focus();
+      }
+    } catch (error) {
+      setRowDeleteDialogBusy(state, false);
+      showRowDeleteDialogError(state, error.message || "Delete failed");
+    }
+  });
+
+  return rowDeleteDialogState;
+}
+
+function openRowDeleteDialog(button, manager) {
+  var row = button.closest("tr[data-row-delete-url]");
+  if (!row || !row.dataset.rowDeleteUrl) {
+    return;
+  }
+  var state = ensureRowDeleteDialog(manager);
+  if (!state) {
+    return;
+  }
+
+  state.manager = manager;
+  state.currentButton = button;
+  state.currentRow = row;
+  state.currentDeleteUrl = row.dataset.rowDeleteUrl;
+  state.currentPkPath = row.dataset.rowPkPath || "";
+  state.shouldRestoreFocus = true;
+
+  clearRowDeleteDialogError(state);
+  setRowDeleteDialogBusy(state, false);
+  state.rowId.textContent = state.currentPkPath || "this row";
+
+  if (!state.dialog.open) {
+    state.dialog.showModal();
+  }
+  state.confirmButton.focus();
+}
+
+function initRowDeleteActions(manager) {
+  if (!window.fetch || !window.HTMLDialogElement) {
+    return;
+  }
+  document.addEventListener("click", function (ev) {
+    var button = ev.target.closest('button[data-row-action="delete"]');
+    if (!button) {
+      return;
+    }
+    ev.preventDefault();
+    openRowDeleteDialog(button, manager);
+  });
+}
+
 function canChooseColumns() {
   return !!(
     document.querySelector("column-chooser") && window._columnChooserData
@@ -750,6 +1022,7 @@ document.addEventListener("datasette_init", function (evt) {
 
   // Main table
   initDatasetteTable(manager);
+  initRowDeleteActions(manager);
 
   // Other UI functions with interactive JS needs
   addButtonsToFilterRows(manager);
diff --git a/datasette/templates/_table.html b/datasette/templates/_table.html
index f47a325f..36b0ef7e 100644
--- a/datasette/templates/_table.html
+++ b/datasette/templates/_table.html
@@ -22,7 +22,7 @@
         </thead>
         <tbody>
         {% for row in display_rows %}
-            <tr>
+            <tr{% if row.pk_path is not none %} data-row-pk-path="{{ row.pk_path }}" data-row-path="{{ row.row_path }}" data-row-url="{{ row.row_url }}" data-row-delete-url="{{ row.delete_url }}"{% endif %}>
                 {% for cell in row %}
                     <td class="col-{{ cell.column|to_css_class }} type-{{ cell.value_type }}">{{ cell.value }}</td>
                 {% endfor %}
diff --git a/datasette/views/table.py b/datasette/views/table.py
index 49238ff4..f1d4ea45 100644
--- a/datasette/views/table.py
+++ b/datasette/views/table.py
@@ -59,8 +59,19 @@ LINK_WITH_VALUE = '<a href="{base_url}{database}/{table}/{link_id}">{id}</a>'
 
 
 class Row:
-    def __init__(self, cells):
+    def __init__(
+        self,
+        cells,
+        pk_path=None,
+        row_path=None,
+        row_url=None,
+        delete_url=None,
+    ):
         self.cells = cells
+        self.pk_path = pk_path
+        self.row_path = row_path
+        self.row_url = row_url
+        self.delete_url = delete_url
 
     def __iter__(self):
         return iter(self.cells)
@@ -241,8 +252,14 @@ async def display_columns_and_rows(
             is_special_link_column = len(pks) != 1
             pk_path = path_from_row_pks(row, pks, not pks, False)
             row_path = path_from_row_pks(row, pks, not pks)
+            table_path = datasette.urls.table(database_name, table_name)
+            row_url = "{table_path}/{row_path}".format(
+                table_path=table_path,
+                row_path=row_path,
+            )
+            delete_url = "{row_url}/-/delete".format(row_url=row_url)
             row_link = '<a href="{table_path}/{flat_pks_quoted}">{flat_pks}</a>'.format(
-                table_path=datasette.urls.table(database_name, table_name),
+                table_path=table_path,
                 flat_pks=str(markupsafe.escape(pk_path)),
                 flat_pks_quoted=row_path,
             )
@@ -280,7 +297,8 @@ async def display_columns_and_rows(
             if row_action_permissions.get("delete-row"):
                 row_actions.append(
                     '<button type="button" class="row-inline-action row-inline-action-delete" '
-                    'aria-label="Delete row {row_label}" title="Delete row">'
+                    'aria-label="Delete row {row_label}" title="Delete row" '
+                    'data-row-action="delete">'
                     "{delete_icon}</button>".format(
                         delete_icon=delete_icon,
                         row_label=markupsafe.escape(pk_path),
@@ -404,7 +422,18 @@ async def display_columns_and_rows(
                     ),
                 }
             )
-        cell_rows.append(Row(cells))
+        if link_column:
+            cell_rows.append(
+                Row(
+                    cells,
+                    pk_path=pk_path,
+                    row_path=row_path,
+                    row_url=row_url,
+                    delete_url=delete_url,
+                )
+            )
+        else:
+            cell_rows.append(Row(cells))
 
     if link_column:
         # Add the link column header.
diff --git a/tests/test_table_html.py b/tests/test_table_html.py
index 63e233fa..14d463ae 100644
--- a/tests/test_table_html.py
+++ b/tests/test_table_html.py
@@ -1,4 +1,5 @@
 from datasette.app import Datasette
+from datasette.database import Database
 from bs4 import BeautifulSoup as Soup
 from .fixtures import make_app_client
 import pathlib
@@ -828,6 +829,52 @@ async def test_mobile_column_actions_present(ds_client, path):
     assert len(ths) >= 1
 
 
+@pytest.mark.asyncio
+async def test_row_delete_action_data_attributes():
+    ds = Datasette(
+        [],
+        config={
+            "databases": {
+                "data": {
+                    "tables": {
+                        "items": {
+                            "permissions": {
+                                "delete-row": {"id": "root"},
+                            },
+                        },
+                    },
+                },
+            },
+        },
+    )
+    try:
+        db = ds.add_database(
+            Database(ds, memory_name="test_row_delete_actions"), name="data"
+        )
+        await db.execute_write_script("""
+            create table items (id integer primary key, name text);
+            insert into items (id, name) values (1, 'One');
+            """)
+        response = await ds.client.get("/data/items", actor={"id": "root"})
+        assert response.status_code == 200
+        soup = Soup(response.text, "html.parser")
+        row = soup.select_one("table.rows-and-columns tbody tr")
+        assert row["data-row-pk-path"] == "1"
+        assert row["data-row-path"] == "1"
+        assert row["data-row-url"] == "/data/items/1"
+        assert row["data-row-delete-url"] == "/data/items/1/-/delete"
+
+        button = row.select_one(
+            'button.row-inline-action-delete[data-row-action="delete"]'
+        )
+        assert button is not None
+        assert button["aria-label"] == "Delete row 1"
+        assert button["title"] == "Delete row"
+        assert button.find("svg") is not None
+    finally:
+        ds.close()
+
+
 @pytest.mark.asyncio
 async def test_zero_row_table_renders_thead(ds_client):
     response = await ds_client.get("/fixtures/123_starts_with_digits")

From ad3456dc4af9f574c3c34f79951bf087bff7ffb0 Mon Sep 17 00:00:00 2001
From: Simon Willison <swillison@gmail.com>
Date: Sat, 13 Jun 2026 14:48:44 -0700
Subject: [PATCH 04/23] Display of edit modal (no save yet)

---
 datasette/static/app.css        | 226 +++++++++++++++++++++++++
 datasette/static/table.js       | 287 ++++++++++++++++++++++++++++++++
 datasette/templates/_table.html |   2 +-
 datasette/views/table.py        |   7 +-
 tests/test_table_html.py        |  10 ++
 5 files changed, 530 insertions(+), 2 deletions(-)

diff --git a/datasette/static/app.css b/datasette/static/app.css
index 36335146..5c92d59c 100644
--- a/datasette/static/app.css
+++ b/datasette/static/app.css
@@ -1333,6 +1333,199 @@ dialog.row-delete-dialog::backdrop {
     cursor: wait;
 }
 
+dialog.row-edit-dialog {
+    --ink: #0f0f0f;
+    --paper: #f5f3ef;
+    --muted: #6b6b6b;
+    --rule: #e2dfd8;
+    --accent: #1a56db;
+    --card: #ffffff;
+    border: none;
+    border-radius: var(--modal-border-radius, 0.75rem);
+    padding: 0;
+    margin: auto;
+    width: min(720px, calc(100vw - 32px));
+    max-width: 95vw;
+    max-height: min(780px, calc(100vh - 32px));
+    box-shadow: var(--modal-shadow, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04));
+    animation: datasette-modal-slide-in var(--modal-animation-duration, 0.2s) ease-out;
+    overflow: hidden;
+    font-family: system-ui, -apple-system, sans-serif;
+    background: var(--card);
+}
+
+dialog.row-edit-dialog[open] {
+    display: flex;
+    flex-direction: column;
+}
+
+dialog.row-edit-dialog::backdrop {
+    background: var(--modal-backdrop-bg, rgba(0, 0, 0, 0.5));
+    backdrop-filter: var(--modal-backdrop-blur, blur(4px));
+    -webkit-backdrop-filter: var(--modal-backdrop-blur, blur(4px));
+    animation: datasette-modal-fade-in var(--modal-animation-duration, 0.2s) ease-out;
+}
+
+.row-edit-dialog .modal-header {
+    padding: 20px 24px 12px;
+    border-bottom: 1px solid var(--rule);
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-shrink: 0;
+}
+
+.row-edit-dialog .modal-title {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--ink);
+}
+
+.row-edit-form {
+    display: flex;
+    flex: 1 1 auto;
+    min-height: 0;
+    flex-direction: column;
+}
+
+.row-edit-summary,
+.row-edit-loading,
+.row-edit-error {
+    margin: 0;
+    padding: 12px 24px 0;
+}
+
+.row-edit-summary,
+.row-edit-loading {
+    color: var(--muted);
+    font-size: 0.9rem;
+}
+
+.row-edit-id {
+    display: inline;
+    padding: 2px 5px;
+    border: 1px solid var(--rule);
+    border-radius: 4px;
+    background: var(--paper);
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: 0.92em;
+    overflow-wrap: anywhere;
+}
+
+.row-edit-error {
+    color: #b91c1c;
+    font-size: 0.9rem;
+}
+
+.row-edit-fields {
+    display: grid;
+    gap: 14px;
+    padding: 16px 24px 24px;
+    overflow-y: auto;
+}
+
+.row-edit-field {
+    display: grid;
+    grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
+    gap: 12px;
+    align-items: start;
+}
+
+.row-edit-label {
+    padding-top: 8px;
+    color: var(--ink);
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: 0.82rem;
+    overflow-wrap: anywhere;
+}
+
+.row-edit-control-wrap {
+    display: grid;
+    gap: 5px;
+}
+
+.row-edit-input {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    border: 1px solid var(--rule);
+    border-radius: 5px;
+    padding: 8px 10px;
+    color: var(--ink);
+    background: #fff;
+    font: inherit;
+}
+
+textarea.row-edit-input {
+    resize: vertical;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: 0.82rem;
+    line-height: 1.45;
+}
+
+.row-edit-input:focus {
+    border-color: var(--accent);
+    outline: 3px solid rgba(26, 86, 219, 0.12);
+}
+
+.row-edit-input[readonly] {
+    color: var(--muted);
+    background: var(--paper);
+}
+
+.row-edit-field-meta {
+    color: var(--muted);
+    font-size: 0.78rem;
+}
+
+.row-edit-dialog .modal-footer {
+    padding: 14px 20px;
+    border-top: 1px solid var(--rule);
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 10px;
+    flex-shrink: 0;
+    background: var(--paper);
+}
+
+.row-edit-dialog .btn {
+    border: none;
+    border-radius: 5px;
+    padding: 9px 20px;
+    font-size: 0.85rem;
+    font-weight: 500;
+    cursor: pointer;
+    touch-action: manipulation;
+    font-family: inherit;
+    transition: background 0.12s;
+}
+
+.row-edit-dialog .btn-ghost {
+    background: transparent;
+    color: var(--muted);
+    border: 1px solid var(--rule);
+}
+
+.row-edit-dialog .btn-ghost:hover {
+    background: var(--rule);
+    color: var(--ink);
+}
+
+.row-edit-dialog .btn-primary {
+    background: var(--accent);
+    color: #fff;
+}
+
+.row-edit-dialog .btn-primary:hover {
+    background: #1949b8;
+}
+
+.row-edit-dialog .btn:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+}
+
 .row-link-with-actions {
     display: inline-flex;
     align-items: center;
@@ -1443,6 +1636,35 @@ dialog.row-delete-dialog::backdrop {
         padding-right: 18px;
     }
 
+    dialog.row-edit-dialog {
+        width: 95vw;
+        max-height: 85vh;
+        border-radius: 0.5rem;
+    }
+
+    .row-edit-dialog .modal-header,
+    .row-edit-summary,
+    .row-edit-loading,
+    .row-edit-error,
+    .row-edit-fields {
+        padding-left: 18px;
+        padding-right: 18px;
+    }
+
+    .row-edit-field {
+        grid-template-columns: 1fr;
+        gap: 5px;
+    }
+
+    .row-edit-label {
+        padding-top: 0;
+    }
+
+    .row-edit-dialog .modal-footer {
+        padding-left: 18px;
+        padding-right: 18px;
+    }
+
     .row-inline-action {
         min-height: 30px;
         min-width: 30px;
@@ -1507,6 +1729,10 @@ dialog.row-delete-dialog::backdrop {
         font-size: 0.8em;
     }
 
+    .row-inline-actions {
+        margin-bottom: 0.35rem;
+    }
+
     .select-wrapper {
         width: 100px;
     }
diff --git a/datasette/static/table.js b/datasette/static/table.js
index cd69f474..044c9509 100644
--- a/datasette/static/table.js
+++ b/datasette/static/table.js
@@ -14,6 +14,8 @@ var SET_COLUMN_TYPE_DIALOG_ID = "set-column-type-dialog";
 var setColumnTypeDialogState = null;
 var ROW_DELETE_DIALOG_ID = "row-delete-dialog";
 var rowDeleteDialogState = null;
+var ROW_EDIT_DIALOG_ID = "row-edit-dialog";
+var rowEditDialogState = null;
 
 function getParams() {
   return new URLSearchParams(location.search);
@@ -627,6 +629,290 @@ function initRowDeleteActions(manager) {
   });
 }
 
+function rowJsonUrl(row) {
+  var url = new URL(row.dataset.rowUrl, location.href);
+  url.pathname = url.pathname + ".json";
+  url.searchParams.set("_extra", "columns,column_types");
+  return url.toString();
+}
+
+function valueToEditText(value) {
+  if (value === null || typeof value === "undefined") {
+    return "";
+  }
+  if (typeof value === "object") {
+    return JSON.stringify(value, null, 2);
+  }
+  return String(value);
+}
+
+function shouldUseTextarea(value) {
+  if (value && typeof value === "object") {
+    return true;
+  }
+  var text = valueToEditText(value);
+  return text.length > 80 || text.indexOf("\n") !== -1;
+}
+
+function createRowEditField(column, value, isPk, columnType, index) {
+  var field = document.createElement("div");
+  field.className = "row-edit-field";
+
+  var fieldId = "row-edit-field-" + index;
+  var metaId = "row-edit-field-meta-" + index;
+  var label = document.createElement("label");
+  label.className = "row-edit-label";
+  label.setAttribute("for", fieldId);
+  label.textContent = column;
+
+  var controlWrap = document.createElement("div");
+  controlWrap.className = "row-edit-control-wrap";
+
+  var control = shouldUseTextarea(value)
+    ? document.createElement("textarea")
+    : document.createElement("input");
+  control.className = "row-edit-input";
+  control.id = fieldId;
+  control.name = column;
+  control.value = valueToEditText(value);
+  control.setAttribute("aria-describedby", metaId);
+  control.dataset.originalValue = valueToEditText(value);
+
+  if (control.nodeName === "TEXTAREA") {
+    control.rows = Math.min(8, Math.max(3, control.value.split("\n").length));
+  } else {
+    control.type = "text";
+  }
+
+  if (isPk) {
+    control.readOnly = true;
+  }
+
+  var meta = document.createElement("span");
+  meta.id = metaId;
+  meta.className = "row-edit-field-meta";
+  var metaParts = [];
+  if (isPk) {
+    metaParts.push("Primary key");
+  }
+  if (value === null) {
+    metaParts.push("Current value: NULL");
+    control.placeholder = "NULL";
+  }
+  if (columnType && columnType.type) {
+    metaParts.push("Custom type: " + columnType.type);
+  }
+  meta.textContent = metaParts.join(" · ");
+
+  controlWrap.appendChild(control);
+  if (meta.textContent) {
+    controlWrap.appendChild(meta);
+  }
+  field.appendChild(label);
+  field.appendChild(controlWrap);
+  return field;
+}
+
+function clearRowEditDialogError(state) {
+  state.error.hidden = true;
+  state.error.textContent = "";
+}
+
+function showRowEditDialogError(state, message) {
+  state.error.hidden = false;
+  state.error.textContent = message;
+}
+
+function setRowEditDialogLoading(state, isLoading) {
+  state.isLoading = isLoading;
+  state.loading.hidden = !isLoading;
+}
+
+function renderRowEditFields(state, data) {
+  var row = data.rows && data.rows.length ? data.rows[0] : null;
+  var columns = data.columns || (row ? Object.keys(row) : []);
+  var primaryKeys = data.primary_keys || [];
+  var columnTypes = data.column_types || {};
+
+  state.fields.innerHTML = "";
+  columns.forEach(function (column, index) {
+    state.fields.appendChild(
+      createRowEditField(
+        column,
+        row ? row[column] : null,
+        primaryKeys.indexOf(column) !== -1,
+        columnTypes[column],
+        index,
+      ),
+    );
+  });
+
+  var firstEditable = state.fields.querySelector(".row-edit-input:not([readonly])");
+  var firstField = state.fields.querySelector(".row-edit-input");
+  (firstEditable || firstField || state.cancelButton).focus();
+}
+
+function ensureRowEditDialog(manager) {
+  if (rowEditDialogState) {
+    return rowEditDialogState;
+  }
+  if (!window.HTMLDialogElement) {
+    return null;
+  }
+
+  var dialog = document.createElement("dialog");
+  dialog.id = ROW_EDIT_DIALOG_ID;
+  dialog.className = "row-edit-dialog";
+  dialog.setAttribute("aria-labelledby", "row-edit-title");
+  dialog.setAttribute("aria-describedby", "row-edit-summary");
+  dialog.innerHTML = `
+    <div class="modal-header">
+      <span class="modal-title" id="row-edit-title">Edit row</span>
+    </div>
+    <form class="row-edit-form">
+      <p class="row-edit-summary" id="row-edit-summary">Editing row <span class="row-edit-id"></span></p>
+      <p class="row-edit-loading">Loading row...</p>
+      <p class="row-edit-error" role="alert" hidden></p>
+      <div class="row-edit-fields"></div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-ghost row-edit-cancel">Cancel</button>
+        <button type="button" class="btn btn-primary row-edit-save" disabled>Save</button>
+      </div>
+    </form>
+  `;
+  document.body.appendChild(dialog);
+
+  rowEditDialogState = {
+    dialog: dialog,
+    form: dialog.querySelector(".row-edit-form"),
+    rowId: dialog.querySelector(".row-edit-id"),
+    loading: dialog.querySelector(".row-edit-loading"),
+    error: dialog.querySelector(".row-edit-error"),
+    fields: dialog.querySelector(".row-edit-fields"),
+    cancelButton: dialog.querySelector(".row-edit-cancel"),
+    saveButton: dialog.querySelector(".row-edit-save"),
+    currentButton: null,
+    currentRow: null,
+    currentPkPath: null,
+    loadId: 0,
+    manager: manager,
+    isLoading: false,
+    shouldRestoreFocus: true,
+  };
+
+  rowEditDialogState.form.addEventListener("submit", function (ev) {
+    ev.preventDefault();
+  });
+
+  rowEditDialogState.cancelButton.addEventListener("click", function () {
+    rowEditDialogState.shouldRestoreFocus = true;
+    dialog.close();
+  });
+
+  dialog.addEventListener("click", function (ev) {
+    if (ev.target === dialog) {
+      rowEditDialogState.shouldRestoreFocus = true;
+      dialog.close();
+    }
+  });
+
+  dialog.addEventListener("keydown", function (ev) {
+    if (ev.key !== "Escape") {
+      return;
+    }
+    ev.preventDefault();
+    rowEditDialogState.shouldRestoreFocus = true;
+    dialog.close();
+  });
+
+  dialog.addEventListener("cancel", function () {
+    rowEditDialogState.shouldRestoreFocus = true;
+  });
+
+  dialog.addEventListener("close", function () {
+    var state = rowEditDialogState;
+    state.loadId += 1;
+    clearRowEditDialogError(state);
+    setRowEditDialogLoading(state, false);
+    if (
+      state.shouldRestoreFocus &&
+      state.currentButton &&
+      document.contains(state.currentButton)
+    ) {
+      state.currentButton.focus();
+    }
+  });
+
+  return rowEditDialogState;
+}
+
+async function openRowEditDialog(button, manager) {
+  var row = button.closest("tr[data-row-url]");
+  if (!row || !row.dataset.rowUrl) {
+    return;
+  }
+  var state = ensureRowEditDialog(manager);
+  if (!state) {
+    return;
+  }
+
+  state.manager = manager;
+  state.currentButton = button;
+  state.currentRow = row;
+  state.currentPkPath = row.dataset.rowPkPath || "";
+  state.shouldRestoreFocus = true;
+  state.loadId += 1;
+  var loadId = state.loadId;
+
+  clearRowEditDialogError(state);
+  setRowEditDialogLoading(state, true);
+  state.fields.innerHTML = "";
+  state.rowId.textContent = state.currentPkPath || "this row";
+
+  if (!state.dialog.open) {
+    state.dialog.showModal();
+  }
+  state.cancelButton.focus();
+
+  try {
+    var response = await fetch(rowJsonUrl(row), {
+      headers: {
+        Accept: "application/json",
+      },
+    });
+    var data = await response.json();
+    if (loadId !== state.loadId) {
+      return;
+    }
+    if (!response.ok || data.ok === false) {
+      throw rowDeleteRequestError(response, data);
+    }
+    setRowEditDialogLoading(state, false);
+    renderRowEditFields(state, data);
+  } catch (error) {
+    if (loadId !== state.loadId) {
+      return;
+    }
+    setRowEditDialogLoading(state, false);
+    showRowEditDialogError(state, error.message || "Could not load row");
+    state.cancelButton.focus();
+  }
+}
+
+function initRowEditActions(manager) {
+  if (!window.fetch || !window.HTMLDialogElement) {
+    return;
+  }
+  document.addEventListener("click", function (ev) {
+    var button = ev.target.closest('button[data-row-action="edit"]');
+    if (!button) {
+      return;
+    }
+    ev.preventDefault();
+    openRowEditDialog(button, manager);
+  });
+}
+
 function canChooseColumns() {
   return !!(
     document.querySelector("column-chooser") && window._columnChooserData
@@ -1022,6 +1308,7 @@ document.addEventListener("datasette_init", function (evt) {
 
   // Main table
   initDatasetteTable(manager);
+  initRowEditActions(manager);
   initRowDeleteActions(manager);
 
   // Other UI functions with interactive JS needs
diff --git a/datasette/templates/_table.html b/datasette/templates/_table.html
index 36b0ef7e..2ecf5cc2 100644
--- a/datasette/templates/_table.html
+++ b/datasette/templates/_table.html
@@ -22,7 +22,7 @@
         </thead>
         <tbody>
         {% for row in display_rows %}
-            <tr{% if row.pk_path is not none %} data-row-pk-path="{{ row.pk_path }}" data-row-path="{{ row.row_path }}" data-row-url="{{ row.row_url }}" data-row-delete-url="{{ row.delete_url }}"{% endif %}>
+            <tr{% if row.pk_path is not none %} data-row-pk-path="{{ row.pk_path }}" data-row-path="{{ row.row_path }}" data-row-url="{{ row.row_url }}" data-row-delete-url="{{ row.delete_url }}" data-row-update-url="{{ row.update_url }}"{% endif %}>
                 {% for cell in row %}
                     <td class="col-{{ cell.column|to_css_class }} type-{{ cell.value_type }}">{{ cell.value }}</td>
                 {% endfor %}
diff --git a/datasette/views/table.py b/datasette/views/table.py
index f1d4ea45..cd6a016a 100644
--- a/datasette/views/table.py
+++ b/datasette/views/table.py
@@ -66,12 +66,14 @@ class Row:
         row_path=None,
         row_url=None,
         delete_url=None,
+        update_url=None,
     ):
         self.cells = cells
         self.pk_path = pk_path
         self.row_path = row_path
         self.row_url = row_url
         self.delete_url = delete_url
+        self.update_url = update_url
 
     def __iter__(self):
         return iter(self.cells)
@@ -258,6 +260,7 @@ async def display_columns_and_rows(
                 row_path=row_path,
             )
             delete_url = "{row_url}/-/delete".format(row_url=row_url)
+            update_url = "{row_url}/-/update".format(row_url=row_url)
             row_link = '<a href="{table_path}/{flat_pks_quoted}">{flat_pks}</a>'.format(
                 table_path=table_path,
                 flat_pks=str(markupsafe.escape(pk_path)),
@@ -288,7 +291,8 @@ async def display_columns_and_rows(
             if row_action_permissions.get("update-row"):
                 row_actions.append(
                     '<button type="button" class="row-inline-action row-inline-action-edit" '
-                    'aria-label="Edit row {row_label}" title="Edit row">'
+                    'aria-label="Edit row {row_label}" title="Edit row" '
+                    'data-row-action="edit">'
                     "{edit_icon}</button>".format(
                         edit_icon=edit_icon,
                         row_label=markupsafe.escape(pk_path),
@@ -430,6 +434,7 @@ async def display_columns_and_rows(
                     row_path=row_path,
                     row_url=row_url,
                     delete_url=delete_url,
+                    update_url=update_url,
                 )
             )
         else:
diff --git a/tests/test_table_html.py b/tests/test_table_html.py
index 14d463ae..6be6942d 100644
--- a/tests/test_table_html.py
+++ b/tests/test_table_html.py
@@ -839,6 +839,7 @@ async def test_row_delete_action_data_attributes():
                     "tables": {
                         "items": {
                             "permissions": {
+                                "update-row": {"id": "root"},
                                 "delete-row": {"id": "root"},
                             },
                         },
@@ -863,6 +864,15 @@ async def test_row_delete_action_data_attributes():
         assert row["data-row-path"] == "1"
         assert row["data-row-url"] == "/data/items/1"
         assert row["data-row-delete-url"] == "/data/items/1/-/delete"
+        assert row["data-row-update-url"] == "/data/items/1/-/update"
+
+        edit_button = row.select_one(
+            'button.row-inline-action-edit[data-row-action="edit"]'
+        )
+        assert edit_button is not None
+        assert edit_button["aria-label"] == "Edit row 1"
+        assert edit_button["title"] == "Edit row"
+        assert edit_button.find("svg") is not None
 
         button = row.select_one(
             'button.row-inline-action-delete[data-row-action="delete"]'

From e50d176722e572230cf105072e08b41dfc50bf00 Mon Sep 17 00:00:00 2001
From: Simon Willison <swillison@gmail.com>
Date: Sat, 13 Jun 2026 18:41:00 -0700
Subject: [PATCH 05/23] Add in-place table row edit and delete UI

Use a compact data-row attribute on table row fragments and derive row API URLs in JavaScript from a page-level table URL. Add a /-/fragment endpoint so edited rows can be re-rendered with the active table template and render_cell hooks, then replaced in place after a successful save.

Document the custom _table.html data-row contract and cover the fragment endpoint, base_url handling, and row markup with tests.
---
 datasette/app.py                |   5 +
 datasette/static/app.css        |  24 ++-
 datasette/static/table.js       | 368 ++++++++++++++++++++++++++++----
 datasette/templates/_table.html |   2 +-
 datasette/templates/table.html  |   1 +
 datasette/views/table.py        | 115 ++++++++--
 docs/custom_templates.rst       |   9 +-
 tests/test_table_html.py        | 118 +++++++++-
 8 files changed, 571 insertions(+), 71 deletions(-)

diff --git a/datasette/app.py b/datasette/app.py
index 4931f486..4d7f483a 100644
--- a/datasette/app.py
+++ b/datasette/app.py
@@ -86,6 +86,7 @@ from .views.table import (
     TableUpsertView,
     TableSetColumnTypeView,
     TableDropView,
+    TableFragmentView,
     table_view,
 )
 from .views.row import RowView, RowDeleteView, RowUpdateView
@@ -2614,6 +2615,10 @@ class Datasette:
             TableSetColumnTypeView.as_view(self),
             r"/(?P<database>[^\/\.]+)/(?P<table>[^\/\.]+)/-/set-column-type$",
         )
+        add_route(
+            TableFragmentView.as_view(self),
+            r"/(?P<database>[^\/\.]+)/(?P<table>[^\/\.]+)/-/fragment$",
+        )
         add_route(
             TableDropView.as_view(self),
             r"/(?P<database>[^\/\.]+)/(?P<table>[^\/\.]+)/-/drop$",
diff --git a/datasette/static/app.css b/datasette/static/app.css
index 5c92d59c..aca39e58 100644
--- a/datasette/static/app.css
+++ b/datasette/static/app.css
@@ -1192,7 +1192,7 @@ dialog.set-column-type-dialog::backdrop {
     cursor: wait;
 }
 
-.row-delete-status {
+.row-mutation-status {
     margin: 0 0 0.75rem;
     padding: 8px 10px;
     border-left: 4px solid #54AC8E;
@@ -1200,11 +1200,11 @@ dialog.set-column-type-dialog::backdrop {
     color: #222;
 }
 
-.row-delete-status[hidden] {
+.row-mutation-status[hidden] {
     display: none;
 }
 
-.row-delete-status-error {
+.row-mutation-status-error {
     border-left-color: #D0021B;
     background: rgba(208,2,27,0.12);
 }
@@ -1413,8 +1413,18 @@ dialog.row-edit-dialog::backdrop {
 }
 
 .row-edit-error {
-    color: #b91c1c;
+    border-left: 4px solid #b91c1c;
+    border-radius: 4px;
+    background: #fff1f1;
+    color: #7f1d1d;
     font-size: 0.9rem;
+    margin: 12px 24px 0;
+    padding: 10px 12px;
+}
+
+.row-edit-error:focus {
+    outline: 3px solid rgba(185, 28, 28, 0.18);
+    outline-offset: 2px;
 }
 
 .row-edit-fields {
@@ -1645,12 +1655,16 @@ textarea.row-edit-input {
     .row-edit-dialog .modal-header,
     .row-edit-summary,
     .row-edit-loading,
-    .row-edit-error,
     .row-edit-fields {
         padding-left: 18px;
         padding-right: 18px;
     }
 
+    .row-edit-error {
+        margin-left: 18px;
+        margin-right: 18px;
+    }
+
     .row-edit-field {
         grid-template-columns: 1fr;
         gap: 5px;
diff --git a/datasette/static/table.js b/datasette/static/table.js
index 044c9509..1ae2f30d 100644
--- a/datasette/static/table.js
+++ b/datasette/static/table.js
@@ -359,14 +359,14 @@ function openSetColumnTypeDialog(th) {
   }
 }
 
-function ensureRowDeleteStatus(manager) {
-  var status = document.querySelector(".row-delete-status");
+function ensureRowMutationStatus(manager) {
+  var status = document.querySelector(".row-mutation-status");
   if (status) {
     return status;
   }
 
   status = document.createElement("p");
-  status.className = "row-delete-status";
+  status.className = "row-mutation-status";
   status.hidden = true;
   status.setAttribute("role", "status");
   status.setAttribute("aria-live", "polite");
@@ -381,10 +381,10 @@ function ensureRowDeleteStatus(manager) {
   return status;
 }
 
-function showRowDeleteStatus(manager, message, isError) {
-  var status = ensureRowDeleteStatus(manager);
+function showRowMutationStatus(manager, message, isError) {
+  var status = ensureRowMutationStatus(manager);
   status.hidden = false;
-  status.classList.toggle("row-delete-status-error", !!isError);
+  status.classList.toggle("row-mutation-status-error", !!isError);
   status.textContent = message;
   return status;
 }
@@ -406,7 +406,7 @@ function showRowDeleteDialogError(state, message) {
   state.error.textContent = message;
 }
 
-function rowDeleteRequestError(response, data) {
+function rowMutationRequestError(response, data) {
   if (data && data.errors) {
     return new Error(data.errors.join(" "));
   }
@@ -416,15 +416,98 @@ function rowDeleteRequestError(response, data) {
   if (data && data.title) {
     return new Error(data.title);
   }
-  return new Error("Delete failed with HTTP " + response.status);
+  return new Error("Request failed with HTTP " + response.status);
 }
 
-function nextRowDeleteFocusTarget(row, manager) {
+function tildeDecode(value) {
+  if (!value) {
+    return "";
+  }
+  var placeholder = "__datasette_percent_placeholder__";
+  try {
+    return decodeURIComponent(
+      value
+        .replace(/%/g, placeholder)
+        .replace(/~/g, "%")
+        .replace(/\+/g, " "),
+    ).replace(new RegExp(placeholder, "g"), "%");
+  } catch (_error) {
+    return value;
+  }
+}
+
+function rowDisplayLabel(row) {
+  return tildeDecode(row.getAttribute("data-row") || "");
+}
+
+function tableBaseUrl() {
+  var tableUrl =
+    window._datasetteTableData && window._datasetteTableData.tableUrl;
+  var url = new URL(tableUrl || location.href, location.href);
+  url.hash = "";
+  url.search = "";
+  return url;
+}
+
+function rowResourceUrl(row) {
+  var rowId = row.getAttribute("data-row");
+  if (!rowId) {
+    return null;
+  }
+  var url = tableBaseUrl();
+  url.pathname = url.pathname.replace(/\/$/, "") + "/" + rowId;
+  return url;
+}
+
+function rowJsonUrl(row) {
+  var url = rowResourceUrl(row);
+  if (!url) {
+    return "";
+  }
+  url.pathname = url.pathname + ".json";
+  url.searchParams.set("_extra", "columns,column_types");
+  return url.toString();
+}
+
+function rowDeleteUrl(row) {
+  var url = rowResourceUrl(row);
+  if (!url) {
+    return "";
+  }
+  url.pathname = url.pathname.replace(/\/$/, "") + "/-/delete";
+  return url.toString();
+}
+
+function rowUpdateUrl(row) {
+  var url = rowResourceUrl(row);
+  if (!url) {
+    return "";
+  }
+  url.pathname = url.pathname.replace(/\/$/, "") + "/-/update";
+  return url.toString();
+}
+
+function rowFragmentUrl(row) {
+  var rowId = row.getAttribute("data-row");
+  if (!rowId) {
+    return "";
+  }
+  var url = tableBaseUrl();
+  url.search = new URL(location.href).search;
+  url.pathname = url.pathname.replace(/\/$/, "") + "/-/fragment";
+  url.searchParams.delete("_next");
+  url.searchParams.set("_row", rowId);
+  url.searchParams.set("_nocount", "1");
+  url.searchParams.set("_nofacet", "1");
+  url.searchParams.set("_nosuggest", "1");
+  return url.toString();
+}
+
+function nextRowActionFocusTarget(row, action) {
+  var selector = 'button[data-row-action="' + action + '"]:not([disabled])';
   var sibling = row.nextElementSibling;
   while (sibling) {
-    var nextButton = sibling.querySelector(
-      'button[data-row-action="delete"]:not([disabled])',
-    );
+    var nextButton = sibling.querySelector(selector);
     if (nextButton) {
       return nextButton;
     }
@@ -433,16 +516,18 @@ function nextRowDeleteFocusTarget(row, manager) {
 
   sibling = row.previousElementSibling;
   while (sibling) {
-    var previousButton = sibling.querySelector(
-      'button[data-row-action="delete"]:not([disabled])',
-    );
+    var previousButton = sibling.querySelector(selector);
     if (previousButton) {
       return previousButton;
     }
     sibling = sibling.previousElementSibling;
   }
 
-  return ensureRowDeleteStatus(manager);
+  return null;
+}
+
+function nextRowDeleteFocusTarget(row, manager) {
+  return nextRowActionFocusTarget(row, "delete") || ensureRowMutationStatus(manager);
 }
 
 function ensureRowDeleteDialog(manager) {
@@ -563,7 +648,7 @@ function ensureRowDeleteDialog(manager) {
         data = null;
       }
       if (!response.ok || (data && data.ok === false)) {
-        throw rowDeleteRequestError(response, data);
+        throw rowMutationRequestError(response, data);
       }
 
       var focusTarget = nextRowDeleteFocusTarget(state.currentRow, state.manager);
@@ -573,11 +658,11 @@ function ensureRowDeleteDialog(manager) {
       state.shouldRestoreFocus = false;
       state.dialog.close();
       state.currentRow.remove();
-      showRowDeleteStatus(state.manager, statusMessage, false);
+      showRowMutationStatus(state.manager, statusMessage, false);
       if (focusTarget && document.contains(focusTarget)) {
         focusTarget.focus();
       } else {
-        ensureRowDeleteStatus(state.manager).focus();
+        ensureRowMutationStatus(state.manager).focus();
       }
     } catch (error) {
       setRowDeleteDialogBusy(state, false);
@@ -589,8 +674,8 @@ function ensureRowDeleteDialog(manager) {
 }
 
 function openRowDeleteDialog(button, manager) {
-  var row = button.closest("tr[data-row-delete-url]");
-  if (!row || !row.dataset.rowDeleteUrl) {
+  var row = button.closest("[data-row]");
+  if (!row || !row.getAttribute("data-row")) {
     return;
   }
   var state = ensureRowDeleteDialog(manager);
@@ -601,8 +686,8 @@ function openRowDeleteDialog(button, manager) {
   state.manager = manager;
   state.currentButton = button;
   state.currentRow = row;
-  state.currentDeleteUrl = row.dataset.rowDeleteUrl;
-  state.currentPkPath = row.dataset.rowPkPath || "";
+  state.currentDeleteUrl = rowDeleteUrl(row);
+  state.currentPkPath = rowDisplayLabel(row);
   state.shouldRestoreFocus = true;
 
   clearRowDeleteDialogError(state);
@@ -629,13 +714,6 @@ function initRowDeleteActions(manager) {
   });
 }
 
-function rowJsonUrl(row) {
-  var url = new URL(row.dataset.rowUrl, location.href);
-  url.pathname = url.pathname + ".json";
-  url.searchParams.set("_extra", "columns,column_types");
-  return url.toString();
-}
-
 function valueToEditText(value) {
   if (value === null || typeof value === "undefined") {
     return "";
@@ -654,6 +732,22 @@ function shouldUseTextarea(value) {
   return text.length > 80 || text.indexOf("\n") !== -1;
 }
 
+function rowEditValueType(value) {
+  if (value === null || typeof value === "undefined") {
+    return "null";
+  }
+  if (typeof value === "number") {
+    return "number";
+  }
+  if (typeof value === "boolean") {
+    return "boolean";
+  }
+  if (typeof value === "object") {
+    return "json";
+  }
+  return "string";
+}
+
 function createRowEditField(column, value, isPk, columnType, index) {
   var field = document.createElement("div");
   field.className = "row-edit-field";
@@ -677,6 +771,8 @@ function createRowEditField(column, value, isPk, columnType, index) {
   control.value = valueToEditText(value);
   control.setAttribute("aria-describedby", metaId);
   control.dataset.originalValue = valueToEditText(value);
+  control.dataset.originalValueType = rowEditValueType(value);
+  control.dataset.primaryKey = isPk ? "1" : "0";
 
   if (control.nodeName === "TEXTAREA") {
     control.rows = Math.min(8, Math.max(3, control.value.split("\n").length));
@@ -721,11 +817,168 @@ function clearRowEditDialogError(state) {
 function showRowEditDialogError(state, message) {
   state.error.hidden = false;
   state.error.textContent = message;
+  state.error.focus();
+}
+
+function updateRowEditDialogButtons(state) {
+  state.saveButton.disabled = state.isLoading || state.isSaving || !state.hasLoaded;
+  state.cancelButton.disabled = state.isSaving;
+  state.saveButton.textContent = state.isSaving ? "Saving..." : "Save";
+  state.form.setAttribute(
+    "aria-busy",
+    state.isLoading || state.isSaving ? "true" : "false",
+  );
 }
 
 function setRowEditDialogLoading(state, isLoading) {
   state.isLoading = isLoading;
   state.loading.hidden = !isLoading;
+  updateRowEditDialogButtons(state);
+}
+
+function setRowEditDialogSaving(state, isSaving) {
+  state.isSaving = isSaving;
+  updateRowEditDialogButtons(state);
+}
+
+function valueFromRowEditControl(control) {
+  var value = control.value;
+  var trimmed = value.trim();
+  var originalValueType = control.dataset.originalValueType || "string";
+
+  if (originalValueType === "null" && value === "") {
+    return null;
+  }
+  if (originalValueType === "number") {
+    if (trimmed === "") {
+      return null;
+    }
+    var numberValue = Number(trimmed);
+    if (Number.isNaN(numberValue)) {
+      throw new Error(control.name + " must be a number");
+    }
+    return numberValue;
+  }
+  if (originalValueType === "boolean") {
+    if (/^(true|1|yes)$/i.test(trimmed)) {
+      return true;
+    }
+    if (/^(false|0|no)$/i.test(trimmed)) {
+      return false;
+    }
+    throw new Error(control.name + " must be true or false");
+  }
+  if (originalValueType === "json") {
+    if (trimmed === "") {
+      return null;
+    }
+    try {
+      return JSON.parse(value);
+    } catch (_error) {
+      throw new Error(control.name + " must be valid JSON");
+    }
+  }
+  return value;
+}
+
+function collectRowEditUpdate(state) {
+  var update = {};
+  state.fields.querySelectorAll(".row-edit-input").forEach(function (control) {
+    if (control.readOnly || control.dataset.primaryKey === "1") {
+      return;
+    }
+    update[control.name] = valueFromRowEditControl(control);
+  });
+  return update;
+}
+
+function findDataRowElement(root, rowId) {
+  var elements = root.querySelectorAll("[data-row]");
+  for (var i = 0; i < elements.length; i += 1) {
+    if (elements[i].getAttribute("data-row") === rowId) {
+      return elements[i];
+    }
+  }
+  return null;
+}
+
+async function fetchUpdatedRowElement(state) {
+  if (!state.currentFragmentUrl || !state.currentRowId) {
+    return null;
+  }
+  var response = await fetch(state.currentFragmentUrl, {
+    headers: {
+      Accept: "text/html",
+    },
+  });
+  var html = await response.text();
+  if (!response.ok) {
+    throw new Error("Could not refresh row: HTTP " + response.status);
+  }
+  var doc = new DOMParser().parseFromString(html, "text/html");
+  return findDataRowElement(doc, state.currentRowId);
+}
+
+async function saveRowEditDialog(state) {
+  if (state.isLoading || state.isSaving || !state.hasLoaded) {
+    return;
+  }
+  clearRowEditDialogError(state);
+  setRowEditDialogSaving(state, true);
+
+  try {
+    if (!state.currentUpdateUrl) {
+      throw new Error("Could not find the row update URL");
+    }
+    var response = await fetch(state.currentUpdateUrl, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+      body: JSON.stringify({
+        update: collectRowEditUpdate(state),
+        return: true,
+      }),
+    });
+    var data = null;
+    try {
+      data = await response.json();
+    } catch (_error) {
+      data = null;
+    }
+    if (!response.ok || (data && data.ok === false)) {
+      throw rowMutationRequestError(response, data);
+    }
+
+    var updatedRow = await fetchUpdatedRowElement(state);
+    var focusTarget = null;
+    if (updatedRow && state.currentRow && document.contains(state.currentRow)) {
+      var importedRow = document.importNode(updatedRow, true);
+      state.currentRow.replaceWith(importedRow);
+      focusTarget =
+        importedRow.querySelector('button[data-row-action="edit"]') || importedRow;
+    } else if (state.currentRow && document.contains(state.currentRow)) {
+      focusTarget =
+        nextRowActionFocusTarget(state.currentRow, "edit") ||
+        ensureRowMutationStatus(state.manager);
+      state.currentRow.remove();
+      showRowMutationStatus(
+        state.manager,
+        "Saved row. It no longer matches the current filters.",
+        false,
+      );
+    }
+
+    state.shouldRestoreFocus = false;
+    state.dialog.close();
+    if (focusTarget && document.contains(focusTarget)) {
+      focusTarget.focus();
+    }
+  } catch (error) {
+    setRowEditDialogSaving(state, false);
+    showRowEditDialogError(state, error.message || "Could not save row");
+  }
 }
 
 function renderRowEditFields(state, data) {
@@ -747,6 +1000,8 @@ function renderRowEditFields(state, data) {
     );
   });
 
+  state.hasLoaded = true;
+  updateRowEditDialogButtons(state);
   var firstEditable = state.fields.querySelector(".row-edit-input:not([readonly])");
   var firstField = state.fields.querySelector(".row-edit-input");
   (firstEditable || firstField || state.cancelButton).focus();
@@ -769,14 +1024,14 @@ function ensureRowEditDialog(manager) {
     <div class="modal-header">
       <span class="modal-title" id="row-edit-title">Edit row</span>
     </div>
-    <form class="row-edit-form">
+    <form class="row-edit-form" method="post">
       <p class="row-edit-summary" id="row-edit-summary">Editing row <span class="row-edit-id"></span></p>
-      <p class="row-edit-loading">Loading row...</p>
-      <p class="row-edit-error" role="alert" hidden></p>
+      <p class="row-edit-loading" role="status" aria-live="polite">Loading row...</p>
+      <p class="row-edit-error" role="alert" tabindex="-1" hidden></p>
       <div class="row-edit-fields"></div>
       <div class="modal-footer">
         <button type="button" class="btn btn-ghost row-edit-cancel">Cancel</button>
-        <button type="button" class="btn btn-primary row-edit-save" disabled>Save</button>
+        <button type="submit" class="btn btn-primary row-edit-save" disabled>Save</button>
       </div>
     </form>
   `;
@@ -793,24 +1048,32 @@ function ensureRowEditDialog(manager) {
     saveButton: dialog.querySelector(".row-edit-save"),
     currentButton: null,
     currentRow: null,
+    currentRowId: null,
     currentPkPath: null,
+    currentUpdateUrl: null,
+    currentFragmentUrl: null,
     loadId: 0,
     manager: manager,
     isLoading: false,
+    isSaving: false,
+    hasLoaded: false,
     shouldRestoreFocus: true,
   };
 
   rowEditDialogState.form.addEventListener("submit", function (ev) {
     ev.preventDefault();
+    saveRowEditDialog(rowEditDialogState);
   });
 
   rowEditDialogState.cancelButton.addEventListener("click", function () {
-    rowEditDialogState.shouldRestoreFocus = true;
-    dialog.close();
+    if (!rowEditDialogState.isSaving) {
+      rowEditDialogState.shouldRestoreFocus = true;
+      dialog.close();
+    }
   });
 
   dialog.addEventListener("click", function (ev) {
-    if (ev.target === dialog) {
+    if (ev.target === dialog && !rowEditDialogState.isSaving) {
       rowEditDialogState.shouldRestoreFocus = true;
       dialog.close();
     }
@@ -820,20 +1083,30 @@ function ensureRowEditDialog(manager) {
     if (ev.key !== "Escape") {
       return;
     }
+    if (rowEditDialogState.isSaving) {
+      ev.preventDefault();
+      return;
+    }
     ev.preventDefault();
     rowEditDialogState.shouldRestoreFocus = true;
     dialog.close();
   });
 
-  dialog.addEventListener("cancel", function () {
-    rowEditDialogState.shouldRestoreFocus = true;
+  dialog.addEventListener("cancel", function (ev) {
+    if (rowEditDialogState.isSaving) {
+      ev.preventDefault();
+    } else {
+      rowEditDialogState.shouldRestoreFocus = true;
+    }
   });
 
   dialog.addEventListener("close", function () {
     var state = rowEditDialogState;
     state.loadId += 1;
     clearRowEditDialogError(state);
+    state.hasLoaded = false;
     setRowEditDialogLoading(state, false);
+    setRowEditDialogSaving(state, false);
     if (
       state.shouldRestoreFocus &&
       state.currentButton &&
@@ -847,8 +1120,8 @@ function ensureRowEditDialog(manager) {
 }
 
 async function openRowEditDialog(button, manager) {
-  var row = button.closest("tr[data-row-url]");
-  if (!row || !row.dataset.rowUrl) {
+  var row = button.closest("[data-row]");
+  if (!row || !row.getAttribute("data-row")) {
     return;
   }
   var state = ensureRowEditDialog(manager);
@@ -859,8 +1132,17 @@ async function openRowEditDialog(button, manager) {
   state.manager = manager;
   state.currentButton = button;
   state.currentRow = row;
-  state.currentPkPath = row.dataset.rowPkPath || "";
+  state.currentRowId = row.getAttribute("data-row") || "";
+  state.currentPkPath = rowDisplayLabel(row);
+  state.currentUpdateUrl = rowUpdateUrl(row);
+  state.currentFragmentUrl = rowFragmentUrl(row);
+  if (state.currentUpdateUrl) {
+    state.form.action = new URL(state.currentUpdateUrl, location.href).toString();
+  } else {
+    state.form.removeAttribute("action");
+  }
   state.shouldRestoreFocus = true;
+  state.hasLoaded = false;
   state.loadId += 1;
   var loadId = state.loadId;
 
@@ -885,7 +1167,7 @@ async function openRowEditDialog(button, manager) {
       return;
     }
     if (!response.ok || data.ok === false) {
-      throw rowDeleteRequestError(response, data);
+      throw rowMutationRequestError(response, data);
     }
     setRowEditDialogLoading(state, false);
     renderRowEditFields(state, data);
diff --git a/datasette/templates/_table.html b/datasette/templates/_table.html
index 2ecf5cc2..38454da3 100644
--- a/datasette/templates/_table.html
+++ b/datasette/templates/_table.html
@@ -22,7 +22,7 @@
         </thead>
         <tbody>
         {% for row in display_rows %}
-            <tr{% if row.pk_path is not none %} data-row-pk-path="{{ row.pk_path }}" data-row-path="{{ row.row_path }}" data-row-url="{{ row.row_url }}" data-row-delete-url="{{ row.delete_url }}" data-row-update-url="{{ row.update_url }}"{% endif %}>
+            <tr{% if row.pk_path is not none %} data-row="{{ row.row_path }}"{% endif %}>
                 {% for cell in row %}
                     <td class="col-{{ cell.column|to_css_class }} type-{{ cell.value_type }}">{{ cell.value }}</td>
                 {% endfor %}
diff --git a/datasette/templates/table.html b/datasette/templates/table.html
index 4dc908e0..026599cc 100644
--- a/datasette/templates/table.html
+++ b/datasette/templates/table.html
@@ -4,6 +4,7 @@
 
 {% block extra_head %}
 {{- super() -}}
+<script>window._datasetteTableData = {{ {"tableUrl": urls.table(database, table)}|tojson }};</script>
 <script src="{{ urls.static('column-chooser.js') }}" defer></script>
 <script src="{{ urls.static('table.js') }}?hash={{ table_js_hash }}" defer></script>
 <script src="{{ urls.static('mobile-column-actions.js') }}" defer></script>
diff --git a/datasette/views/table.py b/datasette/views/table.py
index cd6a016a..33357165 100644
--- a/datasette/views/table.py
+++ b/datasette/views/table.py
@@ -2,6 +2,7 @@ import asyncio
 import itertools
 import json
 import urllib
+import urllib.parse
 
 import markupsafe
 
@@ -40,7 +41,7 @@ from datasette.utils import (
     InvalidSql,
     sqlite3,
 )
-from datasette.utils.asgi import BadRequest, Forbidden, NotFound, Response
+from datasette.utils.asgi import BadRequest, Forbidden, NotFound, Request, Response
 from datasette.filters import Filters
 import sqlite_utils
 from .base import BaseView, DatasetteError, _error, stream_csv
@@ -64,16 +65,10 @@ class Row:
         cells,
         pk_path=None,
         row_path=None,
-        row_url=None,
-        delete_url=None,
-        update_url=None,
     ):
         self.cells = cells
         self.pk_path = pk_path
         self.row_path = row_path
-        self.row_url = row_url
-        self.delete_url = delete_url
-        self.update_url = update_url
 
     def __iter__(self):
         return iter(self.cells)
@@ -110,6 +105,66 @@ async def run_sequential(*args):
     return results
 
 
+def _exact_filter_key(column):
+    if column.startswith("_"):
+        return f"{column}__exact"
+    return column
+
+
+def _request_with_query_string(request, query_string):
+    scope = dict(request.scope)
+    scope["query_string"] = query_string.encode("latin-1")
+    return Request(scope, request.receive)
+
+
+async def _fragment_request_for_row(request, resolved):
+    row_path = request.args.get("_row")
+    if not row_path:
+        return request
+    if resolved.is_view:
+        raise BadRequest("_row is not supported for views")
+
+    pks = await resolved.db.primary_keys(resolved.table)
+    row_pks = pks or ["rowid"]
+    pk_values = urlsafe_components(row_path)
+    if len(pk_values) != len(row_pks):
+        raise BadRequest("_row does not match the primary key for this table")
+
+    row_pk_filter_keys = {
+        key
+        for pk in row_pks
+        for key in {
+            _exact_filter_key(pk),
+            f"{pk}__exact",
+        }
+    }
+    args = [
+        (key, value)
+        for key, value in urllib.parse.parse_qsl(
+            request.query_string, keep_blank_values=True
+        )
+        if key
+        not in {
+            "_row",
+            "_next",
+            "_nocount",
+            "_nofacet",
+            "_nosuggest",
+        }.union(row_pk_filter_keys)
+    ]
+    args.extend(
+        [(_exact_filter_key(pk), value) for pk, value in zip(row_pks, pk_values)]
+    )
+    args.extend(
+        [
+            ("_nocount", "1"),
+            ("_nofacet", "1"),
+            ("_nosuggest", "1"),
+        ]
+    )
+    return _request_with_query_string(request, urllib.parse.urlencode(args))
+
+
 def _redirect(datasette, request, path, forward_querystring=True, remove_args=None):
     if request.query_string and "?" not in path and forward_querystring:
         path = f"{path}?{request.query_string}"
@@ -255,12 +310,6 @@ async def display_columns_and_rows(
             pk_path = path_from_row_pks(row, pks, not pks, False)
             row_path = path_from_row_pks(row, pks, not pks)
             table_path = datasette.urls.table(database_name, table_name)
-            row_url = "{table_path}/{row_path}".format(
-                table_path=table_path,
-                row_path=row_path,
-            )
-            delete_url = "{row_url}/-/delete".format(row_url=row_url)
-            update_url = "{row_url}/-/update".format(row_url=row_url)
             row_link = '<a href="{table_path}/{flat_pks_quoted}">{flat_pks}</a>'.format(
                 table_path=table_path,
                 flat_pks=str(markupsafe.escape(pk_path)),
@@ -432,9 +481,6 @@ async def display_columns_and_rows(
                     cells,
                     pk_path=pk_path,
                     row_path=row_path,
-                    row_url=row_url,
-                    delete_url=delete_url,
-                    update_url=update_url,
                 )
             )
         else:
@@ -941,6 +987,43 @@ class TableDropView(BaseView):
         return Response.json({"ok": True}, status=200)
 
 
+class TableFragmentView(BaseView):
+    name = "table-fragment"
+
+    def __init__(self, datasette):
+        self.ds = datasette
+
+    async def get(self, request):
+        resolved = await self.ds.resolve_table(request)
+        request = await _fragment_request_for_row(request, resolved)
+        view_data = await table_view_data(
+            self.ds,
+            request,
+            resolved,
+            extra_extras={"_html"},
+            context_for_html_hack=True,
+            default_labels=True,
+        )
+        if isinstance(view_data, Response):
+            return view_data
+        data, _rows, _columns, _expanded_columns, _sql, _next_url = view_data
+        templates = data["custom_table_templates"]
+        html = await self.ds.render_template(
+            templates,
+            dict(
+                data,
+                append_querystring=append_querystring,
+                path_with_replaced_args=path_with_replaced_args,
+                fix_path=self.ds.urls.path,
+                settings=self.ds.settings_dict(),
+                count_limit=resolved.db.count_limit,
+            ),
+            request=request,
+            view_name="table",
+        )
+        return Response.html(html)
+
+
 async def _columns_to_select(table_columns, pks, request):
     columns = list(table_columns)
     if "_col" in request.args:
diff --git a/docs/custom_templates.rst b/docs/custom_templates.rst
index c324fb79..aa82a536 100644
--- a/docs/custom_templates.rst
+++ b/docs/custom_templates.rst
@@ -274,13 +274,20 @@ Here is an example of a custom ``_table.html`` template:
 .. code-block:: jinja
 
     {% for row in display_rows %}
-        <div>
+        <div data-row="{{ row.row_path }}">
             <h2>{{ row["title"] }}</h2>
             <p>{{ row["description"] }}<lp>
             <p>Category: {{ row.display("category_id") }}</p>
         </div>
     {% endfor %}
 
+If your custom table template should support Datasette's row editing UI, include
+``data-row="{{ row.row_path }}"`` on the outer element that represents each row.
+This does not need to be a ``<tr>``: it can be a ``<div>``, ``<li>`` or any other
+element that wraps the HTML for that row. Datasette uses this attribute to find
+the element to remove after a delete, or replace after an edit. Any edit or
+delete controls should be rendered inside that same element.
+
 .. _custom_pages:
 
 Custom pages
diff --git a/tests/test_table_html.py b/tests/test_table_html.py
index 6be6942d..4e24f129 100644
--- a/tests/test_table_html.py
+++ b/tests/test_table_html.py
@@ -664,6 +664,11 @@ async def test_table_html_compound_primary_key(ds_client):
     assert [
         [str(td) for td in tr.select("td")] for tr in table.select("tbody tr")
     ] == expected
+    rows = table.select("tbody tr")
+    assert rows[0]["data-row"] == "a,b"
+    assert "data-row-pk-path" not in rows[0].attrs
+    assert rows[1]["data-row"] == "a~2Fb,~2Ec-d"
+    assert "data-row-pk-path" not in rows[1].attrs
 
 
 @pytest.mark.asyncio
@@ -859,12 +864,24 @@ async def test_row_delete_action_data_attributes():
         response = await ds.client.get("/data/items", actor={"id": "root"})
         assert response.status_code == 200
         soup = Soup(response.text, "html.parser")
+        import json
+        import re
+
+        table_script = [
+            s for s in soup.find_all("script") if "_datasetteTableData" in (s.string or "")
+        ][0]
+        match = re.search(
+            r"window\._datasetteTableData\s*=\s*({.*?});",
+            table_script.string,
+            re.DOTALL,
+        )
+        assert json.loads(match.group(1)) == {"tableUrl": "/data/items"}
+
         row = soup.select_one("table.rows-and-columns tbody tr")
-        assert row["data-row-pk-path"] == "1"
-        assert row["data-row-path"] == "1"
-        assert row["data-row-url"] == "/data/items/1"
-        assert row["data-row-delete-url"] == "/data/items/1/-/delete"
-        assert row["data-row-update-url"] == "/data/items/1/-/update"
+        assert row["data-row"] == "1"
+        assert {
+            key for key in row.attrs if key.startswith("data-row")
+        } == {"data-row"}
 
         edit_button = row.select_one(
             'button.row-inline-action-edit[data-row-action="edit"]'
@@ -885,6 +902,97 @@ async def test_row_delete_action_data_attributes():
         ds.close()
 
 
+@pytest.mark.asyncio
+async def test_table_fragment_endpoint(ds_client):
+    response = await ds_client.get("/fixtures/simple_primary_key/-/fragment?_row=1")
+    assert response.status_code == 200
+    assert response.headers["content-type"].startswith("text/html")
+    soup = Soup(response.text, "html.parser")
+    assert soup.find("html") is None
+    rows = soup.select("[data-row]")
+    assert len(rows) == 1
+    assert rows[0]["data-row"] == "1"
+    assert {
+        key for key in rows[0].attrs if key.startswith("data-row")
+    } == {"data-row"}
+
+
+@pytest.mark.asyncio
+async def test_table_fragment_row_parameter_replaces_pk_filters(ds_client):
+    response = await ds_client.get(
+        "/fixtures/simple_primary_key/-/fragment?id=2&_row=1"
+    )
+    assert response.status_code == 200
+    soup = Soup(response.text, "html.parser")
+    rows = soup.select("[data-row]")
+    assert len(rows) == 1
+    assert rows[0]["data-row"] == "1"
+
+
+def test_table_data_uses_base_url(app_client_base_url_prefix):
+    response = app_client_base_url_prefix.get("/prefix/fixtures/simple_primary_key")
+    assert response.status_code == 200
+    import json
+    import re
+
+    soup = Soup(response.text, "html.parser")
+    table_script = [
+        s for s in soup.find_all("script") if "_datasetteTableData" in (s.string or "")
+    ][0]
+    match = re.search(
+        r"window\._datasetteTableData\s*=\s*({.*?});",
+        table_script.string,
+        re.DOTALL,
+    )
+    assert json.loads(match.group(1)) == {
+        "tableUrl": "/prefix/fixtures/simple_primary_key"
+    }
+
+
+def test_table_fragment_custom_table_include():
+    with make_app_client(
+        template_dir=str(pathlib.Path(__file__).parent / "test_templates")
+    ) as client:
+        response = client.get("/fixtures/complex_foreign_keys/-/fragment?f1=1&f2=2")
+        assert response.status == 200
+        assert (
+            '<div class="custom-table-row">'
+            '1 - 2 - <a href="/fixtures/simple_primary_key/1">hello</a> <em>1</em>'
+            "</div>"
+        ) == str(Soup(response.text, "html.parser").select_one("div.custom-table-row"))
+
+
+@pytest.mark.asyncio
+async def test_table_fragment_uses_render_cell_hook():
+    from datasette import hookimpl
+    from markupsafe import Markup
+
+    class TestRenderCellPlugin:
+        __name__ = "TestRenderCellPlugin"
+
+        @hookimpl
+        def render_cell(self, value, column, table, database):
+            if database == "data" and table == "items" and column == "name":
+                return Markup("<strong>{}</strong>".format(value))
+            return None
+
+    ds = Datasette(memory=True)
+    await ds.invoke_startup()
+    db = ds.add_memory_database("data")
+    await db.execute_write(
+        "create table items (id integer primary key, name text)"
+    )
+    await db.execute_write("insert into items values (1, 'Alice')")
+    ds.pm.register(TestRenderCellPlugin(), name="TestRenderCellPlugin")
+    try:
+        response = await ds.client.get("/data/items/-/fragment?id=1")
+        assert response.status_code == 200
+        assert "<strong>Alice</strong>" in response.text
+    finally:
+        ds.pm.unregister(name="TestRenderCellPlugin")
+        ds.close()
+
+
 @pytest.mark.asyncio
 async def test_zero_row_table_renders_thead(ds_client):
     response = await ds_client.get("/fixtures/123_starts_with_digits")

From 5bf4cf8860bd44a8e2729a7f73705d7120ae0cc6 Mon Sep 17 00:00:00 2001
From: Simon Willison <swillison@gmail.com>
Date: Sat, 13 Jun 2026 21:34:45 -0700
Subject: [PATCH 06/23] Add insert row UI to table pages

Add a permission-gated Insert row button to mutable table pages and expose the metadata needed by the client-side UI, including the insert API path, table name, primary keys, editable columns, defaults, nullability, and column type information.

Reuse the existing row edit modal for inserts. Insert submissions now use the JSON API with return=true, derive the new row's tilde-encoded row path from the returned primary key values, fetch the matching table fragment, and insert the rendered row into the current table. Successful inserts and updates now show mutation status messages above the table.

Support SQLite defaults in insert forms by showing default expressions as non-editable values with Set value / Use default controls. Keep those controls aligned and stable so toggling between default and custom values does not shift the modal layout.

Refine the edit modal at the same time: send only changed fields on update, skip the update API entirely when nothing changed, clear stale mutation status for no-op saves, and simplify modal headings so insert/edit context is shown in the bold title instead of duplicated summary text.

Add tests for the insert button and metadata, including omitted integer primary keys, default values, table names, and compound primary keys.
---
 datasette/static/app.css       | 116 ++++++++-
 datasette/static/table.js      | 460 +++++++++++++++++++++++++++++++--
 datasette/templates/table.html |  17 ++
 datasette/views/table.py       |  66 +++++
 tests/test_table_html.py       | 159 ++++++++++--
 5 files changed, 760 insertions(+), 58 deletions(-)

diff --git a/datasette/static/app.css b/datasette/static/app.css
index aca39e58..9226580b 100644
--- a/datasette/static/app.css
+++ b/datasette/static/app.css
@@ -1209,6 +1209,21 @@ dialog.set-column-type-dialog::backdrop {
     background: rgba(208,2,27,0.12);
 }
 
+.table-row-toolbar {
+    margin: 0 0 0.75rem;
+}
+
+button.table-insert-row {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+}
+
+button.table-insert-row svg {
+    display: block;
+    flex-shrink: 0;
+}
+
 dialog.row-delete-dialog {
     --ink: #0f0f0f;
     --paper: #f5f3ef;
@@ -1381,6 +1396,17 @@ dialog.row-edit-dialog::backdrop {
     color: var(--ink);
 }
 
+.row-edit-dialog .modal-title code {
+    display: inline;
+    padding: 2px 5px;
+    border: 1px solid var(--rule);
+    border-radius: 4px;
+    background: var(--paper);
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: 0.92em;
+    overflow-wrap: anywhere;
+}
+
 .row-edit-form {
     display: flex;
     flex: 1 1 auto;
@@ -1401,17 +1427,6 @@ dialog.row-edit-dialog::backdrop {
     font-size: 0.9rem;
 }
 
-.row-edit-id {
-    display: inline;
-    padding: 2px 5px;
-    border: 1px solid var(--rule);
-    border-radius: 4px;
-    background: var(--paper);
-    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-    font-size: 0.92em;
-    overflow-wrap: anywhere;
-}
-
 .row-edit-error {
     border-left: 4px solid #b91c1c;
     border-radius: 4px;
@@ -1483,11 +1498,80 @@ textarea.row-edit-input {
     background: var(--paper);
 }
 
+.row-edit-default {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 7.25rem;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+    border: 1px solid var(--rule);
+    border-radius: 5px;
+    padding: 7px 8px 7px 10px;
+    background: var(--paper);
+    color: var(--ink);
+}
+
+.row-edit-default[hidden],
+.row-edit-custom-value[hidden] {
+    display: none;
+}
+
+.row-edit-default-text {
+    min-width: 0;
+    overflow-wrap: anywhere;
+}
+
+.row-edit-default-code {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: 0.82rem;
+}
+
+.row-edit-custom-value {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 7.25rem;
+    gap: 8px;
+    align-items: center;
+    min-height: 45px;
+    padding-right: 8px;
+}
+
+.row-edit-default-button {
+    appearance: none;
+    border: 1px solid var(--rule);
+    border-radius: 4px;
+    background: #fff;
+    color: var(--accent);
+    cursor: pointer;
+    font: inherit;
+    font-size: 0.78rem;
+    line-height: 1.2;
+    padding: 6px 8px;
+    white-space: nowrap;
+    width: 100%;
+    align-self: center;
+}
+
+.row-edit-default-button:hover,
+.row-edit-default-button:focus {
+    background: #f8fafc;
+}
+
+.row-edit-default-button:focus {
+    outline: 3px solid rgba(26, 86, 219, 0.12);
+    outline-offset: 1px;
+}
+
 .row-edit-field-meta {
     color: var(--muted);
     font-size: 0.78rem;
 }
 
+.row-edit-empty {
+    color: var(--muted);
+    font-size: 0.9rem;
+    margin: 0;
+}
+
 .row-edit-dialog .modal-footer {
     padding: 14px 20px;
     border-top: 1px solid var(--rule);
@@ -1757,6 +1841,7 @@ textarea.row-edit-input {
         width: 140px;
     }
     button.choose-columns-mobile,
+    button.table-insert-row,
     button.column-actions-mobile {
         display: inline-flex;
         align-items: center;
@@ -1793,6 +1878,15 @@ textarea.row-edit-input {
     button.choose-columns-mobile {
         margin-right: 0.5rem;
     }
+
+    .table-row-toolbar {
+        margin-bottom: 0.75rem;
+    }
+
+    button.table-insert-row {
+        width: 100%;
+        margin-bottom: 0;
+    }
 }
 
 svg.dropdown-menu-icon {
diff --git a/datasette/static/table.js b/datasette/static/table.js
index 1ae2f30d..c8109c62 100644
--- a/datasette/static/table.js
+++ b/datasette/static/table.js
@@ -389,6 +389,16 @@ function showRowMutationStatus(manager, message, isError) {
   return status;
 }
 
+function hideRowMutationStatus() {
+  var status = document.querySelector(".row-mutation-status");
+  if (!status) {
+    return;
+  }
+  status.hidden = true;
+  status.classList.remove("row-mutation-status-error");
+  status.textContent = "";
+}
+
 function setRowDeleteDialogBusy(state, isBusy) {
   state.isBusy = isBusy;
   state.confirmButton.disabled = isBusy;
@@ -436,6 +446,27 @@ function tildeDecode(value) {
   }
 }
 
+function tildeEncode(value) {
+  var bytes = new TextEncoder().encode(String(value));
+  var encoded = "";
+  bytes.forEach(function (byte) {
+    var isSafe =
+      (byte >= 65 && byte <= 90) ||
+      (byte >= 97 && byte <= 122) ||
+      (byte >= 48 && byte <= 57) ||
+      byte === 95 ||
+      byte === 45;
+    if (isSafe) {
+      encoded += String.fromCharCode(byte);
+    } else if (byte === 32) {
+      encoded += "+";
+    } else {
+      encoded += "~" + byte.toString(16).toUpperCase().padStart(2, "0");
+    }
+  });
+  return encoded;
+}
+
 function rowDisplayLabel(row) {
   return tildeDecode(row.getAttribute("data-row") || "");
 }
@@ -449,6 +480,20 @@ function tableBaseUrl() {
   return url;
 }
 
+function tableInsertData() {
+  return window._datasetteTableData && window._datasetteTableData.insertRow;
+}
+
+function tableInsertUrl() {
+  var data = tableInsertData();
+  if (data && data.path) {
+    return new URL(data.path, location.href).toString();
+  }
+  var url = tableBaseUrl();
+  url.pathname = url.pathname.replace(/\/$/, "") + "/-/insert";
+  return url.toString();
+}
+
 function rowResourceUrl(row) {
   var rowId = row.getAttribute("data-row");
   if (!rowId) {
@@ -489,6 +534,10 @@ function rowUpdateUrl(row) {
 
 function rowFragmentUrl(row) {
   var rowId = row.getAttribute("data-row");
+  return rowFragmentUrlById(rowId);
+}
+
+function rowFragmentUrlById(rowId) {
   if (!rowId) {
     return "";
   }
@@ -748,9 +797,14 @@ function rowEditValueType(value) {
   return "string";
 }
 
-function createRowEditField(column, value, isPk, columnType, index) {
+function createRowEditField(column, value, isPk, columnType, index, options) {
+  options = options || {};
   var field = document.createElement("div");
   field.className = "row-edit-field";
+  var hasDefault =
+    options.hasDefault ||
+    (options.defaultValue !== null && typeof options.defaultValue !== "undefined");
+  var useDefaultInitially = hasDefault && options.useDefaultInitially;
 
   var fieldId = "row-edit-field-" + index;
   var metaId = "row-edit-field-meta-" + index;
@@ -771,8 +825,16 @@ function createRowEditField(column, value, isPk, columnType, index) {
   control.value = valueToEditText(value);
   control.setAttribute("aria-describedby", metaId);
   control.dataset.originalValue = valueToEditText(value);
-  control.dataset.originalValueType = rowEditValueType(value);
+  control.dataset.originalValueType =
+    options.valueType || rowEditValueType(value);
   control.dataset.primaryKey = isPk ? "1" : "0";
+  if (useDefaultInitially) {
+    control.dataset.useDefault = "1";
+    control.disabled = true;
+  }
+  if (options.omitIfBlank) {
+    control.dataset.omitIfBlank = "1";
+  }
 
   if (control.nodeName === "TEXTAREA") {
     control.rows = Math.min(8, Math.max(3, control.value.split("\n").length));
@@ -780,7 +842,7 @@ function createRowEditField(column, value, isPk, columnType, index) {
     control.type = "text";
   }
 
-  if (isPk) {
+  if (isPk && options.primaryKeyReadonly !== false) {
     control.readOnly = true;
   }
 
@@ -791,6 +853,12 @@ function createRowEditField(column, value, isPk, columnType, index) {
   if (isPk) {
     metaParts.push("Primary key");
   }
+  if (options.notnull) {
+    metaParts.push("Required");
+  }
+  if (hasDefault && !useDefaultInitially) {
+    metaParts.push("Default: " + options.defaultValue);
+  }
   if (value === null) {
     metaParts.push("Current value: NULL");
     control.placeholder = "NULL";
@@ -800,7 +868,62 @@ function createRowEditField(column, value, isPk, columnType, index) {
   }
   meta.textContent = metaParts.join(" · ");
 
-  controlWrap.appendChild(control);
+  if (useDefaultInitially) {
+    var defaultBlock = document.createElement("div");
+    defaultBlock.className = "row-edit-default";
+    defaultBlock.setAttribute("aria-describedby", metaId);
+
+    var defaultText = document.createElement("span");
+    defaultText.className = "row-edit-default-text";
+    defaultText.appendChild(document.createTextNode("default "));
+    var defaultCode = document.createElement("code");
+    defaultCode.className = "row-edit-default-code";
+    defaultCode.textContent = options.defaultValue;
+    defaultText.appendChild(defaultCode);
+
+    var setValueButton = document.createElement("button");
+    setValueButton.type = "button";
+    setValueButton.className =
+      "row-edit-default-button row-edit-default-set-value";
+    setValueButton.textContent = "Set value";
+    setValueButton.setAttribute("aria-label", "Set value for " + column);
+
+    var customWrap = document.createElement("div");
+    customWrap.className = "row-edit-custom-value";
+    customWrap.hidden = true;
+
+    var useDefaultButton = document.createElement("button");
+    useDefaultButton.type = "button";
+    useDefaultButton.className = "row-edit-default-button";
+    useDefaultButton.textContent = "Use default";
+    useDefaultButton.setAttribute("aria-label", "Use default for " + column);
+
+    setValueButton.addEventListener("click", function () {
+      control.dataset.useDefault = "0";
+      control.disabled = false;
+      defaultBlock.hidden = true;
+      customWrap.hidden = false;
+      control.focus();
+    });
+
+    useDefaultButton.addEventListener("click", function () {
+      control.dataset.useDefault = "1";
+      control.disabled = true;
+      control.value = "";
+      customWrap.hidden = true;
+      defaultBlock.hidden = false;
+      setValueButton.focus();
+    });
+
+    defaultBlock.appendChild(defaultText);
+    defaultBlock.appendChild(setValueButton);
+    customWrap.appendChild(control);
+    customWrap.appendChild(useDefaultButton);
+    controlWrap.appendChild(defaultBlock);
+    controlWrap.appendChild(customWrap);
+  } else {
+    controlWrap.appendChild(control);
+  }
   if (meta.textContent) {
     controlWrap.appendChild(meta);
   }
@@ -823,7 +946,8 @@ function showRowEditDialogError(state, message) {
 function updateRowEditDialogButtons(state) {
   state.saveButton.disabled = state.isLoading || state.isSaving || !state.hasLoaded;
   state.cancelButton.disabled = state.isSaving;
-  state.saveButton.textContent = state.isSaving ? "Saving..." : "Save";
+  var saveLabel = state.mode === "insert" ? "Insert row" : "Save";
+  state.saveButton.textContent = state.isSaving ? "Saving..." : saveLabel;
   state.form.setAttribute(
     "aria-busy",
     state.isLoading || state.isSaving ? "true" : "false",
@@ -843,8 +967,15 @@ function setRowEditDialogSaving(state, isSaving) {
 
 function valueFromRowEditControl(control) {
   var value = control.value;
+  return valueFromRowEditText(
+    control.name,
+    value,
+    control.dataset.originalValueType || "string",
+  );
+}
+
+function valueFromRowEditText(name, value, originalValueType) {
   var trimmed = value.trim();
-  var originalValueType = control.dataset.originalValueType || "string";
 
   if (originalValueType === "null" && value === "") {
     return null;
@@ -855,7 +986,7 @@ function valueFromRowEditControl(control) {
     }
     var numberValue = Number(trimmed);
     if (Number.isNaN(numberValue)) {
-      throw new Error(control.name + " must be a number");
+      throw new Error(name + " must be a number");
     }
     return numberValue;
   }
@@ -866,7 +997,7 @@ function valueFromRowEditControl(control) {
     if (/^(false|0|no)$/i.test(trimmed)) {
       return false;
     }
-    throw new Error(control.name + " must be true or false");
+    throw new Error(name + " must be true or false");
   }
   if (originalValueType === "json") {
     if (trimmed === "") {
@@ -875,21 +1006,60 @@ function valueFromRowEditControl(control) {
     try {
       return JSON.parse(value);
     } catch (_error) {
-      throw new Error(control.name + " must be valid JSON");
+      throw new Error(name + " must be valid JSON");
     }
   }
   return value;
 }
 
-function collectRowEditUpdate(state) {
-  var update = {};
+function originalValueFromRowEditControl(control) {
+  return valueFromRowEditText(
+    control.name,
+    control.dataset.originalValue || "",
+    control.dataset.originalValueType || "string",
+  );
+}
+
+function rowEditValuesMatch(left, right) {
+  if (left === right) {
+    return true;
+  }
+  if (
+    left &&
+    right &&
+    typeof left === "object" &&
+    typeof right === "object"
+  ) {
+    return JSON.stringify(left) === JSON.stringify(right);
+  }
+  return false;
+}
+
+function collectRowFormValues(state) {
+  var values = {};
   state.fields.querySelectorAll(".row-edit-input").forEach(function (control) {
-    if (control.readOnly || control.dataset.primaryKey === "1") {
+    if (
+      state.mode === "edit" &&
+      (control.readOnly || control.dataset.primaryKey === "1")
+    ) {
       return;
     }
-    update[control.name] = valueFromRowEditControl(control);
+    if (control.dataset.useDefault === "1") {
+      return;
+    }
+    if (control.dataset.omitIfBlank === "1" && control.value === "") {
+      return;
+    }
+    var value = valueFromRowEditControl(control);
+    if (
+      state.mode === "edit" &&
+      rowEditValuesMatch(value, originalValueFromRowEditControl(control))
+    ) {
+      return;
+    }
+    values[control.name] = value;
   });
-  return update;
+  return values;
 }
 
 function findDataRowElement(root, rowId) {
@@ -919,6 +1089,41 @@ async function fetchUpdatedRowElement(state) {
   return findDataRowElement(doc, state.currentRowId);
 }
 
+function rowPathFromRowData(row, primaryKeys) {
+  if (!row) {
+    return null;
+  }
+  var keys = primaryKeys && primaryKeys.length ? primaryKeys : ["rowid"];
+  var bits = [];
+  for (var i = 0; i < keys.length; i += 1) {
+    var key = keys[i];
+    if (typeof row[key] === "undefined") {
+      return null;
+    }
+    bits.push(tildeEncode(row[key]));
+  }
+  return bits.join(",");
+}
+
+function addInsertedRowToPage(rowElement) {
+  var importedRow = document.importNode(rowElement, true);
+  var firstRow = document.querySelector("[data-row]");
+  if (firstRow && firstRow.parentNode) {
+    firstRow.parentNode.insertBefore(importedRow, firstRow);
+  } else {
+    var tbody = document.querySelector("table.rows-and-columns tbody");
+    if (!tbody) {
+      return null;
+    }
+    tbody.appendChild(importedRow);
+  }
+  var zeroResults = document.querySelector(".zero-results");
+  if (zeroResults) {
+    zeroResults.remove();
+  }
+  return importedRow;
+}
+
 async function saveRowEditDialog(state) {
   if (state.isLoading || state.isSaving || !state.hasLoaded) {
     return;
@@ -927,19 +1132,32 @@ async function saveRowEditDialog(state) {
   setRowEditDialogSaving(state, true);
 
   try {
-    if (!state.currentUpdateUrl) {
-      throw new Error("Could not find the row update URL");
+    var url = state.mode === "insert" ? state.currentInsertUrl : state.currentUpdateUrl;
+    if (!url) {
+      throw new Error(
+        state.mode === "insert"
+          ? "Could not find the row insert URL"
+          : "Could not find the row update URL",
+      );
     }
-    var response = await fetch(state.currentUpdateUrl, {
+    var formValues = collectRowFormValues(state);
+    if (state.mode === "edit" && !Object.keys(formValues).length) {
+      state.shouldRestoreFocus = true;
+      hideRowMutationStatus();
+      state.dialog.close();
+      return;
+    }
+    var payload =
+      state.mode === "insert"
+        ? { row: formValues, return: true }
+        : { update: formValues, return: true };
+    var response = await fetch(url, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
         Accept: "application/json",
       },
-      body: JSON.stringify({
-        update: collectRowEditUpdate(state),
-        return: true,
-      }),
+      body: JSON.stringify(payload),
     });
     var data = null;
     try {
@@ -951,11 +1169,75 @@ async function saveRowEditDialog(state) {
       throw rowMutationRequestError(response, data);
     }
 
+    if (state.mode === "insert") {
+      var insertData = tableInsertData() || {};
+      var insertedRowData = data && data.rows && data.rows.length ? data.rows[0] : null;
+      var insertedRowId = rowPathFromRowData(
+        insertedRowData,
+        insertData.primaryKeys || [],
+      );
+      state.shouldRestoreFocus = false;
+      if (!insertedRowId) {
+        state.dialog.close();
+        var missingIdStatus = showRowMutationStatus(
+          state.manager,
+          "Inserted row. Refresh the page to see it.",
+          false,
+        );
+        missingIdStatus.focus();
+        return;
+      }
+
+      state.currentRowId = insertedRowId;
+      state.currentFragmentUrl = rowFragmentUrlById(insertedRowId);
+      var insertedStatusMessage =
+        "Inserted row " + tildeDecode(insertedRowId) + ".";
+      var insertedRow = null;
+      try {
+        insertedRow = await fetchUpdatedRowElement(state);
+      } catch (_error) {
+        state.dialog.close();
+        var refreshFailedStatus = showRowMutationStatus(
+          state.manager,
+          "Inserted row, but could not refresh the table row. Refresh the page to see it.",
+          true,
+        );
+        refreshFailedStatus.focus();
+        return;
+      }
+      if (insertedRow) {
+        var addedRow = addInsertedRowToPage(insertedRow);
+        state.dialog.close();
+        showRowMutationStatus(state.manager, insertedStatusMessage, false);
+        if (addedRow) {
+          var insertedFocusTarget =
+            addedRow.querySelector('button[data-row-action="edit"]') || addedRow;
+          insertedFocusTarget.focus();
+        }
+      } else {
+        state.dialog.close();
+        var filteredStatus = showRowMutationStatus(
+          state.manager,
+          "Inserted row. It does not match the current filters.",
+          false,
+        );
+        filteredStatus.focus();
+      }
+      return;
+    }
+
     var updatedRow = await fetchUpdatedRowElement(state);
     var focusTarget = null;
     if (updatedRow && state.currentRow && document.contains(state.currentRow)) {
       var importedRow = document.importNode(updatedRow, true);
       state.currentRow.replaceWith(importedRow);
+      showRowMutationStatus(
+        state.manager,
+        state.currentPkPath
+          ? "Updated row " + state.currentPkPath + "."
+          : "Updated row.",
+        false,
+      );
       focusTarget =
         importedRow.querySelector('button[data-row-action="edit"]') || importedRow;
     } else if (state.currentRow && document.contains(state.currentRow)) {
@@ -965,7 +1247,11 @@ async function saveRowEditDialog(state) {
       state.currentRow.remove();
       showRowMutationStatus(
         state.manager,
-        "Saved row. It no longer matches the current filters.",
+        state.currentPkPath
+          ? "Updated row " +
+              state.currentPkPath +
+              ". It no longer matches the current filters."
+          : "Updated row. It no longer matches the current filters.",
         false,
       );
     }
@@ -996,6 +1282,9 @@ function renderRowEditFields(state, data) {
         primaryKeys.indexOf(column) !== -1,
         columnTypes[column],
         index,
+        {
+          primaryKeyReadonly: true,
+        },
       ),
     );
   });
@@ -1007,6 +1296,57 @@ function renderRowEditFields(state, data) {
   (firstEditable || firstField || state.cancelButton).focus();
 }
 
+function renderRowInsertFields(state, data) {
+  var columns = data.columns || [];
+
+  state.fields.innerHTML = "";
+  columns.forEach(function (column, index) {
+    state.fields.appendChild(
+      createRowEditField(
+        column.name,
+        "",
+        !!column.is_pk,
+        column.column_type,
+        index,
+        {
+          defaultValue: column.default,
+          hasDefault: column.has_default,
+          notnull: column.notnull,
+          primaryKeyReadonly: false,
+          useDefaultInitially: column.has_default,
+          valueType: column.value_type,
+        },
+      ),
+    );
+  });
+
+  if (!columns.length) {
+    var emptyMessage = document.createElement("p");
+    emptyMessage.className = "row-edit-empty";
+    emptyMessage.textContent = "This row will use the table defaults.";
+    state.fields.appendChild(emptyMessage);
+  }
+
+  state.hasLoaded = true;
+  updateRowEditDialogButtons(state);
+  var firstControl = state.fields.querySelector(
+    ".row-edit-default-set-value, .row-edit-input:not(:disabled)",
+  );
+  (firstControl || state.saveButton).focus();
+}
+
+function setRowEditDialogTitle(state, text, codeText) {
+  state.title.textContent = "";
+  state.title.appendChild(document.createTextNode(text));
+  if (!codeText) {
+    return;
+  }
+  state.title.appendChild(document.createTextNode(" "));
+  var code = document.createElement("code");
+  code.textContent = codeText;
+  state.title.appendChild(code);
+}
+
 function ensureRowEditDialog(manager) {
   if (rowEditDialogState) {
     return rowEditDialogState;
@@ -1019,13 +1359,12 @@ function ensureRowEditDialog(manager) {
   dialog.id = ROW_EDIT_DIALOG_ID;
   dialog.className = "row-edit-dialog";
   dialog.setAttribute("aria-labelledby", "row-edit-title");
-  dialog.setAttribute("aria-describedby", "row-edit-summary");
   dialog.innerHTML = `
     <div class="modal-header">
       <span class="modal-title" id="row-edit-title">Edit row</span>
     </div>
     <form class="row-edit-form" method="post">
-      <p class="row-edit-summary" id="row-edit-summary">Editing row <span class="row-edit-id"></span></p>
+      <p class="row-edit-summary" id="row-edit-summary" hidden></p>
       <p class="row-edit-loading" role="status" aria-live="polite">Loading row...</p>
       <p class="row-edit-error" role="alert" tabindex="-1" hidden></p>
       <div class="row-edit-fields"></div>
@@ -1040,7 +1379,8 @@ function ensureRowEditDialog(manager) {
   rowEditDialogState = {
     dialog: dialog,
     form: dialog.querySelector(".row-edit-form"),
-    rowId: dialog.querySelector(".row-edit-id"),
+    title: dialog.querySelector(".modal-title"),
+    summary: dialog.querySelector(".row-edit-summary"),
     loading: dialog.querySelector(".row-edit-loading"),
     error: dialog.querySelector(".row-edit-error"),
     fields: dialog.querySelector(".row-edit-fields"),
@@ -1050,8 +1390,10 @@ function ensureRowEditDialog(manager) {
     currentRow: null,
     currentRowId: null,
     currentPkPath: null,
+    currentInsertUrl: null,
     currentUpdateUrl: null,
     currentFragmentUrl: null,
+    mode: "edit",
     loadId: 0,
     manager: manager,
     isLoading: false,
@@ -1130,10 +1472,12 @@ async function openRowEditDialog(button, manager) {
   }
 
   state.manager = manager;
+  state.mode = "edit";
   state.currentButton = button;
   state.currentRow = row;
   state.currentRowId = row.getAttribute("data-row") || "";
   state.currentPkPath = rowDisplayLabel(row);
+  state.currentInsertUrl = null;
   state.currentUpdateUrl = rowUpdateUrl(row);
   state.currentFragmentUrl = rowFragmentUrl(row);
   if (state.currentUpdateUrl) {
@@ -1149,7 +1493,10 @@ async function openRowEditDialog(button, manager) {
   clearRowEditDialogError(state);
   setRowEditDialogLoading(state, true);
   state.fields.innerHTML = "";
-  state.rowId.textContent = state.currentPkPath || "this row";
+  state.dialog.removeAttribute("aria-describedby");
+  setRowEditDialogTitle(state, "Edit row", state.currentPkPath || "this row");
+  state.summary.hidden = true;
+  state.summary.textContent = "";
 
   if (!state.dialog.open) {
     state.dialog.showModal();
@@ -1181,6 +1528,52 @@ async function openRowEditDialog(button, manager) {
   }
 }
 
+function openRowInsertDialog(button, manager) {
+  var insertData = tableInsertData();
+  if (!insertData) {
+    return;
+  }
+  var state = ensureRowEditDialog(manager);
+  if (!state) {
+    return;
+  }
+
+  state.manager = manager;
+  state.mode = "insert";
+  state.currentButton = button;
+  state.currentRow = null;
+  state.currentRowId = null;
+  state.currentPkPath = null;
+  state.currentInsertUrl = tableInsertUrl();
+  state.currentUpdateUrl = null;
+  state.currentFragmentUrl = null;
+  state.shouldRestoreFocus = true;
+  state.hasLoaded = false;
+  state.loadId += 1;
+
+  if (state.currentInsertUrl) {
+    state.form.action = new URL(state.currentInsertUrl, location.href).toString();
+  } else {
+    state.form.removeAttribute("action");
+  }
+
+  clearRowEditDialogError(state);
+  setRowEditDialogLoading(state, false);
+  state.fields.innerHTML = "";
+  state.dialog.removeAttribute("aria-describedby");
+  setRowEditDialogTitle(
+    state,
+    insertData.tableName ? "Insert row into " + insertData.tableName : "Insert row",
+  );
+  state.summary.hidden = true;
+  state.summary.textContent = "";
+
+  if (!state.dialog.open) {
+    state.dialog.showModal();
+  }
+  renderRowInsertFields(state, insertData);
+}
+
 function initRowEditActions(manager) {
   if (!window.fetch || !window.HTMLDialogElement) {
     return;
@@ -1195,6 +1588,20 @@ function initRowEditActions(manager) {
   });
 }
 
+function initRowInsertActions(manager) {
+  if (!window.fetch || !window.HTMLDialogElement || !tableInsertData()) {
+    return;
+  }
+  document.addEventListener("click", function (ev) {
+    var button = ev.target.closest('button[data-table-action="insert-row"]');
+    if (!button) {
+      return;
+    }
+    ev.preventDefault();
+    openRowInsertDialog(button, manager);
+  });
+}
+
 function canChooseColumns() {
   return !!(
     document.querySelector("column-chooser") && window._columnChooserData
@@ -1590,6 +1997,7 @@ document.addEventListener("datasette_init", function (evt) {
 
   // Main table
   initDatasetteTable(manager);
+  initRowInsertActions(manager);
   initRowEditActions(manager);
   initRowDeleteActions(manager);
 
diff --git a/datasette/templates/table.html b/datasette/templates/table.html
index 026599cc..5a4e7a68 100644
--- a/datasette/templates/table.html
+++ b/datasette/templates/table.html
@@ -4,7 +4,11 @@
 
 {% block extra_head %}
 {{- super() -}}
+{% if table_insert_ui %}
+<script>window._datasetteTableData = {{ {"tableUrl": urls.table(database, table), "insertRow": table_insert_ui}|tojson }};</script>
+{% else %}
 <script>window._datasetteTableData = {{ {"tableUrl": urls.table(database, table)}|tojson }};</script>
+{% endif %}
 <script src="{{ urls.static('column-chooser.js') }}" defer></script>
 <script src="{{ urls.static('table.js') }}?hash={{ table_js_hash }}" defer></script>
 <script src="{{ urls.static('mobile-column-actions.js') }}" defer></script>
@@ -159,6 +163,19 @@ window._setColumnTypeData = {{ set_column_type_ui|tojson }};
 </script>
 {% endif %}
 
+{% if table_insert_ui %}
+<div class="table-row-toolbar">
+    <button type="button" class="core table-insert-row" data-table-action="insert-row">
+        <svg class="row-inline-action-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <rect width="18" height="18" x="3" y="3" rx="2"></rect>
+            <path d="M8 12h8"></path>
+            <path d="M12 8v8"></path>
+        </svg>
+        <span>Insert row</span>
+    </button>
+</div>
+{% endif %}
+
 {% include custom_table_templates %}
 
 {% if next_url %}
diff --git a/datasette/views/table.py b/datasette/views/table.py
index 33357165..c58e39f3 100644
--- a/datasette/views/table.py
+++ b/datasette/views/table.py
@@ -6,6 +6,7 @@ import urllib.parse
 
 import markupsafe
 
+from datasette.column_types import SQLiteType
 from datasette.extras import extra_names_from_request
 from datasette.plugins import pm
 from datasette.events import (
@@ -223,6 +224,68 @@ async def _validate_column_types(datasette, database_name, table_name, rows):
     return errors
 
 
+def _column_value_type_for_insert_form(column_detail, column_type):
+    if column_type is not None and column_type.name == "json":
+        return "json"
+    sqlite_type = SQLiteType.from_declared_type(column_detail.type)
+    if sqlite_type in (SQLiteType.INTEGER, SQLiteType.REAL):
+        return "number"
+    return "string"
+
+
+async def _table_insert_ui(
+    datasette, request, db, database_name, table_name, is_view, pks
+):
+    if is_view or not db.is_mutable:
+        return None
+
+    if not await datasette.allowed(
+        action="insert-row",
+        resource=TableResource(database=database_name, table=table_name),
+        actor=request.actor,
+    ):
+        return None
+
+    column_types_map = await datasette.get_column_types(database_name, table_name)
+    columns = []
+    column_details = await db.table_column_details(table_name)
+    for column in column_details:
+        if column.hidden:
+            continue
+        is_pk = column.name in pks
+        is_auto_pk = (
+            is_pk
+            and len(pks) == 1
+            and SQLiteType.from_declared_type(column.type) == SQLiteType.INTEGER
+        )
+        if is_auto_pk:
+            continue
+        column_type = column_types_map.get(column.name)
+        columns.append(
+            {
+                "name": column.name,
+                "type": column.type,
+                "notnull": column.notnull,
+                "default": column.default_value,
+                "has_default": column.default_value is not None,
+                "is_pk": is_pk,
+                "value_type": _column_value_type_for_insert_form(column, column_type),
+                "column_type": (
+                    {"type": column_type.name, "config": column_type.config}
+                    if column_type is not None
+                    else None
+                ),
+            }
+        )
+
+    return {
+        "path": "{}/-/insert".format(datasette.urls.table(database_name, table_name)),
+        "tableName": table_name,
+        "columns": columns,
+        "primaryKeys": pks,
+    }
+
+
 async def display_columns_and_rows(
     datasette,
     database_name,
@@ -1753,6 +1816,9 @@ async def table_view_data(
                 sort = "rowid"
         data["sort"] = sort
         data["sort_desc"] = sort_desc
+        data["table_insert_ui"] = await _table_insert_ui(
+            datasette, request, db, database_name, table_name, is_view, pks
+        )
 
     return data, rows[:page_size], columns, expanded_columns, sql, next_url
 
diff --git a/tests/test_table_html.py b/tests/test_table_html.py
index 4e24f129..71d4b852 100644
--- a/tests/test_table_html.py
+++ b/tests/test_table_html.py
@@ -8,6 +8,21 @@ import urllib.parse
 from .utils import inner_html
 
 
+def table_data_from_soup(soup):
+    import json
+    import re
+
+    table_script = [
+        s for s in soup.find_all("script") if "_datasetteTableData" in (s.string or "")
+    ][0]
+    match = re.search(
+        r"window\._datasetteTableData\s*=\s*({.*?});",
+        table_script.string,
+        re.DOTALL,
+    )
+    return json.loads(match.group(1))
+
+
 @pytest.mark.asyncio
 @pytest.mark.parametrize(
     "path,expected_definition_sql",
@@ -864,24 +879,12 @@ async def test_row_delete_action_data_attributes():
         response = await ds.client.get("/data/items", actor={"id": "root"})
         assert response.status_code == 200
         soup = Soup(response.text, "html.parser")
-        import json
-        import re
-
-        table_script = [
-            s for s in soup.find_all("script") if "_datasetteTableData" in (s.string or "")
-        ][0]
-        match = re.search(
-            r"window\._datasetteTableData\s*=\s*({.*?});",
-            table_script.string,
-            re.DOTALL,
-        )
-        assert json.loads(match.group(1)) == {"tableUrl": "/data/items"}
+        assert table_data_from_soup(soup) == {"tableUrl": "/data/items"}
+        assert soup.select_one('button[data-table-action="insert-row"]') is None
 
         row = soup.select_one("table.rows-and-columns tbody tr")
         assert row["data-row"] == "1"
-        assert {
-            key for key in row.attrs if key.startswith("data-row")
-        } == {"data-row"}
+        assert {key for key in row.attrs if key.startswith("data-row")} == {"data-row"}
 
         edit_button = row.select_one(
             'button.row-inline-action-edit[data-row-action="edit"]'
@@ -902,6 +905,124 @@ async def test_row_delete_action_data_attributes():
         ds.close()
 
 
+@pytest.mark.asyncio
+async def test_table_insert_action_button_and_data():
+    ds = Datasette(
+        [],
+        config={
+            "databases": {
+                "data": {
+                    "tables": {
+                        "items": {
+                            "permissions": {
+                                "insert-row": {"id": "root"},
+                            },
+                        },
+                    },
+                },
+            },
+        },
+    )
+    try:
+        db = ds.add_database(
+            Database(ds, memory_name="test_table_insert_action"), name="data"
+        )
+        await db.execute_write_script("""
+            create table items (
+                id integer primary key,
+                name text not null,
+                score integer default 5,
+                created text default (datetime('now')),
+                body text
+            );
+            """)
+        response = await ds.client.get("/data/items", actor={"id": "root"})
+        assert response.status_code == 200
+        soup = Soup(response.text, "html.parser")
+
+        button = soup.select_one(
+            'button.table-insert-row[data-table-action="insert-row"]'
+        )
+        assert button is not None
+        assert button.text.strip() == "Insert row"
+        assert button.find("svg") is not None
+        assert button.find_parent("div", class_="table-row-toolbar") is not None
+
+        insert_data = table_data_from_soup(soup)["insertRow"]
+        assert insert_data["path"] == "/data/items/-/insert"
+        assert insert_data["tableName"] == "items"
+        assert insert_data["primaryKeys"] == ["id"]
+        assert [column["name"] for column in insert_data["columns"]] == [
+            "name",
+            "score",
+            "created",
+            "body",
+        ]
+        name, score, created, body = insert_data["columns"]
+        assert name["notnull"] == 1
+        assert name["value_type"] == "string"
+        assert not name["has_default"]
+        assert score["default"] == "5"
+        assert score["has_default"]
+        assert score["value_type"] == "number"
+        assert created["default"] == "datetime('now')"
+        assert created["has_default"]
+        assert body["value_type"] == "string"
+    finally:
+        ds.close()
+
+
+@pytest.mark.asyncio
+async def test_table_insert_action_includes_compound_primary_keys():
+    ds = Datasette(
+        [],
+        config={
+            "databases": {
+                "data": {
+                    "tables": {
+                        "memberships": {
+                            "permissions": {
+                                "insert-row": {"id": "root"},
+                            },
+                        },
+                    },
+                },
+            },
+        },
+    )
+    try:
+        db = ds.add_database(
+            Database(ds, memory_name="test_table_insert_compound_pk"), name="data"
+        )
+        await db.execute_write_script("""
+            create table memberships (
+                account text,
+                username text,
+                role text,
+                primary key (account, username)
+            );
+            """)
+        response = await ds.client.get("/data/memberships", actor={"id": "root"})
+        assert response.status_code == 200
+        insert_data = table_data_from_soup(Soup(response.text, "html.parser"))[
+            "insertRow"
+        ]
+        assert insert_data["tableName"] == "memberships"
+        assert insert_data["primaryKeys"] == ["account", "username"]
+        assert [column["name"] for column in insert_data["columns"]] == [
+            "account",
+            "username",
+            "role",
+        ]
+        assert [column["is_pk"] for column in insert_data["columns"]] == [
+            True,
+            True,
+            False,
+        ]
+    finally:
+        ds.close()
+
+
 @pytest.mark.asyncio
 async def test_table_fragment_endpoint(ds_client):
     response = await ds_client.get("/fixtures/simple_primary_key/-/fragment?_row=1")
@@ -912,9 +1033,7 @@ async def test_table_fragment_endpoint(ds_client):
     rows = soup.select("[data-row]")
     assert len(rows) == 1
     assert rows[0]["data-row"] == "1"
-    assert {
-        key for key in rows[0].attrs if key.startswith("data-row")
-    } == {"data-row"}
+    assert {key for key in rows[0].attrs if key.startswith("data-row")} == {"data-row"}
 
 
 @pytest.mark.asyncio
@@ -979,9 +1098,7 @@ async def test_table_fragment_uses_render_cell_hook():
     ds = Datasette(memory=True)
     await ds.invoke_startup()
     db = ds.add_memory_database("data")
-    await db.execute_write(
-        "create table items (id integer primary key, name text)"
-    )
+    await db.execute_write("create table items (id integer primary key, name text)")
     await db.execute_write("insert into items values (1, 'Alice')")
     ds.pm.register(TestRenderCellPlugin(), name="TestRenderCellPlugin")
     try:

From e91c646ee6890b564cc9433c86d21b2ac5804f5b Mon Sep 17 00:00:00 2001
From: Simon Willison <swillison@gmail.com>
Date: Sat, 13 Jun 2026 21:43:48 -0700
Subject: [PATCH 07/23] Use column label, if available in edit/delete dialog

---
 datasette/static/app.css        | 30 ++++++++++++++++++++++-
 datasette/static/table.js       | 42 ++++++++++++++++++++++++++-------
 datasette/templates/_table.html |  2 +-
 datasette/views/table.py        | 28 ++++++++++++++++++++--
 tests/test_table_html.py        | 19 +++++++++++----
 5 files changed, 105 insertions(+), 16 deletions(-)

diff --git a/datasette/static/app.css b/datasette/static/app.css
index 9226580b..8e68c1bf 100644
--- a/datasette/static/app.css
+++ b/datasette/static/app.css
@@ -1264,9 +1264,15 @@ dialog.row-delete-dialog::backdrop {
     justify-content: flex-start;
     gap: 12px;
     flex-shrink: 0;
+    min-width: 0;
 }
 
 .row-delete-dialog .modal-title {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+    min-width: 0;
+    max-width: 100%;
     font-size: 1rem;
     font-weight: 600;
     color: var(--ink);
@@ -1388,16 +1394,30 @@ dialog.row-edit-dialog::backdrop {
     align-items: center;
     gap: 12px;
     flex-shrink: 0;
+    min-width: 0;
 }
 
 .row-edit-dialog .modal-title {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+    min-width: 0;
+    max-width: 100%;
     font-size: 1rem;
     font-weight: 600;
     color: var(--ink);
 }
 
-.row-edit-dialog .modal-title code {
+.row-edit-dialog .modal-title .row-dialog-action,
+.row-delete-dialog .modal-title .row-dialog-action {
+    flex: 0 0 auto;
+    white-space: nowrap;
+}
+
+.row-edit-dialog .modal-title code,
+.row-delete-dialog .modal-title code {
     display: inline;
+    flex: 0 0 auto;
     padding: 2px 5px;
     border: 1px solid var(--rule);
     border-radius: 4px;
@@ -1407,6 +1427,14 @@ dialog.row-edit-dialog::backdrop {
     overflow-wrap: anywhere;
 }
 
+.row-edit-dialog .modal-title .row-dialog-label,
+.row-delete-dialog .modal-title .row-dialog-label {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
 .row-edit-form {
     display: flex;
     flex: 1 1 auto;
diff --git a/datasette/static/table.js b/datasette/static/table.js
index c8109c62..53c4592b 100644
--- a/datasette/static/table.js
+++ b/datasette/static/table.js
@@ -471,6 +471,10 @@ function rowDisplayLabel(row) {
   return tildeDecode(row.getAttribute("data-row") || "");
 }
 
+function rowTitleLabel(row) {
+  return row.getAttribute("data-row-label") || "";
+}
+
 function tableBaseUrl() {
   var tableUrl =
     window._datasetteTableData && window._datasetteTableData.tableUrl;
@@ -607,6 +611,7 @@ function ensureRowDeleteDialog(manager) {
 
   rowDeleteDialogState = {
     dialog: dialog,
+    title: dialog.querySelector(".modal-title"),
     message: dialog.querySelector(".row-delete-message"),
     rowId: dialog.querySelector(".row-delete-id"),
     error: dialog.querySelector(".row-delete-error"),
@@ -741,6 +746,12 @@ function openRowDeleteDialog(button, manager) {
 
   clearRowDeleteDialogError(state);
   setRowDeleteDialogBusy(state, false);
+  setRowDialogTitle(
+    state.title,
+    "Delete row",
+    state.currentPkPath || "this row",
+    rowTitleLabel(row),
+  );
   state.rowId.textContent = state.currentPkPath || "this row";
 
   if (!state.dialog.open) {
@@ -1335,16 +1346,26 @@ function renderRowInsertFields(state, data) {
   (firstControl || state.saveButton).focus();
 }
 
-function setRowEditDialogTitle(state, text, codeText) {
-  state.title.textContent = "";
-  state.title.appendChild(document.createTextNode(text));
+function setRowDialogTitle(title, text, codeText, labelText) {
+  title.textContent = "";
+  var action = document.createElement("span");
+  action.className = "row-dialog-action";
+  action.textContent = text;
+  title.appendChild(action);
   if (!codeText) {
     return;
   }
-  state.title.appendChild(document.createTextNode(" "));
+  title.appendChild(document.createTextNode(" "));
   var code = document.createElement("code");
   code.textContent = codeText;
-  state.title.appendChild(code);
+  title.appendChild(code);
+  if (labelText && labelText !== codeText) {
+    title.appendChild(document.createTextNode(" "));
+    var label = document.createElement("span");
+    label.className = "row-dialog-label";
+    label.textContent = labelText;
+    title.appendChild(label);
+  }
 }
 
 function ensureRowEditDialog(manager) {
@@ -1494,7 +1515,12 @@ async function openRowEditDialog(button, manager) {
   setRowEditDialogLoading(state, true);
   state.fields.innerHTML = "";
   state.dialog.removeAttribute("aria-describedby");
-  setRowEditDialogTitle(state, "Edit row", state.currentPkPath || "this row");
+  setRowDialogTitle(
+    state.title,
+    "Edit row",
+    state.currentPkPath || "this row",
+    rowTitleLabel(row),
+  );
   state.summary.hidden = true;
   state.summary.textContent = "";
 
@@ -1561,8 +1587,8 @@ function openRowInsertDialog(button, manager) {
   setRowEditDialogLoading(state, false);
   state.fields.innerHTML = "";
   state.dialog.removeAttribute("aria-describedby");
-  setRowEditDialogTitle(
-    state,
+  setRowDialogTitle(
+    state.title,
     insertData.tableName ? "Insert row into " + insertData.tableName : "Insert row",
   );
   state.summary.hidden = true;
diff --git a/datasette/templates/_table.html b/datasette/templates/_table.html
index 38454da3..171b6442 100644
--- a/datasette/templates/_table.html
+++ b/datasette/templates/_table.html
@@ -22,7 +22,7 @@
         </thead>
         <tbody>
         {% for row in display_rows %}
-            <tr{% if row.pk_path is not none %} data-row="{{ row.row_path }}"{% endif %}>
+            <tr{% if row.pk_path is not none %} data-row="{{ row.row_path }}"{% if row.row_label %} data-row-label="{{ row.row_label }}"{% endif %}{% endif %}>
                 {% for cell in row %}
                     <td class="col-{{ cell.column|to_css_class }} type-{{ cell.value_type }}">{{ cell.value }}</td>
                 {% endfor %}
diff --git a/datasette/views/table.py b/datasette/views/table.py
index c58e39f3..c962637f 100644
--- a/datasette/views/table.py
+++ b/datasette/views/table.py
@@ -66,10 +66,12 @@ class Row:
         cells,
         pk_path=None,
         row_path=None,
+        row_label=None,
     ):
         self.cells = cells
         self.pk_path = pk_path
         self.row_path = row_path
+        self.row_label = row_label
 
     def __iter__(self):
         return iter(self.cells)
@@ -96,6 +98,20 @@ class Row:
         return json.dumps(d, default=repr, indent=2)
 
 
+def row_label_from_label_column(row, label_column):
+    if not label_column:
+        return None
+    try:
+        value = row[label_column]
+    except KeyError:
+        return None
+    if isinstance(value, dict):
+        value = value.get("label")
+    if value is None or value == "":
+        return None
+    return str(value)
+
+
 async def run_sequential(*args):
     # This used to be swappable for asyncio.gather() to run things in
     # parallel, but this lead to hard-to-debug locking issues with
@@ -325,6 +341,9 @@ async def display_columns_and_rows(
     pks_for_display = pks
     if not pks_for_display:
         pks_for_display = ["rowid"]
+    label_column = None
+    if link_column:
+        label_column = await db.label_column_for_table(table_name)
     row_action_permissions = {}
     if link_column and request is not None and db.is_mutable:
         row_action_permissions = await datasette.allowed_many(
@@ -372,6 +391,10 @@ async def display_columns_and_rows(
             is_special_link_column = len(pks) != 1
             pk_path = path_from_row_pks(row, pks, not pks, False)
             row_path = path_from_row_pks(row, pks, not pks)
+            row_label = row_label_from_label_column(row, label_column)
+            row_action_label = pk_path
+            if row_label and row_label != pk_path:
+                row_action_label = "{} {}".format(pk_path, row_label)
             table_path = datasette.urls.table(database_name, table_name)
             row_link = '<a href="{table_path}/{flat_pks_quoted}">{flat_pks}</a>'.format(
                 table_path=table_path,
@@ -407,7 +430,7 @@ async def display_columns_and_rows(
                     'data-row-action="edit">'
                     "{edit_icon}</button>".format(
                         edit_icon=edit_icon,
-                        row_label=markupsafe.escape(pk_path),
+                        row_label=markupsafe.escape(row_action_label),
                     )
                 )
             if row_action_permissions.get("delete-row"):
@@ -417,7 +440,7 @@ async def display_columns_and_rows(
                     'data-row-action="delete">'
                     "{delete_icon}</button>".format(
                         delete_icon=delete_icon,
-                        row_label=markupsafe.escape(pk_path),
+                        row_label=markupsafe.escape(row_action_label),
                     )
                 )
             if row_actions:
@@ -544,6 +567,7 @@ async def display_columns_and_rows(
                     cells,
                     pk_path=pk_path,
                     row_path=row_path,
+                    row_label=row_label,
                 )
             )
         else:
diff --git a/tests/test_table_html.py b/tests/test_table_html.py
index 71d4b852..364457d9 100644
--- a/tests/test_table_html.py
+++ b/tests/test_table_html.py
@@ -682,8 +682,10 @@ async def test_table_html_compound_primary_key(ds_client):
     rows = table.select("tbody tr")
     assert rows[0]["data-row"] == "a,b"
     assert "data-row-pk-path" not in rows[0].attrs
+    assert "data-row-label" not in rows[0].attrs
     assert rows[1]["data-row"] == "a~2Fb,~2Ec-d"
     assert "data-row-pk-path" not in rows[1].attrs
+    assert "data-row-label" not in rows[1].attrs
 
 
 @pytest.mark.asyncio
@@ -884,13 +886,17 @@ async def test_row_delete_action_data_attributes():
 
         row = soup.select_one("table.rows-and-columns tbody tr")
         assert row["data-row"] == "1"
-        assert {key for key in row.attrs if key.startswith("data-row")} == {"data-row"}
+        assert row["data-row-label"] == "One"
+        assert {key for key in row.attrs if key.startswith("data-row")} == {
+            "data-row",
+            "data-row-label",
+        }
 
         edit_button = row.select_one(
             'button.row-inline-action-edit[data-row-action="edit"]'
         )
         assert edit_button is not None
-        assert edit_button["aria-label"] == "Edit row 1"
+        assert edit_button["aria-label"] == "Edit row 1 One"
         assert edit_button["title"] == "Edit row"
         assert edit_button.find("svg") is not None
 
@@ -898,7 +904,7 @@ async def test_row_delete_action_data_attributes():
             'button.row-inline-action-delete[data-row-action="delete"]'
         )
         assert button is not None
-        assert button["aria-label"] == "Delete row 1"
+        assert button["aria-label"] == "Delete row 1 One"
         assert button["title"] == "Delete row"
         assert button.find("svg") is not None
     finally:
@@ -1033,7 +1039,11 @@ async def test_table_fragment_endpoint(ds_client):
     rows = soup.select("[data-row]")
     assert len(rows) == 1
     assert rows[0]["data-row"] == "1"
-    assert {key for key in rows[0].attrs if key.startswith("data-row")} == {"data-row"}
+    assert rows[0]["data-row-label"] == "hello"
+    assert {key for key in rows[0].attrs if key.startswith("data-row")} == {
+        "data-row",
+        "data-row-label",
+    }
 
 
 @pytest.mark.asyncio
@@ -1046,6 +1056,7 @@ async def test_table_fragment_row_parameter_replaces_pk_filters(ds_client):
     rows = soup.select("[data-row]")
     assert len(rows) == 1
     assert rows[0]["data-row"] == "1"
+    assert rows[0]["data-row-label"] == "hello"
 
 
 def test_table_data_uses_base_url(app_client_base_url_prefix):

From a7cd746613bf419553e9373e97545be0c81de426 Mon Sep 17 00:00:00 2001
From: Simon Willison <swillison@gmail.com>
Date: Sat, 13 Jun 2026 21:48:28 -0700
Subject: [PATCH 08/23] Use label column in 'Inserted X' messages

---
 datasette/static/table.js | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/datasette/static/table.js b/datasette/static/table.js
index 53c4592b..7d8f591d 100644
--- a/datasette/static/table.js
+++ b/datasette/static/table.js
@@ -475,6 +475,14 @@ function rowTitleLabel(row) {
   return row.getAttribute("data-row-label") || "";
 }
 
+function insertedRowStatusMessage(rowId, rowLabel) {
+  var message = "Inserted row " + rowId;
+  if (rowLabel && rowLabel !== rowId) {
+    message += " (" + rowLabel + ")";
+  }
+  return message + ".";
+}
+
 function tableBaseUrl() {
   var tableUrl =
     window._datasetteTableData && window._datasetteTableData.tableUrl;
@@ -1201,8 +1209,6 @@ async function saveRowEditDialog(state) {
 
       state.currentRowId = insertedRowId;
       state.currentFragmentUrl = rowFragmentUrlById(insertedRowId);
-      var insertedStatusMessage =
-        "Inserted row " + tildeDecode(insertedRowId) + ".";
       var insertedRow = null;
       try {
         insertedRow = await fetchUpdatedRowElement(state);
@@ -1217,6 +1223,10 @@ async function saveRowEditDialog(state) {
         return;
       }
       if (insertedRow) {
+        var insertedStatusMessage = insertedRowStatusMessage(
+          tildeDecode(insertedRowId),
+          rowTitleLabel(insertedRow),
+        );
         var addedRow = addInsertedRowToPage(insertedRow);
         state.dialog.close();
         showRowMutationStatus(state.manager, insertedStatusMessage, false);

From e1e67e912a3b82bd4df4c8d35a047dc6de80b207 Mon Sep 17 00:00:00 2001
From: Simon Willison <swillison@gmail.com>
Date: Sat, 13 Jun 2026 21:58:16 -0700
Subject: [PATCH 09/23] Docs for /<database>/<table>/-/fragment

---
 docs/pages.rst | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/docs/pages.rst b/docs/pages.rst
index a8ff7c37..ce88be12 100644
--- a/docs/pages.rst
+++ b/docs/pages.rst
@@ -118,6 +118,16 @@ Some examples:
 * `../antiquities-act%2Factions_under_antiquities_act <https://fivethirtyeight.datasettes.com/fivethirtyeight/antiquities-act%2Factions_under_antiquities_act>`_ is an interface for exploring the "actions under the antiquities act" data table published by FiveThirtyEight.
 * `../global-power-plants?country_long=United+Kingdom&primary_fuel=Gas <https://datasette.io/global-power-plants/global-power-plants?_facet=primary_fuel&_facet=owner&_facet=country_long&country_long__exact=United+Kingdom&primary_fuel=Gas>`_ is a filtered table page showing every Gas power plant in the United Kingdom. It includes some default facets (configured using `its metadata.json <https://datasette.io/-/metadata>`_) and uses the `datasette-cluster-map <https://github.com/simonw/datasette-cluster-map>`_ plugin to show a map of the results.
 
+.. _TableFragmentView:
+
+Table fragment
+--------------
+
+The ``/<database>/<table>/-/fragment`` endpoint returns the rendered table HTML
+for rows matching the provided filters. It is used by Datasette's row editing
+interface to refresh rows after changes while still respecting custom table
+templates and ``render_cell`` plugin hooks.
+
 .. _RowView:
 
 Row

From 2b61c916d009aed4db9a5c402cdbe5538102758c Mon Sep 17 00:00:00 2001
From: Simon Willison <swillison@gmail.com>
Date: Sat, 13 Jun 2026 22:01:26 -0700
Subject: [PATCH 10/23] Handle hidden label columns in row actions

---
 datasette/views/table.py |  2 +-
 tests/test_table_html.py | 23 +++++++++++++++++++++--
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/datasette/views/table.py b/datasette/views/table.py
index c962637f..d1928fae 100644
--- a/datasette/views/table.py
+++ b/datasette/views/table.py
@@ -103,7 +103,7 @@ def row_label_from_label_column(row, label_column):
         return None
     try:
         value = row[label_column]
-    except KeyError:
+    except (KeyError, IndexError):
         return None
     if isinstance(value, dict):
         value = value.get("label")
diff --git a/tests/test_table_html.py b/tests/test_table_html.py
index 364457d9..699c1c1c 100644
--- a/tests/test_table_html.py
+++ b/tests/test_table_html.py
@@ -875,8 +875,8 @@ async def test_row_delete_action_data_attributes():
             Database(ds, memory_name="test_row_delete_actions"), name="data"
         )
         await db.execute_write_script("""
-            create table items (id integer primary key, name text);
-            insert into items (id, name) values (1, 'One');
+            create table items (id integer primary key, name text, score integer);
+            insert into items (id, name, score) values (1, 'One', 5);
             """)
         response = await ds.client.get("/data/items", actor={"id": "root"})
         assert response.status_code == 200
@@ -907,6 +907,25 @@ async def test_row_delete_action_data_attributes():
         assert button["aria-label"] == "Delete row 1 One"
         assert button["title"] == "Delete row"
         assert button.find("svg") is not None
+
+        response = await ds.client.get("/data/items?_col=score", actor={"id": "root"})
+        assert response.status_code == 200
+        soup = Soup(response.text, "html.parser")
+        row = soup.select_one("table.rows-and-columns tbody tr")
+        assert row["data-row"] == "1"
+        assert "data-row-label" not in row.attrs
+
+        edit_button = row.select_one(
+            'button.row-inline-action-edit[data-row-action="edit"]'
+        )
+        assert edit_button is not None
+        assert edit_button["aria-label"] == "Edit row 1"
+
+        button = row.select_one(
+            'button.row-inline-action-delete[data-row-action="delete"]'
+        )
+        assert button is not None
+        assert button["aria-label"] == "Delete row 1"
     finally:
         ds.close()
 

From 5490c7b7948202e024d05aa4752be4565cf3d34a Mon Sep 17 00:00:00 2001
From: Simon Willison <swillison@gmail.com>
Date: Sat, 13 Jun 2026 22:18:45 -0700
Subject: [PATCH 11/23] textarea column type

Shows as multiline edit in edit/insert dialog
---
 datasette/default_column_types.py | 8 +++++++-
 datasette/static/table.js         | 9 ++++++---
 docs/configuration.rst            | 9 ++++++---
 docs/plugin_hooks.rst             | 2 +-
 tests/test_column_types.py        | 7 +++++++
 tests/test_table_html.py          | 2 ++
 6 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/datasette/default_column_types.py b/datasette/default_column_types.py
index 24493994..f90a733e 100644
--- a/datasette/default_column_types.py
+++ b/datasette/default_column_types.py
@@ -76,6 +76,12 @@ class JsonColumnType(ColumnType):
         return None
 
 
+class TextareaColumnType(ColumnType):
+    name = "textarea"
+    description = "Multiline text"
+    sqlite_types = (SQLiteType.TEXT,)
+
+
 @hookimpl
 def register_column_types(datasette):
-    return [UrlColumnType, EmailColumnType, JsonColumnType]
+    return [UrlColumnType, EmailColumnType, JsonColumnType, TextareaColumnType]
diff --git a/datasette/static/table.js b/datasette/static/table.js
index 7d8f591d..f762ca40 100644
--- a/datasette/static/table.js
+++ b/datasette/static/table.js
@@ -792,12 +792,15 @@ function valueToEditText(value) {
   return String(value);
 }
 
-function shouldUseTextarea(value) {
+function shouldUseTextarea(value, columnType) {
+  if (columnType && columnType.type === "textarea") {
+    return true;
+  }
   if (value && typeof value === "object") {
     return true;
   }
   var text = valueToEditText(value);
-  return text.length > 80 || text.indexOf("\n") !== -1;
+  return text.length > 80 || /[\r\n]/.test(text);
 }
 
 function rowEditValueType(value) {
@@ -835,7 +838,7 @@ function createRowEditField(column, value, isPk, columnType, index, options) {
   var controlWrap = document.createElement("div");
   controlWrap.className = "row-edit-control-wrap";
 
-  var control = shouldUseTextarea(value)
+  var control = shouldUseTextarea(value, columnType)
     ? document.createElement("textarea")
     : document.createElement("input");
   control.className = "row-edit-input";
diff --git a/docs/configuration.rst b/docs/configuration.rst
index 9213a640..d01f5153 100644
--- a/docs/configuration.rst
+++ b/docs/configuration.rst
@@ -1102,9 +1102,9 @@ These configure :ref:`full-text search <full_text_search>` for a table or view.
 ``column_types``
 ^^^^^^^^^^^^^^^^
 
-You can assign semantic column types to columns, which affect how values are rendered, validated, and transformed. Built-in column types include ``url``, ``email``, and ``json``. Plugins can register additional column types using the :ref:`register_column_types <plugin_register_column_types>` plugin hook.
+You can assign semantic column types to columns, which affect how values are rendered, validated, transformed, and edited. Built-in column types include ``url``, ``email``, ``json``, and ``textarea``. Plugins can register additional column types using the :ref:`register_column_types <plugin_register_column_types>` plugin hook.
 
-Column types can optionally declare which SQLite column types they apply to using ``sqlite_types``. Datasette will reject incompatible assignments. The built-in ``url``, ``email``, and ``json`` column types are all restricted to ``TEXT`` columns.
+Column types can optionally declare which SQLite column types they apply to using ``sqlite_types``. Datasette will reject incompatible assignments. The built-in ``url``, ``email``, ``json``, and ``textarea`` column types are all restricted to ``TEXT`` columns.
 
 The simplest form maps column names to type name strings:
 
@@ -1119,6 +1119,7 @@ The simplest form maps column names to type name strings:
                   website: url
                   contact: email
                   extra_data: json
+                  notes: textarea
       """).strip()
     )
 .. ]]]
@@ -1135,6 +1136,7 @@ The simplest form maps column names to type name strings:
                   website: url
                   contact: email
                   extra_data: json
+                  notes: textarea
 
 .. tab:: datasette.json
 
@@ -1148,7 +1150,8 @@ The simplest form maps column names to type name strings:
                   "column_types": {
                     "website": "url",
                     "contact": "email",
-                    "extra_data": "json"
+                    "extra_data": "json",
+                    "notes": "textarea"
                   }
                 }
               }
diff --git a/docs/plugin_hooks.rst b/docs/plugin_hooks.rst
index 2a0ddc93..7ae52a68 100644
--- a/docs/plugin_hooks.rst
+++ b/docs/plugin_hooks.rst
@@ -1092,7 +1092,7 @@ Column types are assigned to columns via the :ref:`column_types <table_configura
                 config:
                   format: rgb
 
-Datasette includes three built-in column types: ``url``, ``email``, and ``json``.
+Datasette includes four built-in column types: ``url``, ``email``, ``json``, and ``textarea``. The ``textarea`` type is an editing hint that causes Datasette's insert/edit forms to use a multiline ``<textarea>`` control for that column.
 
 .. _plugin_asgi_wrapper:
 
diff --git a/tests/test_column_types.py b/tests/test_column_types.py
index d77f2cf5..0c6b0dd4 100644
--- a/tests/test_column_types.py
+++ b/tests/test_column_types.py
@@ -494,6 +494,7 @@ async def test_builtin_column_types_registered(ds_ct):
     assert "url" in ds_ct._column_types
     assert "email" in ds_ct._column_types
     assert "json" in ds_ct._column_types
+    assert "textarea" in ds_ct._column_types
     assert "nonexistent" not in ds_ct._column_types
 
 
@@ -510,6 +511,10 @@ async def test_column_type_class_attributes(ds_ct):
     assert email_cls.sqlite_types == (SQLiteType.TEXT,)
     json_cls = ds_ct._column_types["json"]
     assert json_cls.sqlite_types == (SQLiteType.TEXT,)
+    textarea_cls = ds_ct._column_types["textarea"]
+    assert textarea_cls.name == "textarea"
+    assert textarea_cls.description == "Multiline text"
+    assert textarea_cls.sqlite_types == (SQLiteType.TEXT,)
 
 
 def test_sqlite_type_from_declared_type():
@@ -941,6 +946,7 @@ async def test_set_column_type_ui_data_includes_applicable_types(
         "options": [
             {"name": "email", "description": "Email address"},
             {"name": "json", "description": "JSON data"},
+            {"name": "textarea", "description": "Multiline text"},
             {"name": "url", "description": "URL"},
         ],
     }
@@ -949,6 +955,7 @@ async def test_set_column_type_ui_data_includes_applicable_types(
         "options": [
             {"name": "email", "description": "Email address"},
             {"name": "json", "description": "JSON data"},
+            {"name": "textarea", "description": "Multiline text"},
             {"name": "url", "description": "URL"},
         ],
     }
diff --git a/tests/test_table_html.py b/tests/test_table_html.py
index 699c1c1c..c0af996f 100644
--- a/tests/test_table_html.py
+++ b/tests/test_table_html.py
@@ -942,6 +942,7 @@ async def test_table_insert_action_button_and_data():
                             "permissions": {
                                 "insert-row": {"id": "root"},
                             },
+                            "column_types": {"body": "textarea"},
                         },
                     },
                 },
@@ -993,6 +994,7 @@ async def test_table_insert_action_button_and_data():
         assert created["default"] == "datetime('now')"
         assert created["has_default"]
         assert body["value_type"] == "string"
+        assert body["column_type"] == {"type": "textarea", "config": None}
     finally:
         ds.close()
 

From b868f7d4c36888e4c7d7525cbbe2071103480d42 Mon Sep 17 00:00:00 2001
From: Simon Willison <swillison@gmail.com>
Date: Sat, 13 Jun 2026 22:40:03 -0700
Subject: [PATCH 12/23] /db/table/-/autocomplete?q= JSON endpoint

Needed to help implement edit foreign key reference.
---
 datasette/app.py           |   5 +
 datasette/views/table.py   | 150 +++++++++++++++++++++++++++++
 docs/json_api.rst          |  42 +++++++++
 tests/test_autocomplete.py | 188 +++++++++++++++++++++++++++++++++++++
 4 files changed, 385 insertions(+)
 create mode 100644 tests/test_autocomplete.py

diff --git a/datasette/app.py b/datasette/app.py
index 4d7f483a..545b4588 100644
--- a/datasette/app.py
+++ b/datasette/app.py
@@ -82,6 +82,7 @@ from .views.special import (
     TableSchemaView,
 )
 from .views.table import (
+    TableAutocompleteView,
     TableInsertView,
     TableUpsertView,
     TableSetColumnTypeView,
@@ -2619,6 +2620,10 @@ class Datasette:
             TableFragmentView.as_view(self),
             r"/(?P<database>[^\/\.]+)/(?P<table>[^\/\.]+)/-/fragment$",
         )
+        add_route(
+            TableAutocompleteView.as_view(self),
+            r"/(?P<database>[^\/\.]+)/(?P<table>[^\/\.]+)/-/autocomplete$",
+        )
         add_route(
             TableDropView.as_view(self),
             r"/(?P<database>[^\/\.]+)/(?P<table>[^\/\.]+)/-/drop$",
diff --git a/datasette/views/table.py b/datasette/views/table.py
index d1928fae..e3e448f6 100644
--- a/datasette/views/table.py
+++ b/datasette/views/table.py
@@ -15,6 +15,7 @@ from datasette.events import (
     InsertRowsEvent,
     UpsertRowsEvent,
 )
+from datasette.database import QueryInterrupted
 from datasette import tracer
 from datasette.resources import DatabaseResource, TableResource
 from datasette.utils import (
@@ -1111,6 +1112,155 @@ class TableFragmentView(BaseView):
         return Response.html(html)
 
 
+def _escape_like(value):
+    return value.replace("\\", "\\\\").replace("%", "\\%").replace("_", "\\_")
+
+
+# Returns the exclusive upper bound for an indexed prefix search:
+# "abc" -> "abd", so `pk >= "abc" and pk < "abd"` covers "abc%".
+# The LIKE clause is still applied separately for exact escaped-LIKE semantics.
+def _prefix_range_end(value):
+    if not value:
+        return None
+    characters = list(value)
+    for i in range(len(characters) - 1, -1, -1):
+        if ord(characters[i]) < 0x10FFFF:
+            return "{}{}".format("".join(characters[:i]), chr(ord(characters[i]) + 1))
+    return None
+
+
+def _autocomplete_like(column):
+    return "{} like :like escape char(92)".format(escape_sqlite(column))
+
+
+def _autocomplete_prefix_like(column):
+    return "{} like :prefix escape char(92)".format(escape_sqlite(column))
+
+
+def _autocomplete_order_by(pks, label_column, exact_pk, label_matches_first=True):
+    clauses = []
+    if exact_pk:
+        clauses.append(
+            "case when cast({} as text) = :q then 0 else 1 end".format(
+                escape_sqlite(pks[0])
+            )
+        )
+    if label_column:
+        label_like = _autocomplete_like(label_column)
+        if label_matches_first:
+            clauses.append("case when {} then 0 else 1 end".format(label_like))
+        clauses.append(
+            "case when {} then length(cast({} as text)) end".format(
+                label_like, escape_sqlite(label_column)
+            )
+        )
+    else:
+        clauses.append("length(cast({} as text))".format(escape_sqlite(pks[0])))
+    clauses.extend(escape_sqlite(pk) for pk in pks)
+    return ", ".join(clauses)
+
+
+def _autocomplete_pk_order_by(pks):
+    return ", ".join(escape_sqlite(pk) for pk in pks)
+
+
+def _autocomplete_response_rows(rows, pks, label_column):
+    response_rows = []
+    for row in rows:
+        item = {"pks": {pk: row[pk] for pk in pks}}
+        if label_column:
+            item["label"] = row[label_column]
+        response_rows.append(item)
+    return response_rows
+
+
+class TableAutocompleteView(BaseView):
+    name = "table-autocomplete"
+
+    async def get(self, request):
+        resolved = await self.ds.resolve_table(request)
+        if resolved.is_view:
+            raise BadRequest("Autocomplete is only available for tables")
+
+        db = resolved.db
+        database_name = db.name
+        table_name = resolved.table
+        visible, _ = await self.ds.check_visibility(
+            request.actor,
+            action="view-table",
+            resource=TableResource(database=database_name, table=table_name),
+        )
+        if not visible:
+            raise Forbidden("You do not have permission to view this table")
+
+        pks = await db.primary_keys(table_name)
+        if not pks:
+            pks = ["rowid"]
+        label_column = await db.label_column_for_table(table_name)
+        select_columns = list(
+            dict.fromkeys(pks + ([label_column] if label_column else []))
+        )
+        select_sql = ", ".join(escape_sqlite(column) for column in select_columns)
+        q = request.args.get("q") or ""
+        if not q:
+            return Response.json({"rows": []})
+        params = {
+            "q": q,
+            "like": "%{}%".format(_escape_like(q)),
+            "prefix": "{}%".format(_escape_like(q)),
+        }
+
+        like_columns = pks[:]
+        if label_column and label_column not in like_columns:
+            like_columns.append(label_column)
+        where_sql = " or ".join(_autocomplete_like(column) for column in like_columns)
+        exact_pk = len(pks) == 1
+        sql = """
+            select {select_sql}
+            from {table}
+            where {where}
+            order by {order_by}
+            limit 10
+        """.format(
+            select_sql=select_sql,
+            table=escape_sqlite(table_name),
+            where=where_sql,
+            order_by=_autocomplete_order_by(pks, label_column, exact_pk),
+        )
+
+        try:
+            results = await db.execute(sql, params, custom_time_limit=500)
+        except QueryInterrupted:
+            fallback_where = _autocomplete_prefix_like(pks[0])
+            prefix_end = _prefix_range_end(q)
+            if prefix_end:
+                params["prefix_end"] = prefix_end
+                first_pk = escape_sqlite(pks[0])
+                fallback_where = (
+                    "{first_pk} >= :q and {first_pk} < :prefix_end and {like}"
+                ).format(first_pk=first_pk, like=fallback_where)
+            fallback_sql = """
+                select {select_sql}
+                from {table}
+                where {where}
+                order by {order_by}
+                limit 10
+            """.format(
+                select_sql=select_sql,
+                table=escape_sqlite(table_name),
+                where=fallback_where,
+                order_by=_autocomplete_pk_order_by(pks),
+            )
+            try:
+                results = await db.execute(fallback_sql, params, custom_time_limit=500)
+            except QueryInterrupted:
+                return Response.json({"rows": []})
+
+        return Response.json(
+            {"rows": _autocomplete_response_rows(results.rows, pks, label_column)}
+        )
+
+
 async def _columns_to_select(table_columns, pks, request):
     columns = list(table_columns)
     if "_col" in request.args:
diff --git a/docs/json_api.rst b/docs/json_api.rst
index fbc3cf60..f7a0caae 100644
--- a/docs/json_api.rst
+++ b/docs/json_api.rst
@@ -1201,6 +1201,48 @@ The following extras are available for arbitrary SQL query responses and stored,
 
 .. [[[end]]]
 
+.. _TableAutocompleteView:
+
+Table autocomplete
+------------------
+
+The ``/<database>/<table>/-/autocomplete`` endpoint returns up to 10 primary key
+matches for a table, intended for building autocomplete interfaces such as
+foreign key pickers.
+
+::
+
+    GET /<database>/<table>/-/autocomplete?q=search
+
+The ``q`` parameter is required. If it is omitted or blank, the endpoint returns
+an empty ``"rows"`` list.
+
+The response includes a ``"pks"`` object containing the primary key value or
+values for each row. If Datasette can detect a label column, or one has been
+configured using ``label_column``, each row will also include ``"label"``:
+
+.. code-block:: json
+
+    {
+        "rows": [
+            {
+                "pks": {
+                    "id": 1
+                },
+                "label": "Example row"
+            }
+        ]
+    }
+
+The endpoint searches the primary key column or columns and the label column
+using escaped SQL ``LIKE`` queries. A single-column primary key exact match is
+returned first. Other matches are ordered by the shortest matching label value
+where a label column is available.
+
+The initial search runs with a 500ms time limit. If that query times out,
+Datasette falls back to a prefix match against the first primary key column so
+SQLite can use the primary key index.
+
 .. _table_arguments:
 
 Table arguments
diff --git a/tests/test_autocomplete.py b/tests/test_autocomplete.py
new file mode 100644
index 00000000..55e7458f
--- /dev/null
+++ b/tests/test_autocomplete.py
@@ -0,0 +1,188 @@
+import pytest
+
+from datasette.app import Datasette
+
+
+@pytest.mark.asyncio
+async def test_autocomplete_single_pk_exact_match_and_label_order():
+    ds = Datasette(memory=True)
+    db = ds.add_memory_database("autocomplete_single")
+    await db.execute_write_script("""
+        create table people (
+            id integer primary key,
+            name text
+        );
+        insert into people (id, name) values
+            (2, 'Longer non-label pk match'),
+            (20, '2'),
+            (21, '22'),
+            (200, 'A'),
+            (3, 'A label containing 2');
+        """)
+
+    response = await ds.client.get("/autocomplete_single/people/-/autocomplete?q=2")
+
+    assert response.status_code == 200
+    assert response.json() == {
+        "rows": [
+            {"pks": {"id": 2}, "label": "Longer non-label pk match"},
+            {"pks": {"id": 20}, "label": "2"},
+            {"pks": {"id": 21}, "label": "22"},
+            {"pks": {"id": 3}, "label": "A label containing 2"},
+            {"pks": {"id": 200}, "label": "A"},
+        ]
+    }
+
+
+@pytest.mark.asyncio
+async def test_autocomplete_blank_q_returns_no_results():
+    ds = Datasette(memory=True)
+    db = ds.add_memory_database("autocomplete_blank")
+    await db.execute_write_script("""
+        create table people (
+            id integer primary key,
+            name text
+        );
+        insert into people (id, name) values
+            (1, 'Alice'),
+            (2, 'Bob');
+        """)
+
+    response = await ds.client.get("/autocomplete_blank/people/-/autocomplete?q=")
+
+    assert response.status_code == 200
+    assert response.json() == {"rows": []}
+
+
+@pytest.mark.asyncio
+async def test_autocomplete_escapes_like_characters():
+    ds = Datasette(memory=True)
+    db = ds.add_memory_database("autocomplete_escape")
+    await db.execute_write_script("""
+        create table tags (
+            id integer primary key,
+            name text
+        );
+        insert into tags (id, name) values
+            (1, '100% real'),
+            (2, '100X real'),
+            (3, '100 percent real');
+        """)
+
+    response = await ds.client.get("/autocomplete_escape/tags/-/autocomplete?q=100%25")
+
+    assert response.status_code == 200
+    assert response.json() == {
+        "rows": [
+            {"pks": {"id": 1}, "label": "100% real"},
+        ]
+    }
+
+
+@pytest.mark.asyncio
+async def test_autocomplete_compound_pk_searches_all_pk_columns():
+    ds = Datasette(memory=True)
+    db = ds.add_memory_database("autocomplete_compound")
+    await db.execute_write_script("""
+        create table places (
+            country text,
+            code text,
+            name text,
+            primary key (country, code)
+        );
+        insert into places (country, code, name) values
+            ('us', 'ca', 'California'),
+            ('ca', 'bc', 'British Columbia'),
+            ('mx', 'ca', 'Campeche'),
+            ('zz', 'zz', 'Nothing');
+        """)
+
+    response = await ds.client.get("/autocomplete_compound/places/-/autocomplete?q=ca")
+
+    assert response.status_code == 200
+    assert response.json() == {
+        "rows": [
+            {"pks": {"country": "mx", "code": "ca"}, "label": "Campeche"},
+            {"pks": {"country": "us", "code": "ca"}, "label": "California"},
+            {"pks": {"country": "ca", "code": "bc"}, "label": "British Columbia"},
+        ]
+    }
+
+
+@pytest.mark.asyncio
+async def test_autocomplete_primary_key_called_label():
+    ds = Datasette(
+        memory=True,
+        config={
+            "databases": {
+                "autocomplete_label_pk": {
+                    "tables": {"things": {"label_column": "name"}}
+                }
+            }
+        },
+    )
+    db = ds.add_memory_database("autocomplete_label_pk")
+    await db.execute_write_script("""
+        create table things (
+            label text primary key,
+            name text
+        );
+        insert into things (label, name) values
+            ('abc', 'Display value'),
+            ('def', 'Other value');
+        """)
+
+    response = await ds.client.get("/autocomplete_label_pk/things/-/autocomplete?q=abc")
+
+    assert response.status_code == 200
+    assert response.json() == {
+        "rows": [
+            {"pks": {"label": "abc"}, "label": "Display value"},
+        ]
+    }
+
+
+@pytest.mark.asyncio
+async def test_autocomplete_timeout_uses_prefix_fallback():
+    ds = Datasette(
+        memory=True,
+        config={
+            "databases": {
+                "autocomplete_timeout": {"tables": {"things": {"label_column": "name"}}}
+            }
+        },
+        settings={
+            "num_sql_threads": 1,
+            "sql_time_limit_ms": 1,
+        },
+    )
+    db = ds.add_memory_database("autocomplete_timeout")
+    await db.execute_write_script("""
+        create table things (
+            id text primary key,
+            name text
+        );
+        insert into things (id, name) values
+            ('other-000001', 'item-1999 label-only match');
+        """)
+
+    def insert_rows(conn):
+        conn.executemany(
+            "insert into things (id, name) values (?, ?)",
+            ((f"item-{i:06d}", f"name {i:06d}") for i in range(200_000)),
+        )
+
+    await db.execute_write_fn(insert_rows)
+
+    response = await ds.client.get(
+        "/autocomplete_timeout/things/-/autocomplete?q=item-1999"
+    )
+
+    assert response.status_code == 200
+    data = response.json()
+    assert data == {
+        "rows": [
+            {"pks": {"id": f"item-1999{i:02d}"}, "label": f"name 1999{i:02d}"}
+            for i in range(10)
+        ]
+    }

From aa5fb7be3de3daaa26cd63eb1635fd024230f635 Mon Sep 17 00:00:00 2001
From: Simon Willison <swillison@gmail.com>
Date: Sat, 13 Jun 2026 22:59:37 -0700
Subject: [PATCH 13/23] Autocomplete widget and /-/debug/autocomplete test page

---
 datasette/app.py                            |   5 +
 datasette/default_debug_menu.py             |   5 +
 datasette/static/app.css                    |  67 +++++
 datasette/static/autocomplete.js            | 291 ++++++++++++++++++++
 datasette/templates/debug_autocomplete.html |  78 ++++++
 datasette/views/special.py                  | 104 +++++++
 tests/test_debug_autocomplete.py            |  91 ++++++
 tests/test_jump.py                          |   1 +
 8 files changed, 642 insertions(+)
 create mode 100644 datasette/static/autocomplete.js
 create mode 100644 datasette/templates/debug_autocomplete.html
 create mode 100644 tests/test_debug_autocomplete.py

diff --git a/datasette/app.py b/datasette/app.py
index 545b4588..75cab1e7 100644
--- a/datasette/app.py
+++ b/datasette/app.py
@@ -66,6 +66,7 @@ from .views.index import IndexView
 from .views.special import (
     JsonDataView,
     PatternPortfolioView,
+    AutocompleteDebugView,
     AuthTokenView,
     ApiExplorerView,
     CreateTokenView,
@@ -2539,6 +2540,10 @@ class Datasette:
             wrap_view(PatternPortfolioView, self),
             r"/-/patterns$",
         )
+        add_route(
+            AutocompleteDebugView.as_view(self),
+            r"/-/debug/autocomplete$",
+        )
         add_route(
             wrap_view(database_download, self),
             r"/(?P<database>[^\/\.]+)\.db$",
diff --git a/datasette/default_debug_menu.py b/datasette/default_debug_menu.py
index 6127b2a6..8ea3c287 100644
--- a/datasette/default_debug_menu.py
+++ b/datasette/default_debug_menu.py
@@ -37,6 +37,11 @@ DEBUG_MENU_ITEMS = (
         "Debug allow rules",
         "Explore how allow blocks match actors against permission rules.",
     ),
+    (
+        "/-/debug/autocomplete",
+        "Debug autocomplete",
+        "Try out table autocomplete against a detected label column.",
+    ),
     (
         "/-/threads",
         "Debug threads",
diff --git a/datasette/static/app.css b/datasette/static/app.css
index 8e68c1bf..450324aa 100644
--- a/datasette/static/app.css
+++ b/datasette/static/app.css
@@ -1600,6 +1600,73 @@ textarea.row-edit-input {
     margin: 0;
 }
 
+datasette-autocomplete {
+    display: block;
+    position: relative;
+    max-width: 38rem;
+}
+
+datasette-autocomplete input[type="text"],
+.debug-autocomplete-form input[type="text"] {
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 38rem;
+}
+
+.datasette-autocomplete-list {
+    background: #fff;
+    border: 1px solid var(--rule);
+    border-radius: 5px;
+    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.14);
+    box-sizing: border-box;
+    left: 0;
+    max-height: 16rem;
+    overflow-y: auto;
+    position: absolute;
+    right: 0;
+    top: calc(100% + 3px);
+    z-index: 20;
+}
+
+.datasette-autocomplete-list[hidden] {
+    display: none;
+}
+
+.datasette-autocomplete-option {
+    cursor: pointer;
+    padding: 7px 9px;
+}
+
+.datasette-autocomplete-option:hover,
+.datasette-autocomplete-option[aria-selected="true"] {
+    background: var(--paper);
+}
+
+.datasette-autocomplete-option[aria-selected="true"] {
+    background: #eef4ff;
+    box-shadow: inset 3px 0 0 #1a56db;
+}
+
+.datasette-autocomplete-status {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+}
+
+.debug-autocomplete-demo {
+    margin: 1rem 0;
+}
+
+.debug-autocomplete-selected {
+    max-width: 46rem;
+}
+
 .row-edit-dialog .modal-footer {
     padding: 14px 20px;
     border-top: 1px solid var(--rule);
diff --git a/datasette/static/autocomplete.js b/datasette/static/autocomplete.js
new file mode 100644
index 00000000..8a5bdc3d
--- /dev/null
+++ b/datasette/static/autocomplete.js
@@ -0,0 +1,291 @@
+(function () {
+  function autocompleteValueFromRow(row) {
+    var pks = (row && row.pks) || {};
+    var keys = Object.keys(pks);
+    if (!keys.length) {
+      return "";
+    }
+    if (keys.length === 1) {
+      return String(pks[keys[0]]);
+    }
+    return keys
+      .map(function (key) {
+        return key + "=" + pks[key];
+      })
+      .join(", ");
+  }
+
+  function autocompleteLabelFromRow(row) {
+    var value = autocompleteValueFromRow(row);
+    if (row.label && String(row.label) !== value) {
+      return row.label + " (" + value + ")";
+    }
+    return value;
+  }
+
+  if (!window.customElements || customElements.get("datasette-autocomplete")) {
+    return;
+  }
+
+  class DatasetteAutocomplete extends HTMLElement {
+    constructor() {
+      super();
+      this.input = null;
+      this.listbox = null;
+      this.status = null;
+      this.results = [];
+      this.activeIndex = -1;
+      this.fetchId = 0;
+      this.searchTimer = null;
+      this.boundInput = this.handleInput.bind(this);
+      this.boundKeydown = this.handleKeydown.bind(this);
+      this.boundBlur = this.handleBlur.bind(this);
+      this.boundFocus = this.handleFocus.bind(this);
+    }
+
+    connectedCallback() {
+      if (this.input) {
+        return;
+      }
+      this.input = this.querySelector("input");
+      if (!this.input) {
+        return;
+      }
+
+      var inputId =
+        this.input.id ||
+        "datasette-autocomplete-" + Math.random().toString(36).slice(2);
+      this.input.id = inputId;
+      var listboxId = inputId + "-listbox";
+      var statusId = inputId + "-status";
+
+      this.classList.add("datasette-autocomplete");
+      this.input.setAttribute("role", "combobox");
+      this.input.setAttribute("aria-autocomplete", "list");
+      this.input.setAttribute("aria-expanded", "false");
+      this.input.setAttribute("aria-controls", listboxId);
+      this.input.setAttribute("autocomplete", "off");
+
+      this.listbox = document.createElement("div");
+      this.listbox.className = "datasette-autocomplete-list";
+      this.listbox.id = listboxId;
+      this.listbox.setAttribute("role", "listbox");
+      this.listbox.hidden = true;
+
+      this.status = document.createElement("span");
+      this.status.className = "datasette-autocomplete-status";
+      this.status.id = statusId;
+      this.status.setAttribute("role", "status");
+      this.status.setAttribute("aria-live", "polite");
+
+      this.input.setAttribute(
+        "aria-describedby",
+        [this.input.getAttribute("aria-describedby"), statusId]
+          .filter(Boolean)
+          .join(" "),
+      );
+
+      this.appendChild(this.listbox);
+      this.appendChild(this.status);
+
+      this.input.addEventListener("input", this.boundInput);
+      this.input.addEventListener("keydown", this.boundKeydown);
+      this.input.addEventListener("blur", this.boundBlur);
+      this.input.addEventListener("focus", this.boundFocus);
+    }
+
+    disconnectedCallback() {
+      if (!this.input) {
+        return;
+      }
+      this.input.removeEventListener("input", this.boundInput);
+      this.input.removeEventListener("keydown", this.boundKeydown);
+      this.input.removeEventListener("blur", this.boundBlur);
+      this.input.removeEventListener("focus", this.boundFocus);
+    }
+
+    handleInput() {
+      this.scheduleSearch();
+    }
+
+    handleFocus() {
+      if (this.input.value.trim()) {
+        this.scheduleSearch();
+      }
+    }
+
+    handleBlur() {
+      window.setTimeout(() => this.close(), 150);
+    }
+
+    handleKeydown(ev) {
+      if (ev.key === "Escape") {
+        if (!this.listbox.hidden) {
+          ev.preventDefault();
+          this.close();
+        }
+        return;
+      }
+      if (ev.key === "ArrowDown") {
+        ev.preventDefault();
+        if (this.listbox.hidden) {
+          this.scheduleSearch();
+        } else {
+          this.setActiveIndex(this.activeIndex + 1);
+        }
+        return;
+      }
+      if (ev.key === "ArrowUp") {
+        ev.preventDefault();
+        if (!this.listbox.hidden) {
+          this.setActiveIndex(this.activeIndex - 1);
+        }
+        return;
+      }
+      if (ev.key === "Enter" && !this.listbox.hidden && this.activeIndex >= 0) {
+        ev.preventDefault();
+        this.chooseIndex(this.activeIndex);
+      }
+    }
+
+    scheduleSearch() {
+      window.clearTimeout(this.searchTimer);
+      this.searchTimer = window.setTimeout(() => this.search(), 150);
+    }
+
+    async search() {
+      var query = this.input.value.trim();
+      if (!query) {
+        this.close();
+        this.status.textContent = "";
+        return;
+      }
+      var src = this.getAttribute("src");
+      if (!src) {
+        return;
+      }
+
+      var url = new URL(src, location.href);
+      url.searchParams.set("q", query);
+      var fetchId = this.fetchId + 1;
+      this.fetchId = fetchId;
+      this.status.textContent = "Searching...";
+
+      try {
+        var response = await fetch(url.toString(), {
+          headers: {
+            Accept: "application/json",
+          },
+        });
+        if (!response.ok) {
+          throw new Error("HTTP " + response.status);
+        }
+        var data = await response.json();
+        if (fetchId !== this.fetchId) {
+          return;
+        }
+        this.results = (data && data.rows) || [];
+        this.render();
+      } catch (_error) {
+        if (fetchId !== this.fetchId) {
+          return;
+        }
+        this.results = [];
+        this.close();
+        this.status.textContent = "Could not load suggestions";
+      }
+    }
+
+    render() {
+      this.listbox.textContent = "";
+      this.activeIndex = -1;
+      if (!this.results.length) {
+        this.close();
+        this.status.textContent = "No matches";
+        return;
+      }
+
+      this.results.forEach((row, index) => {
+        var option = document.createElement("div");
+        option.className = "datasette-autocomplete-option";
+        option.id = this.input.id + "-option-" + index;
+        option.setAttribute("role", "option");
+        option.setAttribute("aria-selected", "false");
+        option.dataset.index = String(index);
+        option.dataset.value = autocompleteValueFromRow(row);
+        option.textContent = autocompleteLabelFromRow(row);
+        option.addEventListener("mousedown", (ev) => {
+          ev.preventDefault();
+          this.chooseIndex(index);
+        });
+        this.listbox.appendChild(option);
+      });
+
+      this.listbox.hidden = false;
+      this.input.setAttribute("aria-expanded", "true");
+      this.status.textContent =
+        this.results.length + (this.results.length === 1 ? " match" : " matches");
+      this.setActiveIndex(0);
+    }
+
+    setActiveIndex(index) {
+      var options = this.listbox.querySelectorAll("[role='option']");
+      if (!options.length) {
+        this.activeIndex = -1;
+        this.input.removeAttribute("aria-activedescendant");
+        return;
+      }
+      if (index < 0) {
+        index = options.length - 1;
+      }
+      if (index >= options.length) {
+        index = 0;
+      }
+      options.forEach((option, optionIndex) => {
+        option.setAttribute(
+          "aria-selected",
+          optionIndex === index ? "true" : "false",
+        );
+      });
+      this.activeIndex = index;
+      this.input.setAttribute("aria-activedescendant", options[index].id);
+    }
+
+    chooseIndex(index) {
+      var row = this.results[index];
+      if (!row) {
+        return;
+      }
+      var value = autocompleteValueFromRow(row);
+      var label = autocompleteLabelFromRow(row);
+      this.input.value = value;
+      this.input.dispatchEvent(new Event("change", { bubbles: true }));
+      this.close();
+      this.status.textContent = "Selected " + label;
+      this.dispatchEvent(
+        new CustomEvent("datasette-autocomplete-select", {
+          bubbles: true,
+          detail: {
+            row: row,
+            value: value,
+            label: label,
+          },
+        }),
+      );
+    }
+
+    close() {
+      if (this.listbox) {
+        this.listbox.hidden = true;
+        this.listbox.textContent = "";
+      }
+      if (this.input) {
+        this.input.setAttribute("aria-expanded", "false");
+        this.input.removeAttribute("aria-activedescendant");
+      }
+      this.activeIndex = -1;
+    }
+  }
+
+  customElements.define("datasette-autocomplete", DatasetteAutocomplete);
+})();
diff --git a/datasette/templates/debug_autocomplete.html b/datasette/templates/debug_autocomplete.html
new file mode 100644
index 00000000..84dbc14f
--- /dev/null
+++ b/datasette/templates/debug_autocomplete.html
@@ -0,0 +1,78 @@
+{% extends "base.html" %}
+
+{% block title %}Debug autocomplete{% endblock %}
+
+{% block extra_head %}
+{{ super() }}
+<script src="{{ urls.static('autocomplete.js') }}" defer></script>
+{% endblock %}
+
+{% block content %}
+<h1>Debug autocomplete</h1>
+
+<form class="core debug-autocomplete-form" action="{{ urls.path('-/debug/autocomplete') }}" method="get">
+    <p>
+        <label for="debug-autocomplete-database">Database</label>
+        <input id="debug-autocomplete-database" type="text" name="database" value="{{ database_name or "" }}">
+    </p>
+    <p>
+        <label for="debug-autocomplete-table">Table</label>
+        <input id="debug-autocomplete-table" type="text" name="table" value="{{ table_name or "" }}">
+    </p>
+    <p><input type="submit" value="Open autocomplete"></p>
+</form>
+
+{% if error %}
+    <p class="message-error">{{ error }}</p>
+{% elif autocomplete_url %}
+    <h2>{{ database_name }} / {{ table_name }}</h2>
+    {% if label_column %}
+        <p>Label column: <code>{{ label_column }}</code></p>
+    {% else %}
+        <p>No label column detected. Results will use primary key values.</p>
+    {% endif %}
+    <div class="debug-autocomplete-demo">
+        <label for="debug-autocomplete-input">Search rows</label>
+        <datasette-autocomplete src="{{ autocomplete_url }}">
+            <input id="debug-autocomplete-input" type="text">
+        </datasette-autocomplete>
+    </div>
+    <h3>Selected row</h3>
+    <pre class="debug-autocomplete-selected" aria-live="polite">No row selected.</pre>
+    <script>
+    document.addEventListener("datasette-autocomplete-select", function (event) {
+        var output = document.querySelector(".debug-autocomplete-selected");
+        if (output) {
+            output.textContent = JSON.stringify(event.detail.row, null, 2);
+        }
+    });
+    </script>
+{% else %}
+    <h2>Suggested tables</h2>
+    {% if suggestions %}
+        <p>Showing up to five tables with a detected label column.</p>
+        <table class="rows-and-columns">
+            <thead>
+                <tr>
+                    <th>Database</th>
+                    <th>Table</th>
+                    <th>Label column</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for suggestion in suggestions %}
+                    <tr>
+                        <td>{{ suggestion.database }}</td>
+                        <td><a href="{{ suggestion.url }}">{{ suggestion.table }}</a></td>
+                        <td><code>{{ suggestion.label_column }}</code></td>
+                    </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    {% else %}
+        <p>No tables with detected label columns found.</p>
+    {% endif %}
+    <p>Scanned {{ scanned }} table{% if scanned != 1 %}s{% endif %}{% if reached_scan_limit %}; stopped at the 100 table scan limit{% endif %}.</p>
+{% endif %}
+
+{% endblock %}
diff --git a/datasette/views/special.py b/datasette/views/special.py
index aa063ad6..3245bc13 100644
--- a/datasette/views/special.py
+++ b/datasette/views/special.py
@@ -91,6 +91,110 @@ class PatternPortfolioView(View):
         )
 
 
+class AutocompleteDebugView(BaseView):
+    name = "autocomplete_debug"
+    has_json_alternate = False
+
+    async def _suggested_tables(self, request):
+        scanned = 0
+        reached_scan_limit = False
+        suggestions = []
+        for database_name, db in self.ds.databases.items():
+            if scanned >= 100 or len(suggestions) >= 5:
+                break
+            remaining = 100 - scanned
+            results = await db.execute(
+                "select name from sqlite_master where type = 'table' order by name limit ?",
+                [remaining],
+            )
+            for row in results.rows:
+                table_name = row["name"]
+                scanned += 1
+                if scanned >= 100:
+                    reached_scan_limit = True
+                visible, _ = await self.ds.check_visibility(
+                    request.actor,
+                    action="view-table",
+                    resource=TableResource(database=database_name, table=table_name),
+                )
+                if not visible:
+                    if scanned >= 100:
+                        break
+                    continue
+                label_column = await db.label_column_for_table(table_name)
+                if label_column:
+                    suggestions.append(
+                        {
+                            "database": database_name,
+                            "table": table_name,
+                            "label_column": label_column,
+                            "url": self.ds.urls.path(
+                                "-/debug/autocomplete?"
+                                + urllib.parse.urlencode(
+                                    {
+                                        "database": database_name,
+                                        "table": table_name,
+                                    }
+                                )
+                            ),
+                        }
+                    )
+                    if len(suggestions) >= 5:
+                        break
+                if scanned >= 100:
+                    break
+        return suggestions, scanned, reached_scan_limit
+
+    async def get(self, request):
+        await self.ds.ensure_permission(action="view-instance", actor=request.actor)
+        database_name = request.args.get("database")
+        table_name = request.args.get("table")
+        context = {
+            "database_name": database_name,
+            "table_name": table_name,
+        }
+
+        if database_name or table_name:
+            if not database_name or not table_name:
+                context["error"] = "Both database and table are required."
+            elif database_name not in self.ds.databases:
+                context["error"] = "Database not found."
+            else:
+                db = self.ds.databases[database_name]
+                if not await db.table_exists(table_name):
+                    context["error"] = "Table not found."
+                else:
+                    await self.ds.ensure_permission(
+                        action="view-table",
+                        resource=TableResource(
+                            database=database_name,
+                            table=table_name,
+                        ),
+                        actor=request.actor,
+                    )
+                    context.update(
+                        {
+                            "autocomplete_url": "{}/-/autocomplete".format(
+                                self.ds.urls.table(database_name, table_name)
+                            ),
+                            "label_column": await db.label_column_for_table(table_name),
+                        }
+                    )
+        else:
+            suggestions, scanned, reached_scan_limit = await self._suggested_tables(
+                request
+            )
+            context.update(
+                {
+                    "suggestions": suggestions,
+                    "scanned": scanned,
+                    "reached_scan_limit": reached_scan_limit,
+                }
+            )
+
+        return await self.render(["debug_autocomplete.html"], request, context)
+
+
 class AuthTokenView(BaseView):
     name = "auth_token"
     has_json_alternate = False
diff --git a/tests/test_debug_autocomplete.py b/tests/test_debug_autocomplete.py
new file mode 100644
index 00000000..f438ace5
--- /dev/null
+++ b/tests/test_debug_autocomplete.py
@@ -0,0 +1,91 @@
+import pytest
+from bs4 import BeautifulSoup as Soup
+
+from datasette.app import Datasette
+from datasette.database import Database
+
+
+@pytest.mark.asyncio
+async def test_debug_autocomplete_for_table():
+    ds = Datasette(memory=True)
+    db = ds.add_database(
+        Database(ds, memory_name="test_debug_autocomplete_for_table"), name="data"
+    )
+    await db.execute_write_script("""
+        create table authors (
+            id integer primary key,
+            name text
+        );
+        insert into authors (id, name) values
+            (1, 'Ada Lovelace'),
+            (2, 'Grace Hopper');
+    """)
+
+    response = await ds.client.get("/-/debug/autocomplete?database=data&table=authors")
+
+    assert response.status_code == 200
+    soup = Soup(response.text, "html.parser")
+    assert soup.select_one("h1").text == "Debug autocomplete"
+    assert any(
+        "autocomplete.js" in (script.get("src") or "")
+        for script in soup.find_all("script")
+    )
+    autocomplete = soup.select_one("datasette-autocomplete")
+    assert autocomplete is not None
+    assert autocomplete["src"] == "/data/authors/-/autocomplete"
+    assert soup.select_one("input#debug-autocomplete-input") is not None
+    assert "Label column:" in response.text
+    assert "<code>name</code>" in response.text
+
+
+@pytest.mark.asyncio
+async def test_debug_autocomplete_suggests_label_column_tables():
+    ds = Datasette(memory=True)
+    db = ds.add_database(
+        Database(ds, memory_name="test_debug_autocomplete_suggests"), name="data"
+    )
+    await db.execute_write_script("""
+        create table authors (
+            id integer primary key,
+            name text
+        );
+        create table releases (
+            id integer primary key,
+            title text
+        );
+    """)
+
+    response = await ds.client.get("/-/debug/autocomplete")
+
+    assert response.status_code == 200
+    soup = Soup(response.text, "html.parser")
+    links = {a.text: a["href"] for a in soup.select("table.rows-and-columns a")}
+    assert links == {
+        "authors": "/-/debug/autocomplete?database=data&table=authors",
+        "releases": "/-/debug/autocomplete?database=data&table=releases",
+    }
+    assert [code.text for code in soup.select("table.rows-and-columns code")] == [
+        "name",
+        "title",
+    ]
+
+
+@pytest.mark.asyncio
+async def test_debug_autocomplete_scan_limit():
+    ds = Datasette(memory=True)
+    db = ds.add_database(
+        Database(ds, memory_name="test_debug_autocomplete_scan_limit"), name="data"
+    )
+    await db.execute_write_script(
+        "\n".join(
+            f"create table t{i:03d} (id integer primary key);" for i in range(100)
+        )
+        + "\ncreate table z_has_label (id integer primary key, name text);"
+    )
+
+    response = await ds.client.get("/-/debug/autocomplete")
+
+    assert response.status_code == 200
+    assert "No tables with detected label columns found." in response.text
+    assert "Scanned 100 tables; stopped at the 100 table scan limit." in response.text
+    assert "z_has_label" not in response.text
diff --git a/tests/test_jump.py b/tests/test_jump.py
index 513a809f..0fb6a552 100644
--- a/tests/test_jump.py
+++ b/tests/test_jump.py
@@ -191,6 +191,7 @@ async def test_debug_menu_items_are_in_jump_for_debug_menu_permission():
         "Debug permissions": "/-/permissions",
         "Debug messages": "/-/messages",
         "Debug allow rules": "/-/allow-debug",
+        "Debug autocomplete": "/-/debug/autocomplete",
         "Debug threads": "/-/threads",
         "Debug actor": "/-/actor",
         "Pattern portfolio": "/-/patterns",

From 574290fb231e45602c3efca3d35586a02f78ad37 Mon Sep 17 00:00:00 2001
From: Simon Willison <swillison@gmail.com>
Date: Sun, 14 Jun 2026 07:30:34 -0700
Subject: [PATCH 14/23] Add foreign key autocomplete to row forms

Expose single-primary-key foreign key autocomplete URLs in table page metadata and load the autocomplete component when needed.

Enhance insert and edit dialogs to wrap foreign-key inputs with the autocomplete web component, show linked selected-row labels, reserve metadata space, and keep the dropdown as a fixed overlay above modal chrome.

Add an explicit _initial=1 autocomplete mode for empty-field starter suggestions while keeping blank q responses empty by default, with tests for the endpoint and table metadata.
---
 datasette/app.py                 |   5 +
 datasette/static/app.css         |  26 +++-
 datasette/static/autocomplete.js |  57 +++++++-
 datasette/static/table.js        | 219 ++++++++++++++++++++++++++++++-
 datasette/templates/table.html   |   9 +-
 datasette/views/table.py         |  76 ++++++++++-
 tests/test_autocomplete.py       |  47 +++++++
 tests/test_table_html.py         |  55 ++++++++
 8 files changed, 474 insertions(+), 20 deletions(-)

diff --git a/datasette/app.py b/datasette/app.py
index 75cab1e7..9b3cf51c 100644
--- a/datasette/app.py
+++ b/datasette/app.py
@@ -2019,6 +2019,11 @@ class Datasette:
 
         other_table = fk["other_table"]
         other_column = fk["other_column"]
+        if other_column is None:
+            other_pks = await db.primary_keys(other_table)
+            if len(other_pks) != 1:
+                return {}
+            other_column = other_pks[0]
         visible, _ = await self.check_visibility(
             actor,
             action="view-table",
diff --git a/datasette/static/app.css b/datasette/static/app.css
index 450324aa..d0356b81 100644
--- a/datasette/static/app.css
+++ b/datasette/static/app.css
@@ -1594,6 +1594,20 @@ textarea.row-edit-input {
     font-size: 0.78rem;
 }
 
+.row-edit-field-meta-autocomplete {
+    line-height: 1.2;
+    min-height: 1.2em;
+}
+
+.row-edit-fk-pk {
+    color: var(--ink);
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+
+.row-edit-fk-link {
+    overflow-wrap: anywhere;
+}
+
 .row-edit-empty {
     color: var(--muted);
     font-size: 0.9rem;
@@ -1622,10 +1636,10 @@ datasette-autocomplete input[type="text"],
     left: 0;
     max-height: 16rem;
     overflow-y: auto;
-    position: absolute;
-    right: 0;
-    top: calc(100% + 3px);
-    z-index: 20;
+    position: fixed;
+    right: auto;
+    top: auto;
+    z-index: 10000;
 }
 
 .datasette-autocomplete-list[hidden] {
@@ -1643,8 +1657,8 @@ datasette-autocomplete input[type="text"],
 }
 
 .datasette-autocomplete-option[aria-selected="true"] {
-    background: #eef4ff;
-    box-shadow: inset 3px 0 0 #1a56db;
+    background: var(--paper);
+    font-weight: 600;
 }
 
 .datasette-autocomplete-status {
diff --git a/datasette/static/autocomplete.js b/datasette/static/autocomplete.js
index 8a5bdc3d..c615000e 100644
--- a/datasette/static/autocomplete.js
+++ b/datasette/static/autocomplete.js
@@ -41,6 +41,7 @@
       this.boundKeydown = this.handleKeydown.bind(this);
       this.boundBlur = this.handleBlur.bind(this);
       this.boundFocus = this.handleFocus.bind(this);
+      this.boundPositionListbox = this.positionListbox.bind(this);
     }
 
     connectedCallback() {
@@ -109,7 +110,7 @@
     }
 
     handleFocus() {
-      if (this.input.value.trim()) {
+      if (this.input.value.trim() || this.hasAttribute("suggest-on-focus")) {
         this.scheduleSearch();
       }
     }
@@ -155,7 +156,8 @@
 
     async search() {
       var query = this.input.value.trim();
-      if (!query) {
+      var initial = !query && this.hasAttribute("suggest-on-focus");
+      if (!query && !initial) {
         this.close();
         this.status.textContent = "";
         return;
@@ -167,6 +169,11 @@
 
       var url = new URL(src, location.href);
       url.searchParams.set("q", query);
+      if (initial) {
+        url.searchParams.set("_initial", "1");
+      } else {
+        url.searchParams.delete("_initial");
+      }
       var fetchId = this.fetchId + 1;
       this.fetchId = fetchId;
       this.status.textContent = "Searching...";
@@ -225,9 +232,49 @@
       this.input.setAttribute("aria-expanded", "true");
       this.status.textContent =
         this.results.length + (this.results.length === 1 ? " match" : " matches");
+      this.positionListbox();
       this.setActiveIndex(0);
     }
 
+    positionListbox() {
+      if (!this.input || !this.listbox || this.listbox.hidden) {
+        return;
+      }
+
+      var gap = 3;
+      var margin = 8;
+      var inputRect = this.input.getBoundingClientRect();
+      this.listbox.style.maxHeight = "";
+      var defaultMaxHeight = parseFloat(
+        window.getComputedStyle(this.listbox).maxHeight,
+      );
+      if (!Number.isFinite(defaultMaxHeight)) {
+        defaultMaxHeight = 256;
+      }
+      var scrollHeight = Math.ceil(this.listbox.scrollHeight);
+      var desiredHeight = Math.min(scrollHeight, defaultMaxHeight);
+      var availableBelow = Math.max(
+        0,
+        (window.innerHeight || document.documentElement.clientHeight) -
+          inputRect.bottom -
+          gap -
+          margin,
+      );
+
+      this.listbox.style.left = inputRect.left + "px";
+      this.listbox.style.top = inputRect.bottom + gap + "px";
+      this.listbox.style.width = inputRect.width + "px";
+      if (scrollHeight <= defaultMaxHeight && scrollHeight <= availableBelow) {
+        this.listbox.style.maxHeight = "none";
+      } else {
+        this.listbox.style.maxHeight =
+          Math.min(defaultMaxHeight, desiredHeight, availableBelow || defaultMaxHeight) +
+          "px";
+      }
+      window.addEventListener("resize", this.boundPositionListbox);
+      document.addEventListener("scroll", this.boundPositionListbox, true);
+    }
+
     setActiveIndex(index) {
       var options = this.listbox.querySelectorAll("[role='option']");
       if (!options.length) {
@@ -278,11 +325,17 @@
       if (this.listbox) {
         this.listbox.hidden = true;
         this.listbox.textContent = "";
+        this.listbox.style.left = "";
+        this.listbox.style.maxHeight = "";
+        this.listbox.style.top = "";
+        this.listbox.style.width = "";
       }
       if (this.input) {
         this.input.setAttribute("aria-expanded", "false");
         this.input.removeAttribute("aria-activedescendant");
       }
+      window.removeEventListener("resize", this.boundPositionListbox);
+      document.removeEventListener("scroll", this.boundPositionListbox, true);
       this.activeIndex = -1;
     }
   }
diff --git a/datasette/static/table.js b/datasette/static/table.js
index f762ca40..43dd81d7 100644
--- a/datasette/static/table.js
+++ b/datasette/static/table.js
@@ -496,6 +496,158 @@ function tableInsertData() {
   return window._datasetteTableData && window._datasetteTableData.insertRow;
 }
 
+function tableForeignKeys() {
+  return (window._datasetteTableData && window._datasetteTableData.foreignKeys) || {};
+}
+
+function foreignKeyAutocompleteUrl(column) {
+  return tableForeignKeys()[column] || null;
+}
+
+function autocompleteRowPk(row) {
+  var pks = (row && row.pks) || {};
+  var keys = Object.keys(pks);
+  if (keys.length !== 1) {
+    return null;
+  }
+  return pks[keys[0]];
+}
+
+function foreignKeyRowUrl(autocompleteUrl, pk) {
+  var url = new URL(autocompleteUrl, location.href);
+  if (!/\/-\/autocomplete\/?$/.test(url.pathname)) {
+    return null;
+  }
+  url.pathname =
+    url.pathname.replace(/\/-\/autocomplete\/?$/, "") + "/" + tildeEncode(pk);
+  url.search = "";
+  url.hash = "";
+  return url.toString();
+}
+
+function foreignKeyLabelText(row) {
+  var pk = autocompleteRowPk(row);
+  var label = row && row.label;
+  if (
+    label !== null &&
+    typeof label !== "undefined" &&
+    String(label) !== String(pk)
+  ) {
+    return String(label);
+  }
+  return "View row";
+}
+
+function rowEditMetaTextWithoutCurrentValue(meta) {
+  return (meta.dataset.baseMeta || "")
+    .split(" · ")
+    .filter(function (part) {
+      return part !== "Current value: NULL";
+    })
+    .join(" · ");
+}
+
+function updateRowEditForeignKeySeparator(meta) {
+  var separator = meta.querySelector(".row-edit-fk-separator");
+  if (!separator) {
+    return;
+  }
+  var baseMeta = meta.querySelector(".row-edit-base-meta");
+  var hasBaseMeta = !!(baseMeta && baseMeta.textContent);
+  separator.textContent = hasBaseMeta ? " · " : "";
+  separator.hidden = !hasBaseMeta;
+}
+
+function updateRowEditFieldMetaHidden(meta) {
+  var baseMeta = meta.querySelector(".row-edit-base-meta");
+  var hasBaseMeta = !!(baseMeta && baseMeta.textContent);
+  var foreignKeyLinkWrap = meta.querySelector(".row-edit-fk-link-wrap");
+  var hasForeignKeyLink = foreignKeyLinkWrap && !foreignKeyLinkWrap.hidden;
+  meta.hidden =
+    meta.dataset.reserveSpace !== "1" && !hasBaseMeta && !hasForeignKeyLink;
+}
+
+function setRowEditBaseMetaText(meta, text) {
+  var baseMeta = meta.querySelector(".row-edit-base-meta");
+  if (!baseMeta) {
+    return;
+  }
+  baseMeta.textContent = text || "";
+  updateRowEditForeignKeySeparator(meta);
+  updateRowEditFieldMetaHidden(meta);
+}
+
+function setForeignKeyMetaLink(meta, autocompleteUrl, row) {
+  var wrap = meta.querySelector(".row-edit-fk-link-wrap");
+  if (!wrap) {
+    return;
+  }
+  var pkSpan = wrap.querySelector(".row-edit-fk-pk");
+  var link = wrap.querySelector("a");
+  var pk = autocompleteRowPk(row);
+  var url =
+    pk === null || typeof pk === "undefined"
+      ? null
+      : foreignKeyRowUrl(autocompleteUrl, pk);
+  if (!url) {
+    wrap.hidden = true;
+    pkSpan.textContent = "";
+    link.removeAttribute("href");
+    link.textContent = "";
+    link.removeAttribute("aria-label");
+    setRowEditBaseMetaText(meta, meta.dataset.baseMeta || "");
+    updateRowEditFieldMetaHidden(meta);
+    return;
+  }
+  setRowEditBaseMetaText(meta, rowEditMetaTextWithoutCurrentValue(meta));
+  var pkText = String(pk);
+  var linkText = foreignKeyLabelText(row);
+  pkSpan.textContent = pkText;
+  link.href = url;
+  link.textContent = linkText;
+  link.setAttribute(
+    "aria-label",
+    "Open referenced row " + pkText + " " + linkText + " in a new tab",
+  );
+  wrap.hidden = false;
+  updateRowEditFieldMetaHidden(meta);
+}
+
+async function resolveForeignKeyMetaLink(control, autocompleteUrl, meta) {
+  var value = control.value.trim();
+  if (!value) {
+    setForeignKeyMetaLink(meta, autocompleteUrl, null);
+    return;
+  }
+
+  var url = new URL(autocompleteUrl, location.href);
+  url.searchParams.set("q", value);
+  try {
+    var response = await fetch(url.toString(), {
+      headers: {
+        Accept: "application/json",
+      },
+    });
+    if (!response.ok) {
+      throw new Error("HTTP " + response.status);
+    }
+    var data = await response.json();
+    if (control.value.trim() !== value) {
+      return;
+    }
+    var rows = (data && data.rows) || [];
+    var row = rows.find(function (candidate) {
+      var pk = autocompleteRowPk(candidate);
+      return pk !== null && typeof pk !== "undefined" && String(pk) === value;
+    });
+    setForeignKeyMetaLink(meta, autocompleteUrl, row || null);
+  } catch (_error) {
+    if (control.value.trim() === value) {
+      setForeignKeyMetaLink(meta, autocompleteUrl, null);
+    }
+  }
+}
+
 function tableInsertUrl() {
   var data = tableInsertData();
   if (data && data.path) {
@@ -819,6 +971,17 @@ function rowEditValueType(value) {
   return "string";
 }
 
+function rowEditControlElement(control, autocompleteUrl) {
+  if (!autocompleteUrl || control.nodeName !== "INPUT") {
+    return control;
+  }
+  var autocomplete = document.createElement("datasette-autocomplete");
+  autocomplete.setAttribute("src", autocompleteUrl);
+  autocomplete.setAttribute("suggest-on-focus", "");
+  autocomplete.appendChild(control);
+  return autocomplete;
+}
+
 function createRowEditField(column, value, isPk, columnType, index, options) {
   options = options || {};
   var field = document.createElement("div");
@@ -871,6 +1034,10 @@ function createRowEditField(column, value, isPk, columnType, index, options) {
   var meta = document.createElement("span");
   meta.id = metaId;
   meta.className = "row-edit-field-meta";
+  if (options.autocompleteUrl) {
+    meta.classList.add("row-edit-field-meta-autocomplete");
+    meta.dataset.reserveSpace = "1";
+  }
   var metaParts = [];
   if (isPk) {
     metaParts.push("Primary key");
@@ -888,7 +1055,49 @@ function createRowEditField(column, value, isPk, columnType, index, options) {
   if (columnType && columnType.type) {
     metaParts.push("Custom type: " + columnType.type);
   }
-  meta.textContent = metaParts.join(" · ");
+  meta.dataset.baseMeta = metaParts.join(" · ");
+  var baseMeta = document.createElement("span");
+  baseMeta.className = "row-edit-base-meta";
+  baseMeta.textContent = meta.dataset.baseMeta;
+  meta.appendChild(baseMeta);
+  if (options.autocompleteUrl) {
+    var foreignKeyLinkWrap = document.createElement("span");
+    foreignKeyLinkWrap.className = "row-edit-fk-link-wrap";
+    foreignKeyLinkWrap.hidden = true;
+    var foreignKeySeparator = document.createElement("span");
+    foreignKeySeparator.className = "row-edit-fk-separator";
+    foreignKeySeparator.textContent = meta.dataset.baseMeta ? " · " : "";
+    foreignKeySeparator.hidden = !meta.dataset.baseMeta;
+    foreignKeyLinkWrap.appendChild(foreignKeySeparator);
+    var foreignKeyPk = document.createElement("span");
+    foreignKeyPk.className = "row-edit-fk-pk";
+    foreignKeyLinkWrap.appendChild(foreignKeyPk);
+    foreignKeyLinkWrap.appendChild(document.createTextNode(" "));
+    var foreignKeyLink = document.createElement("a");
+    foreignKeyLink.className = "row-edit-fk-link";
+    foreignKeyLink.target = "_blank";
+    foreignKeyLink.rel = "noopener noreferrer";
+    foreignKeyLinkWrap.appendChild(foreignKeyLink);
+    meta.appendChild(foreignKeyLinkWrap);
+    updateRowEditFieldMetaHidden(meta);
+  }
+  var controlElement = rowEditControlElement(control, options.autocompleteUrl);
+  if (options.autocompleteUrl) {
+    control.addEventListener("input", function () {
+      setForeignKeyMetaLink(meta, options.autocompleteUrl, null);
+    });
+    control.addEventListener("change", function () {
+      resolveForeignKeyMetaLink(control, options.autocompleteUrl, meta);
+    });
+    controlElement.addEventListener("datasette-autocomplete-select", function (ev) {
+      setForeignKeyMetaLink(
+        meta,
+        options.autocompleteUrl,
+        ev.detail && ev.detail.row,
+      );
+    });
+    resolveForeignKeyMetaLink(control, options.autocompleteUrl, meta);
+  }
 
   if (useDefaultInitially) {
     var defaultBlock = document.createElement("div");
@@ -939,14 +1148,14 @@ function createRowEditField(column, value, isPk, columnType, index, options) {
 
     defaultBlock.appendChild(defaultText);
     defaultBlock.appendChild(setValueButton);
-    customWrap.appendChild(control);
+    customWrap.appendChild(controlElement);
     customWrap.appendChild(useDefaultButton);
     controlWrap.appendChild(defaultBlock);
     controlWrap.appendChild(customWrap);
   } else {
-    controlWrap.appendChild(control);
+    controlWrap.appendChild(controlElement);
   }
-  if (meta.textContent) {
+  if (meta.textContent || options.autocompleteUrl) {
     controlWrap.appendChild(meta);
   }
   field.appendChild(label);
@@ -1307,6 +1516,7 @@ function renderRowEditFields(state, data) {
         columnTypes[column],
         index,
         {
+          autocompleteUrl: foreignKeyAutocompleteUrl(column),
           primaryKeyReadonly: true,
         },
       ),
@@ -1333,6 +1543,7 @@ function renderRowInsertFields(state, data) {
         column.column_type,
         index,
         {
+          autocompleteUrl: foreignKeyAutocompleteUrl(column.name),
           defaultValue: column.default,
           hasDefault: column.has_default,
           notnull: column.notnull,
diff --git a/datasette/templates/table.html b/datasette/templates/table.html
index 5a4e7a68..81b51b28 100644
--- a/datasette/templates/table.html
+++ b/datasette/templates/table.html
@@ -4,12 +4,11 @@
 
 {% block extra_head %}
 {{- super() -}}
-{% if table_insert_ui %}
-<script>window._datasetteTableData = {{ {"tableUrl": urls.table(database, table), "insertRow": table_insert_ui}|tojson }};</script>
-{% else %}
-<script>window._datasetteTableData = {{ {"tableUrl": urls.table(database, table)}|tojson }};</script>
-{% endif %}
+<script>window._datasetteTableData = {{ table_page_data|tojson }};</script>
 <script src="{{ urls.static('column-chooser.js') }}" defer></script>
+{% if table_page_data.foreignKeys %}
+<script src="{{ urls.static('autocomplete.js') }}" defer></script>
+{% endif %}
 <script src="{{ urls.static('table.js') }}?hash={{ table_js_hash }}" defer></script>
 <script src="{{ urls.static('mobile-column-actions.js') }}" defer></script>
 <script>DATASETTE_ALLOW_FACET = {{ datasette_allow_facet }};</script>
diff --git a/datasette/views/table.py b/datasette/views/table.py
index e3e448f6..190529f4 100644
--- a/datasette/views/table.py
+++ b/datasette/views/table.py
@@ -250,6 +250,47 @@ def _column_value_type_for_insert_form(column_detail, column_type):
     return "string"
 
 
+async def _foreign_key_autocomplete_urls(
+    datasette, request, db, database_name, table_name
+):
+    autocomplete_urls = {}
+    for fk in await db.foreign_keys_for_table(table_name):
+        if not await db.table_exists(fk["other_table"]):
+            continue
+        other_pks = await db.primary_keys(fk["other_table"])
+        other_column = fk["other_column"]
+        if other_column is None and len(other_pks) == 1:
+            other_column = other_pks[0]
+        if len(other_pks) != 1 or other_column != other_pks[0]:
+            continue
+        visible, _ = await datasette.check_visibility(
+            request.actor,
+            action="view-table",
+            resource=TableResource(database=database_name, table=fk["other_table"]),
+        )
+        if not visible:
+            continue
+        autocomplete_urls[fk["column"]] = "{}/-/autocomplete".format(
+            datasette.urls.table(database_name, fk["other_table"])
+        )
+    return autocomplete_urls
+
+
+async def _table_page_data(
+    datasette, request, db, database_name, table_name, is_view, table_insert_ui
+):
+    data = {"tableUrl": datasette.urls.table(database_name, table_name)}
+    if table_insert_ui:
+        data["insertRow"] = table_insert_ui
+    if not is_view:
+        foreign_keys = await _foreign_key_autocomplete_urls(
+            datasette, request, db, database_name, table_name
+        )
+        if foreign_keys:
+            data["foreignKeys"] = foreign_keys
+    return data
+
+
 async def _table_insert_ui(
     datasette, request, db, database_name, table_name, is_view, pks
 ):
@@ -1164,6 +1205,12 @@ def _autocomplete_pk_order_by(pks):
     return ", ".join(escape_sqlite(pk) for pk in pks)
 
 
+def _autocomplete_initial_order_by(pks):
+    order_by = [f"{escape_sqlite(pks[0])} desc"]
+    order_by.extend(escape_sqlite(pk) for pk in pks[1:])
+    return ", ".join(order_by)
+
+
 def _autocomplete_response_rows(rows, pks, label_column):
     response_rows = []
     for row in rows:
@@ -1202,7 +1249,14 @@ class TableAutocompleteView(BaseView):
         )
         select_sql = ", ".join(escape_sqlite(column) for column in select_columns)
         q = request.args.get("q") or ""
-        if not q:
+        initial_arg = request.args.get("_initial")
+        initial = (
+            not q
+            and initial_arg is not None
+            and initial_arg != ""
+            and value_as_boolean(initial_arg)
+        )
+        if not q and not initial:
             return Response.json({"rows": []})
         params = {
             "q": q,
@@ -1215,6 +1269,12 @@ class TableAutocompleteView(BaseView):
             like_columns.append(label_column)
         where_sql = " or ".join(_autocomplete_like(column) for column in like_columns)
         exact_pk = len(pks) == 1
+        order_by = _autocomplete_order_by(pks, label_column, exact_pk)
+
+        if initial:
+            where_sql = "1 = 1"
+            order_by = _autocomplete_initial_order_by(pks)
+
         sql = """
             select {select_sql}
             from {table}
@@ -1225,7 +1285,7 @@ class TableAutocompleteView(BaseView):
             select_sql=select_sql,
             table=escape_sqlite(table_name),
             where=where_sql,
-            order_by=_autocomplete_order_by(pks, label_column, exact_pk),
+            order_by=order_by,
         )
 
         try:
@@ -1990,9 +2050,19 @@ async def table_view_data(
                 sort = "rowid"
         data["sort"] = sort
         data["sort_desc"] = sort_desc
-        data["table_insert_ui"] = await _table_insert_ui(
+        table_insert_ui = await _table_insert_ui(
             datasette, request, db, database_name, table_name, is_view, pks
         )
+        data["table_insert_ui"] = table_insert_ui
+        data["table_page_data"] = await _table_page_data(
+            datasette,
+            request,
+            db,
+            database_name,
+            table_name,
+            is_view,
+            table_insert_ui,
+        )
 
     return data, rows[:page_size], columns, expanded_columns, sql, next_url
 
diff --git a/tests/test_autocomplete.py b/tests/test_autocomplete.py
index 55e7458f..d7d78848 100644
--- a/tests/test_autocomplete.py
+++ b/tests/test_autocomplete.py
@@ -53,6 +53,53 @@ async def test_autocomplete_blank_q_returns_no_results():
     assert response.status_code == 200
     assert response.json() == {"rows": []}
 
+    response = await ds.client.get("/autocomplete_blank/people/-/autocomplete")
+
+    assert response.status_code == 200
+    assert response.json() == {"rows": []}
+
+
+@pytest.mark.asyncio
+async def test_autocomplete_initial_returns_latest_rows():
+    ds = Datasette(memory=True)
+    db = ds.add_memory_database("autocomplete_initial")
+    await db.execute_write_script("""
+        create table people (
+            id integer primary key,
+            name text
+        );
+        insert into people (id, name) values
+            (1, 'Alice'),
+            (2, 'Bob'),
+            (3, 'Cleo');
+        """)
+
+    response = await ds.client.get(
+        "/autocomplete_initial/people/-/autocomplete?_initial=1"
+    )
+
+    assert response.status_code == 200
+    assert response.json() == {
+        "rows": [
+            {"pks": {"id": 3}, "label": "Cleo"},
+            {"pks": {"id": 2}, "label": "Bob"},
+            {"pks": {"id": 1}, "label": "Alice"},
+        ]
+    }
+
+    response = await ds.client.get(
+        "/autocomplete_initial/people/-/autocomplete?q=&_initial=1"
+    )
+
+    assert response.status_code == 200
+    assert response.json() == {
+        "rows": [
+            {"pks": {"id": 3}, "label": "Cleo"},
+            {"pks": {"id": 2}, "label": "Bob"},
+            {"pks": {"id": 1}, "label": "Alice"},
+        ]
+    }
+
 
 @pytest.mark.asyncio
 async def test_autocomplete_escapes_like_characters():
diff --git a/tests/test_table_html.py b/tests/test_table_html.py
index c0af996f..b7d57918 100644
--- a/tests/test_table_html.py
+++ b/tests/test_table_html.py
@@ -1050,6 +1050,61 @@ async def test_table_insert_action_includes_compound_primary_keys():
         ds.close()
 
 
+@pytest.mark.asyncio
+async def test_table_data_includes_foreign_key_autocomplete_urls():
+    ds = Datasette([])
+    try:
+        db = ds.add_database(
+            Database(ds, memory_name="test_table_foreign_key_autocomplete"), name="data"
+        )
+        await db.execute_write_script("""
+            create table authors (
+                id integer primary key,
+                name text
+            );
+            create table tags (
+                slug text unique,
+                name text
+            );
+            create table articles (
+                id integer primary key,
+                author_id integer references authors(id),
+                implicit_author_id integer references authors,
+                tag_slug text references tags(slug),
+                title text
+            );
+            insert into authors (id, name) values (1, 'Ada Lovelace');
+            insert into tags (slug, name) values ('science', 'Science');
+            insert into articles (
+                id,
+                author_id,
+                implicit_author_id,
+                tag_slug,
+                title
+            ) values (
+                1,
+                1,
+                1,
+                'science',
+                'Notes'
+            );
+            """)
+        response = await ds.client.get("/data/articles")
+        assert response.status_code == 200
+        soup = Soup(response.text, "html.parser")
+        table_data = table_data_from_soup(soup)
+        assert table_data["foreignKeys"] == {
+            "author_id": "/data/authors/-/autocomplete",
+            "implicit_author_id": "/data/authors/-/autocomplete",
+        }
+        assert any(
+            "autocomplete.js" in (script.get("src") or "")
+            for script in soup.find_all("script")
+        )
+    finally:
+        ds.close()
+
+
 @pytest.mark.asyncio
 async def test_table_fragment_endpoint(ds_client):
     response = await ds_client.get("/fixtures/simple_primary_key/-/fragment?_row=1")

From 35d7e3cab874be2a957923126dcd590782b1d4be Mon Sep 17 00:00:00 2001
From: Simon Willison <swillison@gmail.com>
Date: Sun, 14 Jun 2026 08:03:20 -0700
Subject: [PATCH 15/23] Fixed some tests for the new autocomplete work

---
 datasette/views/table.py   | 15 ++++++++++++---
 docs/introspection.rst     |  9 +++++++++
 tests/test_autocomplete.py |  5 +++--
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/datasette/views/table.py b/datasette/views/table.py
index 190529f4..eb155407 100644
--- a/datasette/views/table.py
+++ b/datasette/views/table.py
@@ -1158,7 +1158,7 @@ def _escape_like(value):
 
 
 # Returns the exclusive upper bound for an indexed prefix search:
-# "abc" -> "abd", so `pk >= "abc" and pk < "abd"` covers "abc%".
+# For example, values beginning with "abc" fall below the next prefix boundary.
 # The LIKE clause is still applied separately for exact escaped-LIKE semantics.
 def _prefix_range_end(value):
     if not value:
@@ -1221,6 +1221,9 @@ def _autocomplete_response_rows(rows, pks, label_column):
     return response_rows
 
 
+AUTOCOMPLETE_TIME_LIMIT_MS = 500
+
+
 class TableAutocompleteView(BaseView):
     name = "table-autocomplete"
 
@@ -1289,7 +1292,9 @@ class TableAutocompleteView(BaseView):
         )
 
         try:
-            results = await db.execute(sql, params, custom_time_limit=500)
+            results = await db.execute(
+                sql, params, custom_time_limit=AUTOCOMPLETE_TIME_LIMIT_MS
+            )
         except QueryInterrupted:
             fallback_where = _autocomplete_prefix_like(pks[0])
             prefix_end = _prefix_range_end(q)
@@ -1312,7 +1317,11 @@ class TableAutocompleteView(BaseView):
                 order_by=_autocomplete_pk_order_by(pks),
             )
             try:
-                results = await db.execute(fallback_sql, params, custom_time_limit=500)
+                results = await db.execute(
+                    fallback_sql,
+                    params,
+                    custom_time_limit=AUTOCOMPLETE_TIME_LIMIT_MS,
+                )
             except QueryInterrupted:
                 return Response.json({"rows": []})
 
diff --git a/docs/introspection.rst b/docs/introspection.rst
index 7702a4b5..4834f441 100644
--- a/docs/introspection.rst
+++ b/docs/introspection.rst
@@ -201,6 +201,15 @@ Search example with ``?q=facet`` returns only items matching ``.*facet.*``:
 
 When multiple search terms are provided (e.g., ``?q=user+profile``), items must match the pattern ``.*user.*profile.*``. Results are ordered by relevance, then by item type and shortest display name.
 
+.. _AutocompleteDebugView:
+
+/-/debug/autocomplete
+---------------------
+
+The debug tool at ``/-/debug/autocomplete`` can be used to try out the autocomplete component against a specific table. Pass ``?database=db&table=table`` to display an autocomplete field backed by that table's ``/-/autocomplete`` endpoint.
+
+Without those query string arguments, the page lists up to five tables with detected label columns, scanning at most 100 tables.
+
 .. _JsonDataView_threads:
 
 /-/threads
diff --git a/tests/test_autocomplete.py b/tests/test_autocomplete.py
index d7d78848..abe19af2 100644
--- a/tests/test_autocomplete.py
+++ b/tests/test_autocomplete.py
@@ -1,6 +1,7 @@
 import pytest
 
 from datasette.app import Datasette
+import datasette.views.table as table_views
 
 
 @pytest.mark.asyncio
@@ -190,7 +191,8 @@ async def test_autocomplete_primary_key_called_label():
 
 
 @pytest.mark.asyncio
-async def test_autocomplete_timeout_uses_prefix_fallback():
+async def test_autocomplete_timeout_uses_prefix_fallback(monkeypatch):
+    monkeypatch.setattr(table_views, "AUTOCOMPLETE_TIME_LIMIT_MS", 1)
     ds = Datasette(
         memory=True,
         config={
@@ -200,7 +202,6 @@ async def test_autocomplete_timeout_uses_prefix_fallback():
         },
         settings={
             "num_sql_threads": 1,
-            "sql_time_limit_ms": 1,
         },
     )
     db = ds.add_memory_database("autocomplete_timeout")

From c405b56223992d93644e93d63ddad15d535beb81 Mon Sep 17 00:00:00 2001
From: Simon Willison <swillison@gmail.com>
Date: Sun, 14 Jun 2026 11:56:51 -0700
Subject: [PATCH 16/23] Tweak modal color scheme to be more Datasette

---
 datasette/static/app.css | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/datasette/static/app.css b/datasette/static/app.css
index d0356b81..633ebd7a 100644
--- a/datasette/static/app.css
+++ b/datasette/static/app.css
@@ -792,9 +792,9 @@ p.zero-results {
 
 dialog.mobile-column-actions-dialog {
     --ink: #0f0f0f;
-    --paper: #f5f3ef;
+    --paper: #eef6ff;
     --muted: #6b6b6b;
-    --rule: #e2dfd8;
+    --rule: #d8e6f5;
     --accent: #1a56db;
     --card: #ffffff;
     border: none;
@@ -1020,9 +1020,9 @@ dialog.mobile-column-actions-dialog::backdrop {
 
 dialog.set-column-type-dialog {
     --ink: #0f0f0f;
-    --paper: #f5f3ef;
+    --paper: #eef6ff;
     --muted: #6b6b6b;
-    --rule: #e2dfd8;
+    --rule: #d8e6f5;
     --accent: #1a56db;
     --card: #ffffff;
     border: none;
@@ -1109,7 +1109,7 @@ dialog.set-column-type-dialog::backdrop {
     padding: 14px 16px;
     border: 1px solid var(--rule);
     border-radius: 8px;
-    background: #fcfbf9;
+    background: #fbfdff;
     cursor: pointer;
 }
 
@@ -1226,9 +1226,9 @@ button.table-insert-row svg {
 
 dialog.row-delete-dialog {
     --ink: #0f0f0f;
-    --paper: #f5f3ef;
+    --paper: #eef6ff;
     --muted: #6b6b6b;
-    --rule: #e2dfd8;
+    --rule: #d8e6f5;
     --accent: #1a56db;
     --card: #ffffff;
     border: none;
@@ -1356,9 +1356,9 @@ dialog.row-delete-dialog::backdrop {
 
 dialog.row-edit-dialog {
     --ink: #0f0f0f;
-    --paper: #f5f3ef;
+    --paper: #eef6ff;
     --muted: #6b6b6b;
-    --rule: #e2dfd8;
+    --rule: #d8e6f5;
     --accent: #1a56db;
     --card: #ffffff;
     border: none;

From b2de8b5d2eb9e3d0b5dd95b4a54f884748bd3b5d Mon Sep 17 00:00:00 2001
From: Simon Willison <swillison@gmail.com>
Date: Sun, 14 Jun 2026 11:57:13 -0700
Subject: [PATCH 17/23] First draft of makeColumnField() plugin hook

---
 datasette/static/column-chooser.js    |   4 +-
 datasette/static/datasette-manager.js |  29 +++
 datasette/static/table.js             | 184 ++++++++++++++--
 datasette/views/table.py              |   6 +-
 docs/javascript_plugins.rst           | 298 ++++++++++++++++++++++++++
 tests/test_table_html.py              |  10 +-
 6 files changed, 510 insertions(+), 21 deletions(-)

diff --git a/datasette/static/column-chooser.js b/datasette/static/column-chooser.js
index 133e7cb0..198641f3 100644
--- a/datasette/static/column-chooser.js
+++ b/datasette/static/column-chooser.js
@@ -31,9 +31,9 @@ class ColumnChooser extends HTMLElement {
       <style>
         :host {
           --ink: #0f0f0f;
-          --paper: #f5f3ef;
+          --paper: #eef6ff;
           --muted: #6b6b6b;
-          --rule: #e2dfd8;
+          --rule: #d8e6f5;
           --accent: #1a56db;
           --accent-light: #e8effd;
           --card: #ffffff;
diff --git a/datasette/static/datasette-manager.js b/datasette/static/datasette-manager.js
index e75f7aae..b049fc73 100644
--- a/datasette/static/datasette-manager.js
+++ b/datasette/static/datasette-manager.js
@@ -82,6 +82,35 @@ const datasetteManager = {
     return columnActions;
   },
 
+  /**
+   * Allows JavaScript plugins to replace or enhance insert/edit modal fields
+   * for specific Datasette column types.
+   *
+   * The first plugin to return a control object wins. Returning null or
+   * undefined means "I do not handle this field".
+   */
+  makeColumnField: (context) => {
+    for (const [pluginName, plugin] of datasetteManager.plugins) {
+      if (!plugin.makeColumnField) {
+        continue;
+      }
+      let control = null;
+      try {
+        control = plugin.makeColumnField(context);
+      } catch (error) {
+        console.error(
+          `Error in makeColumnField() for plugin ${pluginName}`,
+          error,
+        );
+        continue;
+      }
+      if (control) {
+        return Object.assign({ pluginName }, control);
+      }
+    }
+    return null;
+  },
+
   makeJumpSections: (context) => {
     let jumpSections = [];
 
diff --git a/datasette/static/table.js b/datasette/static/table.js
index 43dd81d7..27b816be 100644
--- a/datasette/static/table.js
+++ b/datasette/static/table.js
@@ -492,12 +492,16 @@ function tableBaseUrl() {
   return url;
 }
 
+function tablePageData() {
+  return window._datasetteTableData || {};
+}
+
 function tableInsertData() {
-  return window._datasetteTableData && window._datasetteTableData.insertRow;
+  return tablePageData().insertRow;
 }
 
 function tableForeignKeys() {
-  return (window._datasetteTableData && window._datasetteTableData.foreignKeys) || {};
+  return tablePageData().foreignKeys || {};
 }
 
 function foreignKeyAutocompleteUrl(column) {
@@ -982,6 +986,118 @@ function rowEditControlElement(control, autocompleteUrl) {
   return autocomplete;
 }
 
+function columnFormControlContext(column, value, isPk, columnType, options) {
+  var pageData = tablePageData();
+  var hasDefault =
+    options.hasDefault ||
+    (options.defaultValue !== null && typeof options.defaultValue !== "undefined");
+  return {
+    mode: options.mode || "edit",
+    database: pageData.database || null,
+    table: pageData.table || (tableInsertData() && tableInsertData().tableName) || null,
+    tableUrl: pageData.tableUrl || null,
+    column: column,
+    value: value,
+    originalValue: value,
+    columnType: columnType || null,
+    sqliteType: options.sqliteType || null,
+    notNull: !!options.notnull,
+    isPrimaryKey: !!isPk,
+    readOnly: !!(isPk && options.primaryKeyReadonly !== false),
+    hasDefault: !!hasDefault,
+    defaultValue: options.defaultValue,
+    form: options.form || null,
+    dialog: options.dialog || null,
+  };
+}
+
+function makeColumnField(manager, context) {
+  if (!manager || !manager.makeColumnField) {
+    return null;
+  }
+  return manager.makeColumnField(context);
+}
+
+function renderColumnField(pluginControl, fieldApi) {
+  if (!pluginControl || !pluginControl.render) {
+    return null;
+  }
+  var pluginWrap = document.createElement("div");
+  pluginWrap.className = "row-edit-plugin-control";
+  pluginWrap.dataset.pluginName = pluginControl.pluginName || "";
+  pluginWrap.dataset.column = fieldApi.context.column;
+  if (fieldApi.context.columnType && fieldApi.context.columnType.type) {
+    pluginWrap.dataset.columnType = fieldApi.context.columnType.type;
+  }
+  try {
+    var rendered = pluginControl.render(pluginWrap, fieldApi);
+    if (rendered && rendered.nodeType) {
+      pluginWrap.appendChild(rendered);
+    }
+  } catch (error) {
+    console.error("Error rendering column form control", error);
+    return null;
+  }
+  pluginWrap._datasetteColumnField = pluginControl;
+  pluginWrap._datasetteColumnFormField = fieldApi;
+  return pluginWrap;
+}
+
+function focusRowEditPluginControl(field) {
+  var pluginWrap = field.querySelector(".row-edit-plugin-control");
+  if (!pluginWrap) {
+    return false;
+  }
+  var pluginControl = pluginWrap._datasetteColumnField;
+  var fieldApi = pluginWrap._datasetteColumnFormField;
+  if (pluginControl && pluginControl.focus) {
+    pluginControl.focus(pluginWrap, fieldApi);
+    return true;
+  }
+  return false;
+}
+
+function focusFirstRowEditControl(state, options) {
+  options = options || {};
+  var fields = state.fields.querySelectorAll(".row-edit-field");
+  for (var i = 0; i < fields.length; i += 1) {
+    var field = fields[i];
+    var control = field.querySelector(".row-edit-input");
+    if (!control) {
+      continue;
+    }
+    if (options.skipReadonly && (control.readOnly || control.disabled)) {
+      continue;
+    }
+    if (focusRowEditPluginControl(field)) {
+      return true;
+    }
+    control.focus();
+    return true;
+  }
+  return false;
+}
+
+function destroyRowEditFields(state) {
+  if (!state || !state.fields) {
+    return;
+  }
+  state.fields
+    .querySelectorAll(".row-edit-plugin-control")
+    .forEach(function (pluginWrap) {
+      var pluginControl = pluginWrap._datasetteColumnField;
+      var fieldApi = pluginWrap._datasetteColumnFormField;
+      if (pluginControl && pluginControl.destroy) {
+        try {
+          pluginControl.destroy(pluginWrap, fieldApi);
+        } catch (error) {
+          console.error("Error destroying column form control", error);
+        }
+      }
+    });
+  state.fields.innerHTML = "";
+}
+
 function createRowEditField(column, value, isPk, columnType, index, options) {
   options = options || {};
   var field = document.createElement("div");
@@ -993,15 +1109,26 @@ function createRowEditField(column, value, isPk, columnType, index, options) {
 
   var fieldId = "row-edit-field-" + index;
   var metaId = "row-edit-field-meta-" + index;
+  var labelId = "row-edit-field-label-" + index;
   var label = document.createElement("label");
   label.className = "row-edit-label";
+  label.id = labelId;
   label.setAttribute("for", fieldId);
   label.textContent = column;
 
   var controlWrap = document.createElement("div");
   controlWrap.className = "row-edit-control-wrap";
 
-  var control = shouldUseTextarea(value, columnType)
+  var context = columnFormControlContext(
+    column,
+    value,
+    isPk,
+    columnType,
+    options,
+  );
+  var pluginControl = makeColumnField(options.manager, context);
+  var preferredControl = pluginControl && pluginControl.inputType;
+  var control = (preferredControl === "textarea" || shouldUseTextarea(value, columnType))
     ? document.createElement("textarea")
     : document.createElement("input");
   control.className = "row-edit-input";
@@ -1081,8 +1208,20 @@ function createRowEditField(column, value, isPk, columnType, index, options) {
     meta.appendChild(foreignKeyLinkWrap);
     updateRowEditFieldMetaHidden(meta);
   }
-  var controlElement = rowEditControlElement(control, options.autocompleteUrl);
-  if (options.autocompleteUrl) {
+  var fieldApi = {
+    id: fieldId,
+    labelId: labelId,
+    descriptionId: metaId,
+    input: control,
+    control: control,
+    form: options.form || null,
+    dialog: options.dialog || null,
+    context: context,
+  };
+  var pluginControlElement = renderColumnField(pluginControl, fieldApi);
+  var controlElement =
+    pluginControlElement || rowEditControlElement(control, options.autocompleteUrl);
+  if (options.autocompleteUrl && !pluginControlElement) {
     control.addEventListener("input", function () {
       setForeignKeyMetaLink(meta, options.autocompleteUrl, null);
     });
@@ -1506,7 +1645,7 @@ function renderRowEditFields(state, data) {
   var primaryKeys = data.primary_keys || [];
   var columnTypes = data.column_types || {};
 
-  state.fields.innerHTML = "";
+  destroyRowEditFields(state);
   columns.forEach(function (column, index) {
     state.fields.appendChild(
       createRowEditField(
@@ -1517,6 +1656,10 @@ function renderRowEditFields(state, data) {
         index,
         {
           autocompleteUrl: foreignKeyAutocompleteUrl(column),
+          dialog: state.dialog,
+          form: state.form,
+          manager: state.manager,
+          mode: state.mode,
           primaryKeyReadonly: true,
         },
       ),
@@ -1525,15 +1668,15 @@ function renderRowEditFields(state, data) {
 
   state.hasLoaded = true;
   updateRowEditDialogButtons(state);
-  var firstEditable = state.fields.querySelector(".row-edit-input:not([readonly])");
-  var firstField = state.fields.querySelector(".row-edit-input");
-  (firstEditable || firstField || state.cancelButton).focus();
+  if (!focusFirstRowEditControl(state, { skipReadonly: true })) {
+    focusFirstRowEditControl(state) || state.cancelButton.focus();
+  }
 }
 
 function renderRowInsertFields(state, data) {
   var columns = data.columns || [];
 
-  state.fields.innerHTML = "";
+  destroyRowEditFields(state);
   columns.forEach(function (column, index) {
     state.fields.appendChild(
       createRowEditField(
@@ -1544,10 +1687,15 @@ function renderRowInsertFields(state, data) {
         index,
         {
           autocompleteUrl: foreignKeyAutocompleteUrl(column.name),
+          dialog: state.dialog,
           defaultValue: column.default,
+          form: state.form,
           hasDefault: column.has_default,
+          manager: state.manager,
+          mode: state.mode,
           notnull: column.notnull,
           primaryKeyReadonly: false,
+          sqliteType: column.type,
           useDefaultInitially: column.has_default,
           valueType: column.value_type,
         },
@@ -1564,10 +1712,13 @@ function renderRowInsertFields(state, data) {
 
   state.hasLoaded = true;
   updateRowEditDialogButtons(state);
-  var firstControl = state.fields.querySelector(
-    ".row-edit-default-set-value, .row-edit-input:not(:disabled)",
-  );
-  (firstControl || state.saveButton).focus();
+  var firstDefaultButton = state.fields.querySelector(".row-edit-default-set-value");
+  if (firstDefaultButton) {
+    firstDefaultButton.focus();
+  } else {
+    focusFirstRowEditControl(state, { skipReadonly: true }) ||
+      state.saveButton.focus();
+  }
 }
 
 function setRowDialogTitle(title, text, codeText, labelText) {
@@ -1692,6 +1843,7 @@ function ensureRowEditDialog(manager) {
     state.loadId += 1;
     clearRowEditDialogError(state);
     state.hasLoaded = false;
+    destroyRowEditFields(state);
     setRowEditDialogLoading(state, false);
     setRowEditDialogSaving(state, false);
     if (
@@ -1737,7 +1889,7 @@ async function openRowEditDialog(button, manager) {
 
   clearRowEditDialogError(state);
   setRowEditDialogLoading(state, true);
-  state.fields.innerHTML = "";
+  destroyRowEditFields(state);
   state.dialog.removeAttribute("aria-describedby");
   setRowDialogTitle(
     state.title,
@@ -1809,7 +1961,7 @@ function openRowInsertDialog(button, manager) {
 
   clearRowEditDialogError(state);
   setRowEditDialogLoading(state, false);
-  state.fields.innerHTML = "";
+  destroyRowEditFields(state);
   state.dialog.removeAttribute("aria-describedby");
   setRowDialogTitle(
     state.title,
diff --git a/datasette/views/table.py b/datasette/views/table.py
index eb155407..dc2589e9 100644
--- a/datasette/views/table.py
+++ b/datasette/views/table.py
@@ -279,7 +279,11 @@ async def _foreign_key_autocomplete_urls(
 async def _table_page_data(
     datasette, request, db, database_name, table_name, is_view, table_insert_ui
 ):
-    data = {"tableUrl": datasette.urls.table(database_name, table_name)}
+    data = {
+        "database": database_name,
+        "table": table_name,
+        "tableUrl": datasette.urls.table(database_name, table_name),
+    }
     if table_insert_ui:
         data["insertRow"] = table_insert_ui
     if not is_view:
diff --git a/docs/javascript_plugins.rst b/docs/javascript_plugins.rst
index 805938c0..d298b6d4 100644
--- a/docs/javascript_plugins.rst
+++ b/docs/javascript_plugins.rst
@@ -46,6 +46,9 @@ The ``datasetteManager`` object
 ``registerPlugin(name, implementation)``
     Call this to register a plugin, passing its name and implementation
 
+``makeColumnField(context)``
+    Calls the ``makeColumnField()`` hook on registered plugins, returning the first custom insert/edit field control that matches the provided field context. This is used internally by Datasette's row insert and edit dialogs.
+
 ``selectors`` - object
     An object providing named aliases to useful CSS selectors, :ref:`listed below <javascript_datasette_manager_selectors>`
 
@@ -188,6 +191,301 @@ This example plugin adds two menu items - one to copy the column name to the cli
       });
     });
 
+.. _javascript_plugins_makeColumnField:
+
+makeColumnField(context)
+~~~~~~~~~~~~~~~~~~~~~~~~
+
+This method, if present, can provide a custom form field for a column in Datasette's row insert and edit dialogs.
+
+It is designed for plugins that register custom column types using the Python ``register_column_types()`` plugin hook. For example, a plugin that defines a ``file`` column type can use ``makeColumnField()`` to replace a plain text input with a file picker, and a plugin that defines a rich text column type can use it to enhance the field with an editor.
+
+Datasette calls ``makeColumnField(context)`` on each registered JavaScript plugin when it renders an editable insert/edit field. Plugins should inspect the ``context`` object and return ``null`` or ``undefined`` for fields they do not handle.
+
+The first plugin to return a truthy control object is used for that field. Plugins are called in registration order. If a plugin raises an exception, Datasette logs the error to the browser console and continues to the next plugin.
+
+The value that Datasette submits is still read from the core-owned input or textarea provided to the plugin as ``field.input``. This keeps custom fields progressive: the plugin can render any UI it needs, but it must keep ``field.input.value`` synchronized with the raw value that should be sent to the insert/update API.
+
+Context object
+^^^^^^^^^^^^^^
+
+``makeColumnField(context)`` is called with a context object describing the field. The current context object has these keys:
+
+``mode`` - string
+    ``"insert"`` or ``"edit"``.
+
+``database`` - string or null
+    The database name.
+
+``table`` - string or null
+    The table name.
+
+``tableUrl`` - string or null
+    The path to the table page, including any configured base URL prefix.
+
+``column`` - string
+    The column name.
+
+``value``
+    The current JavaScript value for the field. For edit forms this is the row's current value. For insert forms this is usually ``null`` or ``""``.
+
+``originalValue``
+    The value the field had when the form was opened. This currently matches ``value``.
+
+``columnType`` - object or null
+    The configured Datasette column type for this column, if one exists. This object includes a ``type`` key containing the column type name. Plugins should generally check ``context.columnType && context.columnType.type`` before deciding whether to handle a field.
+
+``sqliteType`` - string or null
+    The SQLite column type, if known.
+
+``notNull`` - boolean
+    True if the column is defined as ``NOT NULL``.
+
+``isPrimaryKey`` - boolean
+    True if this column is part of the table's primary key.
+
+``readOnly`` - boolean
+    True if Datasette is rendering the field as read-only. Primary key fields are read-only in edit forms by default.
+
+``hasDefault`` - boolean
+    True if the column has a SQLite default value and the insert form can offer the "use default" behavior.
+
+``defaultValue``
+    The column default value or expression, if available.
+
+``form`` - ``HTMLFormElement`` or null
+    The row insert/edit form element.
+
+``dialog`` - ``HTMLDialogElement`` or null
+    The modal dialog element.
+
+Returned control object
+^^^^^^^^^^^^^^^^^^^^^^^
+
+A plugin that wants to handle a field should return an object. Datasette currently recognizes these properties:
+
+``inputType`` - string, optional
+    If set to ``"textarea"``, Datasette creates a ``<textarea>`` as the underlying ``field.input`` before calling ``render()``. Any other value is ignored.
+
+``render(node, field)`` - function
+    Called once to render the custom field UI. ``node`` is an empty container element created by Datasette. ``field`` is a helper object described below.
+
+    The plugin should append its UI to ``node``. If ``render()`` returns a DOM node, Datasette appends that returned node to ``node``.
+
+``focus(node, field)`` - function, optional
+    Called when Datasette wants to focus this field, for example when focusing the first editable field in the dialog. Use this to focus the most useful interactive element inside the custom UI.
+
+``destroy(node, field)`` - function, optional
+    Called when Datasette tears down the insert/edit form. Use this to remove event listeners, close nested pickers, revoke object URLs, clear timers, or release other resources.
+
+Datasette adds a ``pluginName`` property to the control object internally, based on the name passed to ``registerPlugin()``.
+
+The field helper object
+^^^^^^^^^^^^^^^^^^^^^^^
+
+The second argument to ``render(node, field)`` provides the core input and stable IDs that help the plugin integrate with the modal's form and accessibility behavior:
+
+``id`` - string
+    The ID Datasette assigned to the underlying form control.
+
+``labelId`` - string
+    The ID of the visible field label.
+
+``descriptionId`` - string
+    The ID of the field metadata/help text. This metadata can include details such as ``Primary key``, ``Required``, ``Current value: NULL`` or ``Custom type: file``.
+
+``input`` - ``HTMLInputElement`` or ``HTMLTextAreaElement``
+    The core-owned form control. Datasette reads this element's ``name``, ``value`` and ``dataset`` properties when the row is inserted or updated.
+
+``control``
+    An alias for ``input``.
+
+``form`` - ``HTMLFormElement`` or null
+    The containing row insert/edit form.
+
+``dialog`` - ``HTMLDialogElement`` or null
+    The containing modal dialog.
+
+``context`` - object
+    The original context object passed to ``makeColumnField()``.
+
+Value handling
+^^^^^^^^^^^^^^
+
+Custom fields should keep ``field.input.value`` synchronized with the raw value to submit.
+
+If a custom field changes the value programmatically, it should dispatch normal ``input`` and ``change`` events so the rest of the form can observe the update:
+
+.. code-block:: javascript
+
+    function setInputValue(input, value) {
+      input.value = value || "";
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+      input.dispatchEvent(new Event("change", { bubbles: true }));
+    }
+
+Plugins can either keep the core input visible, wrap it in a custom element, or hide it and provide a richer interface. If the input is hidden, the custom UI must still expose an accessible name, state and keyboard interaction.
+
+If the plugin changes the kind of value stored in the underlying input, it can adjust ``field.input.dataset.originalValueType``. Datasette uses that dataset value when converting the submitted text back to a JSON value for the insert/update API.
+
+For example, a file picker that stores a string file ID can set:
+
+.. code-block:: javascript
+
+    field.input.type = "hidden";
+    field.input.dataset.originalValueType = "null";
+
+This causes an empty string to be submitted as ``null``.
+
+Lazy loading large controls
+^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+The JavaScript file that registers ``makeColumnField()`` should be small. If the actual control is large, load it from inside ``render()`` using dynamic ``import()``. That way the heavier code is only downloaded after a user opens an insert/edit dialog containing a matching column type.
+
+.. code-block:: javascript
+
+    const editorUrl = new URL("./editor.js", import.meta.url).href;
+
+    document.addEventListener("datasette_init", function (event) {
+      event.detail.registerPlugin("my-editor", {
+        version: "0.1",
+
+        makeColumnField(context) {
+          if (!context.columnType || context.columnType.type !== "my-editor") {
+            return null;
+          }
+          return {
+            inputType: "textarea",
+            render(node, field) {
+              node.appendChild(field.input);
+              import(editorUrl).then(function () {
+                // Enhance field.input here.
+              });
+            }
+          };
+        }
+      });
+    });
+
+Example: textarea-backed custom element
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+This example handles a ``markdown-editor`` column type by asking Datasette for a textarea and wrapping that textarea in a custom element:
+
+.. code-block:: javascript
+
+    document.addEventListener("datasette_init", function (event) {
+      event.detail.registerPlugin("markdown-editor", {
+        version: "0.1",
+
+        makeColumnField(context) {
+          if (!context.columnType || context.columnType.type !== "markdown-editor") {
+            return null;
+          }
+
+          return {
+            inputType: "textarea",
+
+            render(node, field) {
+              const editor = document.createElement("my-markdown-editor");
+              editor.appendChild(field.input);
+              node.appendChild(editor);
+
+              if (field.labelId) {
+                field.input.setAttribute("aria-labelledby", field.labelId);
+              }
+              if (field.descriptionId) {
+                field.input.setAttribute("aria-describedby", field.descriptionId);
+              }
+            },
+
+            focus(node, field) {
+              const editor = node.querySelector("my-markdown-editor");
+              if (editor && editor.focus) {
+                editor.focus();
+              } else {
+                field.input.focus();
+              }
+            }
+          };
+        }
+      });
+    });
+
+Example: hidden input with custom picker
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+This example handles an ``asset`` column type by hiding the core input and writing an asset ID into it when the user selects an item:
+
+.. code-block:: javascript
+
+    document.addEventListener("datasette_init", function (event) {
+      event.detail.registerPlugin("asset-picker", {
+        version: "0.1",
+
+        makeColumnField(context) {
+          if (!context.columnType || context.columnType.type !== "asset") {
+            return null;
+          }
+
+          return {
+            render(node, field) {
+              field.input.type = "hidden";
+              field.input.dataset.originalValueType = "null";
+
+              const group = document.createElement("div");
+              group.setAttribute("role", "group");
+              group.setAttribute("aria-labelledby", field.labelId);
+              group.setAttribute("aria-describedby", field.descriptionId);
+
+              const current = document.createElement("span");
+              current.textContent = field.input.value || "No asset selected";
+
+              const button = document.createElement("button");
+              button.type = "button";
+              button.textContent = "Choose asset";
+              button.addEventListener("click", async function () {
+                const assetId = await chooseAsset();
+                if (assetId === null) {
+                  return;
+                }
+                field.input.value = assetId;
+                field.input.dispatchEvent(new Event("input", { bubbles: true }));
+                field.input.dispatchEvent(new Event("change", { bubbles: true }));
+                current.textContent = assetId || "No asset selected";
+              });
+
+              group.appendChild(current);
+              group.appendChild(button);
+              node.appendChild(field.input);
+              node.appendChild(group);
+            },
+
+            focus(node) {
+              const button = node.querySelector("button");
+              if (button) {
+                button.focus();
+              }
+            }
+          };
+        }
+      });
+    });
+
+Accessibility
+^^^^^^^^^^^^^
+
+Custom fields are responsible for preserving the accessibility of the form:
+
+- The visible field label should name the control. Use ``field.labelId`` with ``aria-labelledby`` when wrapping or replacing the visible input.
+- Field metadata should remain available to assistive technology. Use ``field.descriptionId`` with ``aria-describedby``.
+- Keyboard users must be able to operate every part of the custom field.
+- If the field opens an inline picker or other nested UI, ``Escape`` should close that nested UI first and return focus to a sensible element.
+- If a control performs asynchronous loading, expose loading and error states in the UI. Use appropriate ARIA live regions where the state change is important to understand the field.
+- If a plugin hides ``field.input``, the replacement UI must still make the current value and available actions clear.
+
+Plugins should not submit the row themselves from inside ``makeColumnField()`` controls. Datasette owns the insert/edit dialog lifecycle, form submission, API call, error handling and row refresh.
+
 .. _javascript_datasette_manager_selectors:
 
 Selectors
diff --git a/tests/test_table_html.py b/tests/test_table_html.py
index b7d57918..a1510aeb 100644
--- a/tests/test_table_html.py
+++ b/tests/test_table_html.py
@@ -881,7 +881,11 @@ async def test_row_delete_action_data_attributes():
         response = await ds.client.get("/data/items", actor={"id": "root"})
         assert response.status_code == 200
         soup = Soup(response.text, "html.parser")
-        assert table_data_from_soup(soup) == {"tableUrl": "/data/items"}
+        assert table_data_from_soup(soup) == {
+            "database": "data",
+            "table": "items",
+            "tableUrl": "/data/items",
+        }
         assert soup.select_one('button[data-table-action="insert-row"]') is None
 
         row = soup.select_one("table.rows-and-columns tbody tr")
@@ -1151,7 +1155,9 @@ def test_table_data_uses_base_url(app_client_base_url_prefix):
         re.DOTALL,
     )
     assert json.loads(match.group(1)) == {
-        "tableUrl": "/prefix/fixtures/simple_primary_key"
+        "database": "fixtures",
+        "table": "simple_primary_key",
+        "tableUrl": "/prefix/fixtures/simple_primary_key",
     }
 
 

From 841a2536ea993ef31b8161b1470367da397a5eae Mon Sep 17 00:00:00 2001
From: Simon Willison <swillison@gmail.com>
Date: Sun, 14 Jun 2026 13:54:10 -0700
Subject: [PATCH 18/23] Tighten row edit field plugin API

Replace the value/valueType/originalValue/originalValueType fields on makeColumnField() contexts with an explicit field object API for reading, writing, resetting, comparing and validating field values.

Normalize columnType to {type, config}, rename the SQLite default metadata so it is clearly SQLite-specific, and document that plugins submit only string, number, boolean or null values. Plugins that need structured data should serialize it themselves instead of relying on Datasette to special-case JSON.

Move the built-in json column type behavior onto the same plugin API used by external plugins: validate the textarea with field.setValidity() as the value changes, but submit plain text. Harden row edit value comparison so fixing invalid JSON in an existing row is not blocked by the original invalid value.

Update the JavaScript plugin documentation and Node-based tests for the revised field contract.
---
 datasette/static/app.css           |  20 ++
 datasette/static/table.js          | 367 +++++++++++++++-----
 datasette/views/table.py           |  13 +-
 docs/javascript_plugins.rst        | 173 ++++++----
 tests/test_datasette_manager_js.py | 515 +++++++++++++++++++++++++++++
 tests/test_table_html.py           |  10 +-
 6 files changed, 958 insertions(+), 140 deletions(-)
 create mode 100644 tests/test_datasette_manager_js.py

diff --git a/datasette/static/app.css b/datasette/static/app.css
index 633ebd7a..c053f484 100644
--- a/datasette/static/app.css
+++ b/datasette/static/app.css
@@ -1521,6 +1521,16 @@ textarea.row-edit-input {
     outline: 3px solid rgba(26, 86, 219, 0.12);
 }
 
+.row-edit-input[aria-invalid="true"] {
+    border-color: #b42318;
+    background: #fff8f7;
+}
+
+.row-edit-input[aria-invalid="true"]:focus {
+    border-color: #b42318;
+    outline-color: rgba(180, 35, 24, 0.16);
+}
+
 .row-edit-input[readonly] {
     color: var(--muted);
     background: var(--paper);
@@ -1594,6 +1604,16 @@ textarea.row-edit-input {
     font-size: 0.78rem;
 }
 
+.row-edit-field-validation-error {
+    color: #b42318;
+    display: block;
+    margin-top: 2px;
+}
+
+.row-edit-field-validation-error[hidden] {
+    display: none;
+}
+
 .row-edit-field-meta-autocomplete {
     line-height: 1.2;
     min-height: 1.2em;
diff --git a/datasette/static/table.js b/datasette/static/table.js
index 27b816be..79ed45b9 100644
--- a/datasette/static/table.js
+++ b/datasette/static/table.js
@@ -959,7 +959,7 @@ function shouldUseTextarea(value, columnType) {
   return text.length > 80 || /[\r\n]/.test(text);
 }
 
-function rowEditValueType(value) {
+function rowEditValueKind(value) {
   if (value === null || typeof value === "undefined") {
     return "null";
   }
@@ -969,9 +969,6 @@ function rowEditValueType(value) {
   if (typeof value === "boolean") {
     return "boolean";
   }
-  if (typeof value === "object") {
-    return "json";
-  }
   return "string";
 }
 
@@ -986,26 +983,37 @@ function rowEditControlElement(control, autocompleteUrl) {
   return autocomplete;
 }
 
+function columnTypeForContext(columnType) {
+  if (!columnType) {
+    return null;
+  }
+  return {
+    type: columnType.type,
+    config: columnType.config || {},
+  };
+}
+
 function columnFormControlContext(column, value, isPk, columnType, options) {
   var pageData = tablePageData();
-  var hasDefault =
-    options.hasDefault ||
-    (options.defaultValue !== null && typeof options.defaultValue !== "undefined");
+  var hasSqliteDefault =
+    options.hasSqliteDefault ||
+    (options.sqliteDefaultExpression !== null &&
+      typeof options.sqliteDefaultExpression !== "undefined");
   return {
     mode: options.mode || "edit",
     database: pageData.database || null,
     table: pageData.table || (tableInsertData() && tableInsertData().tableName) || null,
     tableUrl: pageData.tableUrl || null,
     column: column,
-    value: value,
-    originalValue: value,
-    columnType: columnType || null,
+    columnType: columnTypeForContext(columnType),
     sqliteType: options.sqliteType || null,
     notNull: !!options.notnull,
     isPrimaryKey: !!isPk,
-    readOnly: !!(isPk && options.primaryKeyReadonly !== false),
-    hasDefault: !!hasDefault,
-    defaultValue: options.defaultValue,
+    hasSqliteDefault: !!hasSqliteDefault,
+    sqliteDefaultExpression: options.sqliteDefaultExpression,
+    useSqliteDefaultInitially: !!(
+      hasSqliteDefault && options.useSqliteDefaultInitially
+    ),
     form: options.form || null,
     dialog: options.dialog || null,
   };
@@ -1018,6 +1026,148 @@ function makeColumnField(manager, context) {
   return manager.makeColumnField(context);
 }
 
+function createColumnFieldApi(options) {
+  var control = options.control;
+  var context = options.context;
+  var field = {
+    context: context,
+    id: options.id,
+    labelId: options.labelId,
+    descriptionId: options.descriptionId,
+    root: null,
+    form: options.form || null,
+    dialog: options.dialog || null,
+    input: control,
+    control: control,
+    meta: options.meta || null,
+    validationMessageElement: null,
+    getValue: function () {
+      return valueFromRowEditControl(control);
+    },
+    setValue: function (value, setOptions) {
+      setOptions = setOptions || {};
+      if (
+        value !== null &&
+        typeof value !== "undefined" &&
+        typeof value === "object"
+      ) {
+        throw new TypeError(
+          "field.setValue() accepts strings, numbers, booleans or null; serialize objects before setting the field value",
+        );
+      }
+      field.stopUsingSqliteDefault({ dispatch: false });
+      control.value = valueToEditText(value);
+      control.dataset.currentValueKind = rowEditValueKind(value);
+      if (setOptions.dispatch !== false) {
+        field.dispatchChange();
+      }
+    },
+    getInitialValue: function () {
+      return initialValueFromRowEditControl(control);
+    },
+    hasChanged: function () {
+      if (field.isUsingSqliteDefault()) {
+        return !context.useSqliteDefaultInitially;
+      }
+      if (
+        control.value === (control.dataset.initialValue || "") &&
+        (control.dataset.currentValueKind ||
+          control.dataset.initialValueKind ||
+          "string") === (control.dataset.initialValueKind || "string")
+      ) {
+        return false;
+      }
+      try {
+        return !rowEditValuesMatch(field.getValue(), field.getInitialValue());
+      } catch (_error) {
+        return true;
+      }
+    },
+    clearValue: function (clearOptions) {
+      field.setValue(null, clearOptions);
+    },
+    resetValue: function (resetOptions) {
+      resetOptions = resetOptions || {};
+      field.stopUsingSqliteDefault({ dispatch: false });
+      control.value = control.dataset.initialValue || "";
+      control.dataset.currentValueKind =
+        control.dataset.initialValueKind || "string";
+      if (resetOptions.dispatch !== false) {
+        field.dispatchChange();
+      }
+    },
+    isUsingSqliteDefault: function () {
+      return control.dataset.useSqliteDefault === "1";
+    },
+    useSqliteDefault: function (defaultOptions) {
+      defaultOptions = defaultOptions || {};
+      if (!context.hasSqliteDefault) {
+        return;
+      }
+      control.dataset.useSqliteDefault = "1";
+      control.disabled = true;
+      control.value = "";
+      control.dataset.currentValueKind = "null";
+      field.syncSqliteDefaultUi();
+      if (defaultOptions.dispatch !== false) {
+        field.dispatchChange();
+      }
+    },
+    stopUsingSqliteDefault: function (defaultOptions) {
+      defaultOptions = defaultOptions || {};
+      if (control.dataset.useSqliteDefault !== "1") {
+        return;
+      }
+      control.dataset.useSqliteDefault = "0";
+      control.disabled = false;
+      field.syncSqliteDefaultUi();
+      if (defaultOptions.dispatch !== false) {
+        field.dispatchChange();
+      }
+    },
+    syncSqliteDefaultUi: function () {},
+    dispatchChange: function () {
+      control.dispatchEvent(new Event("input", { bubbles: true }));
+      control.dispatchEvent(new Event("change", { bubbles: true }));
+    },
+    setValidity: function (message) {
+      message = message || "";
+      control.setCustomValidity(message);
+      if (message) {
+        control.setAttribute("aria-invalid", "true");
+      } else {
+        control.removeAttribute("aria-invalid");
+      }
+      var validationMessage = ensureColumnFieldValidationMessage(field);
+      if (validationMessage) {
+        validationMessage.textContent = message;
+        validationMessage.hidden = !message;
+      }
+    },
+    clearValidity: function () {
+      field.setValidity("");
+    },
+  };
+  return field;
+}
+
+function ensureColumnFieldValidationMessage(field) {
+  if (field.validationMessageElement) {
+    return field.validationMessageElement;
+  }
+  if (!field.meta) {
+    return null;
+  }
+  var validationMessage = document.createElement("span");
+  validationMessage.id = field.id + "-validation-error";
+  validationMessage.className = "row-edit-field-validation-error";
+  validationMessage.hidden = true;
+  validationMessage.setAttribute("role", "alert");
+  field.meta.appendChild(validationMessage);
+  field.validationMessageElement = validationMessage;
+  return validationMessage;
+}
+
 function renderColumnField(pluginControl, fieldApi) {
   if (!pluginControl || !pluginControl.render) {
     return null;
@@ -1029,8 +1179,9 @@ function renderColumnField(pluginControl, fieldApi) {
   if (fieldApi.context.columnType && fieldApi.context.columnType.type) {
     pluginWrap.dataset.columnType = fieldApi.context.columnType.type;
   }
+  fieldApi.root = pluginWrap;
   try {
-    var rendered = pluginControl.render(pluginWrap, fieldApi);
+    var rendered = pluginControl.render(fieldApi);
     if (rendered && rendered.nodeType) {
       pluginWrap.appendChild(rendered);
     }
@@ -1043,6 +1194,54 @@ function renderColumnField(pluginControl, fieldApi) {
   return pluginWrap;
 }
 
+function validateJsonColumnField(field) {
+  var value = field.input.value;
+  if (value.trim() === "") {
+    field.clearValidity();
+    return true;
+  }
+  try {
+    JSON.parse(value);
+    field.clearValidity();
+    return true;
+  } catch (error) {
+    field.setValidity(
+      "Invalid JSON" + (error && error.message ? ": " + error.message : ""),
+    );
+    return false;
+  }
+}
+
+function registerBuiltinColumnFieldPlugins(manager) {
+  if (!manager || !manager.registerPlugin) {
+    return;
+  }
+  manager.registerPlugin("datasette-json-column", {
+    version: "1.0",
+    makeColumnField: function (context) {
+      if (!context.columnType || context.columnType.type !== "json") {
+        return null;
+      }
+      return {
+        inputType: "textarea",
+        render: function (field) {
+          field.input.addEventListener("input", function () {
+            validateJsonColumnField(field);
+          });
+          field.input.addEventListener("change", function () {
+            validateJsonColumnField(field);
+          });
+          validateJsonColumnField(field);
+          field.root.appendChild(field.input);
+        },
+        focus: function (field) {
+          field.input.focus();
+        },
+      };
+    },
+  });
+}
+
 function focusRowEditPluginControl(field) {
   var pluginWrap = field.querySelector(".row-edit-plugin-control");
   if (!pluginWrap) {
@@ -1051,8 +1250,12 @@ function focusRowEditPluginControl(field) {
   var pluginControl = pluginWrap._datasetteColumnField;
   var fieldApi = pluginWrap._datasetteColumnFormField;
   if (pluginControl && pluginControl.focus) {
-    pluginControl.focus(pluginWrap, fieldApi);
-    return true;
+    try {
+      pluginControl.focus(fieldApi);
+      return true;
+    } catch (error) {
+      console.error("Error focusing column form control", error);
+    }
   }
   return false;
 }
@@ -1089,7 +1292,7 @@ function destroyRowEditFields(state) {
       var fieldApi = pluginWrap._datasetteColumnFormField;
       if (pluginControl && pluginControl.destroy) {
         try {
-          pluginControl.destroy(pluginWrap, fieldApi);
+          pluginControl.destroy(fieldApi);
         } catch (error) {
           console.error("Error destroying column form control", error);
         }
@@ -1102,10 +1305,12 @@ function createRowEditField(column, value, isPk, columnType, index, options) {
   options = options || {};
   var field = document.createElement("div");
   field.className = "row-edit-field";
-  var hasDefault =
-    options.hasDefault ||
-    (options.defaultValue !== null && typeof options.defaultValue !== "undefined");
-  var useDefaultInitially = hasDefault && options.useDefaultInitially;
+  var hasSqliteDefault =
+    options.hasSqliteDefault ||
+    (options.sqliteDefaultExpression !== null &&
+      typeof options.sqliteDefaultExpression !== "undefined");
+  var useSqliteDefaultInitially =
+    hasSqliteDefault && options.useSqliteDefaultInitially;
 
   var fieldId = "row-edit-field-" + index;
   var metaId = "row-edit-field-meta-" + index;
@@ -1136,12 +1341,15 @@ function createRowEditField(column, value, isPk, columnType, index, options) {
   control.name = column;
   control.value = valueToEditText(value);
   control.setAttribute("aria-describedby", metaId);
-  control.dataset.originalValue = valueToEditText(value);
-  control.dataset.originalValueType =
-    options.valueType || rowEditValueType(value);
+  control.dataset.initialValue = valueToEditText(value);
+  control.dataset.initialValueKind =
+    options.valueKind || rowEditValueKind(value);
   control.dataset.primaryKey = isPk ? "1" : "0";
-  if (useDefaultInitially) {
-    control.dataset.useDefault = "1";
+  control.dataset.currentValueKind = control.dataset.initialValueKind;
+  if (hasSqliteDefault) {
+    control.dataset.useSqliteDefault = useSqliteDefaultInitially ? "1" : "0";
+  }
+  if (useSqliteDefaultInitially) {
     control.disabled = true;
   }
   if (options.omitIfBlank) {
@@ -1172,8 +1380,8 @@ function createRowEditField(column, value, isPk, columnType, index, options) {
   if (options.notnull) {
     metaParts.push("Required");
   }
-  if (hasDefault && !useDefaultInitially) {
-    metaParts.push("Default: " + options.defaultValue);
+  if (hasSqliteDefault && !useSqliteDefaultInitially) {
+    metaParts.push("SQLite default: " + options.sqliteDefaultExpression);
   }
   if (value === null) {
     metaParts.push("Current value: NULL");
@@ -1208,16 +1416,17 @@ function createRowEditField(column, value, isPk, columnType, index, options) {
     meta.appendChild(foreignKeyLinkWrap);
     updateRowEditFieldMetaHidden(meta);
   }
-  var fieldApi = {
+  var fieldApi = createColumnFieldApi({
     id: fieldId,
     labelId: labelId,
     descriptionId: metaId,
-    input: control,
     control: control,
+    meta: meta,
+    input: control,
     form: options.form || null,
     dialog: options.dialog || null,
     context: context,
-  };
+  });
   var pluginControlElement = renderColumnField(pluginControl, fieldApi);
   var controlElement =
     pluginControlElement || rowEditControlElement(control, options.autocompleteUrl);
@@ -1238,7 +1447,7 @@ function createRowEditField(column, value, isPk, columnType, index, options) {
     resolveForeignKeyMetaLink(control, options.autocompleteUrl, meta);
   }
 
-  if (useDefaultInitially) {
+  if (hasSqliteDefault) {
     var defaultBlock = document.createElement("div");
     defaultBlock.className = "row-edit-default";
     defaultBlock.setAttribute("aria-describedby", metaId);
@@ -1248,7 +1457,7 @@ function createRowEditField(column, value, isPk, columnType, index, options) {
     defaultText.appendChild(document.createTextNode("default "));
     var defaultCode = document.createElement("code");
     defaultCode.className = "row-edit-default-code";
-    defaultCode.textContent = options.defaultValue;
+    defaultCode.textContent = options.sqliteDefaultExpression;
     defaultText.appendChild(defaultCode);
 
     var setValueButton = document.createElement("button");
@@ -1262,35 +1471,37 @@ function createRowEditField(column, value, isPk, columnType, index, options) {
     customWrap.className = "row-edit-custom-value";
     customWrap.hidden = true;
 
-    var useDefaultButton = document.createElement("button");
-    useDefaultButton.type = "button";
-    useDefaultButton.className = "row-edit-default-button";
-    useDefaultButton.textContent = "Use default";
-    useDefaultButton.setAttribute("aria-label", "Use default for " + column);
+    var useSqliteDefaultButton = document.createElement("button");
+    useSqliteDefaultButton.type = "button";
+    useSqliteDefaultButton.className = "row-edit-default-button";
+    useSqliteDefaultButton.textContent = "Use default";
+    useSqliteDefaultButton.setAttribute(
+      "aria-label",
+      "Use SQLite default for " + column,
+    );
 
     setValueButton.addEventListener("click", function () {
-      control.dataset.useDefault = "0";
-      control.disabled = false;
-      defaultBlock.hidden = true;
-      customWrap.hidden = false;
+      fieldApi.stopUsingSqliteDefault();
       control.focus();
     });
 
-    useDefaultButton.addEventListener("click", function () {
-      control.dataset.useDefault = "1";
-      control.disabled = true;
-      control.value = "";
-      customWrap.hidden = true;
-      defaultBlock.hidden = false;
+    useSqliteDefaultButton.addEventListener("click", function () {
+      fieldApi.useSqliteDefault();
       setValueButton.focus();
     });
 
     defaultBlock.appendChild(defaultText);
     defaultBlock.appendChild(setValueButton);
     customWrap.appendChild(controlElement);
-    customWrap.appendChild(useDefaultButton);
+    customWrap.appendChild(useSqliteDefaultButton);
     controlWrap.appendChild(defaultBlock);
     controlWrap.appendChild(customWrap);
+    fieldApi.syncSqliteDefaultUi = function () {
+      var usingDefault = fieldApi.isUsingSqliteDefault();
+      defaultBlock.hidden = !usingDefault;
+      customWrap.hidden = usingDefault;
+    };
+    fieldApi.syncSqliteDefaultUi();
   } else {
     controlWrap.appendChild(controlElement);
   }
@@ -1340,17 +1551,19 @@ function valueFromRowEditControl(control) {
   return valueFromRowEditText(
     control.name,
     value,
-    control.dataset.originalValueType || "string",
+    control.dataset.currentValueKind ||
+      control.dataset.initialValueKind ||
+      "string",
   );
 }
 
-function valueFromRowEditText(name, value, originalValueType) {
+function valueFromRowEditText(name, value, initialValueKind) {
   var trimmed = value.trim();
 
-  if (originalValueType === "null" && value === "") {
+  if (initialValueKind === "null" && value === "") {
     return null;
   }
-  if (originalValueType === "number") {
+  if (initialValueKind === "number") {
     if (trimmed === "") {
       return null;
     }
@@ -1360,7 +1573,7 @@ function valueFromRowEditText(name, value, originalValueType) {
     }
     return numberValue;
   }
-  if (originalValueType === "boolean") {
+  if (initialValueKind === "boolean") {
     if (/^(true|1|yes)$/i.test(trimmed)) {
       return true;
     }
@@ -1369,24 +1582,14 @@ function valueFromRowEditText(name, value, originalValueType) {
     }
     throw new Error(name + " must be true or false");
   }
-  if (originalValueType === "json") {
-    if (trimmed === "") {
-      return null;
-    }
-    try {
-      return JSON.parse(value);
-    } catch (_error) {
-      throw new Error(name + " must be valid JSON");
-    }
-  }
   return value;
 }
 
-function originalValueFromRowEditControl(control) {
+function initialValueFromRowEditControl(control) {
   return valueFromRowEditText(
     control.name,
-    control.dataset.originalValue || "",
-    control.dataset.originalValueType || "string",
+    control.dataset.initialValue || "",
+    control.dataset.initialValueKind || "string",
   );
 }
 
@@ -1414,19 +1617,32 @@ function collectRowFormValues(state) {
     ) {
       return;
     }
-    if (control.dataset.useDefault === "1") {
+    if (control.dataset.useSqliteDefault === "1") {
       return;
     }
     if (control.dataset.omitIfBlank === "1" && control.value === "") {
       return;
     }
-    var value = valueFromRowEditControl(control);
     if (
       state.mode === "edit" &&
-      rowEditValuesMatch(value, originalValueFromRowEditControl(control))
+      control.value === (control.dataset.initialValue || "") &&
+      (control.dataset.currentValueKind ||
+        control.dataset.initialValueKind ||
+        "string") === (control.dataset.initialValueKind || "string")
     ) {
       return;
     }
+    var value = valueFromRowEditControl(control);
+    if (state.mode === "edit") {
+      try {
+        if (rowEditValuesMatch(value, initialValueFromRowEditControl(control))) {
+          return;
+        }
+      } catch (_error) {
+        // If the original value cannot be parsed using the field's current
+        // type, treat the field as changed and submit the corrected value.
+      }
+    }
     values[control.name] = value;
   });
   return values;
@@ -1688,16 +1904,16 @@ function renderRowInsertFields(state, data) {
         {
           autocompleteUrl: foreignKeyAutocompleteUrl(column.name),
           dialog: state.dialog,
-          defaultValue: column.default,
           form: state.form,
-          hasDefault: column.has_default,
+          hasSqliteDefault: column.has_default,
           manager: state.manager,
           mode: state.mode,
           notnull: column.notnull,
           primaryKeyReadonly: false,
-          sqliteType: column.type,
-          useDefaultInitially: column.has_default,
-          valueType: column.value_type,
+          sqliteDefaultExpression: column.default,
+          sqliteType: column.sqlite_type,
+          useSqliteDefaultInitially: column.has_default,
+          valueKind: column.value_kind,
         },
       ),
     );
@@ -2395,6 +2611,7 @@ function openColumnChooser() {
 document.addEventListener("datasette_init", function (evt) {
   const { detail: manager } = evt;
 
+  registerBuiltinColumnFieldPlugins(manager);
   initializeColumnActions(manager);
 
   // Main table
diff --git a/datasette/views/table.py b/datasette/views/table.py
index dc2589e9..de7b0216 100644
--- a/datasette/views/table.py
+++ b/datasette/views/table.py
@@ -241,15 +241,18 @@ async def _validate_column_types(datasette, database_name, table_name, rows):
     return errors
 
 
-def _column_value_type_for_insert_form(column_detail, column_type):
-    if column_type is not None and column_type.name == "json":
-        return "json"
+def _column_value_kind_for_insert_form(column_detail):
     sqlite_type = SQLiteType.from_declared_type(column_detail.type)
     if sqlite_type in (SQLiteType.INTEGER, SQLiteType.REAL):
         return "number"
     return "string"
 
 
+def _column_sqlite_type_for_insert_form(column_detail):
+    sqlite_type = SQLiteType.from_declared_type(column_detail.type)
+    return sqlite_type.value if sqlite_type is not None else None
+
+
 async def _foreign_key_autocomplete_urls(
     datasette, request, db, database_name, table_name
 ):
@@ -326,12 +329,12 @@ async def _table_insert_ui(
         columns.append(
             {
                 "name": column.name,
-                "type": column.type,
+                "sqlite_type": _column_sqlite_type_for_insert_form(column),
                 "notnull": column.notnull,
                 "default": column.default_value,
                 "has_default": column.default_value is not None,
                 "is_pk": is_pk,
-                "value_type": _column_value_type_for_insert_form(column, column_type),
+                "value_kind": _column_value_kind_for_insert_form(column),
                 "column_type": (
                     {"type": column_type.name, "config": column_type.config}
                     if column_type is not None
diff --git a/docs/javascript_plugins.rst b/docs/javascript_plugins.rst
index d298b6d4..e1a889b4 100644
--- a/docs/javascript_plugins.rst
+++ b/docs/javascript_plugins.rst
@@ -198,13 +198,13 @@ makeColumnField(context)
 
 This method, if present, can provide a custom form field for a column in Datasette's row insert and edit dialogs.
 
-It is designed for plugins that register custom column types using the Python ``register_column_types()`` plugin hook. For example, a plugin that defines a ``file`` column type can use ``makeColumnField()`` to replace a plain text input with a file picker, and a plugin that defines a rich text column type can use it to enhance the field with an editor.
+It is designed for plugins that :ref:`register custom column types <plugin_register_column_types>` using the Python ``register_column_types()`` plugin hook. For example, a plugin that defines a ``file`` column type can use ``makeColumnField()`` to replace a plain text input with a file picker, and a plugin that defines a rich text column type can use it to enhance the field with an editor.
 
 Datasette calls ``makeColumnField(context)`` on each registered JavaScript plugin when it renders an editable insert/edit field. Plugins should inspect the ``context`` object and return ``null`` or ``undefined`` for fields they do not handle.
 
 The first plugin to return a truthy control object is used for that field. Plugins are called in registration order. If a plugin raises an exception, Datasette logs the error to the browser console and continues to the next plugin.
 
-The value that Datasette submits is still read from the core-owned input or textarea provided to the plugin as ``field.input``. This keeps custom fields progressive: the plugin can render any UI it needs, but it must keep ``field.input.value`` synchronized with the raw value that should be sent to the insert/update API.
+Datasette owns the value that will be submitted to the insert/update API. The ``context`` object describes the column and form environment; custom controls should read and write field values using the ``field`` helper object passed to ``render(field)``.
 
 Context object
 ^^^^^^^^^^^^^^
@@ -221,22 +221,26 @@ Context object
     The table name.
 
 ``tableUrl`` - string or null
-    The path to the table page, including any configured base URL prefix.
+    The path to the table page, including any configured :ref:`base URL prefix <setting_base_url>`.
 
 ``column`` - string
     The column name.
 
-``value``
-    The current JavaScript value for the field. For edit forms this is the row's current value. For insert forms this is usually ``null`` or ``""``.
-
-``originalValue``
-    The value the field had when the form was opened. This currently matches ``value``.
-
 ``columnType`` - object or null
-    The configured Datasette column type for this column, if one exists. This object includes a ``type`` key containing the column type name. Plugins should generally check ``context.columnType && context.columnType.type`` before deciding whether to handle a field.
+    The configured Datasette column type for this column, if one exists. This is ``null`` if no column type has been configured.
+
+    If present, this object has exactly these keys:
+
+    ``type`` - string
+        The :ref:`registered column type name <plugin_register_column_types>`, matching the ``name`` attribute of the Python ``ColumnType`` subclass.
+
+    ``config`` - object
+        Configuration for this specific column type assignment. This is ``{}`` if no configuration has been set.
+
+    Plugins should generally check ``context.columnType && context.columnType.type`` before deciding whether to handle a field.
 
 ``sqliteType`` - string or null
-    The SQLite column type, if known.
+    The normalized SQLite type for this column, if known. This is one of ``"TEXT"``, ``"INTEGER"``, ``"REAL"``, ``"BLOB"``, ``"NULL"`` or ``null`` if Datasette could not determine the type.
 
 ``notNull`` - boolean
     True if the column is defined as ``NOT NULL``.
@@ -244,14 +248,14 @@ Context object
 ``isPrimaryKey`` - boolean
     True if this column is part of the table's primary key.
 
-``readOnly`` - boolean
-    True if Datasette is rendering the field as read-only. Primary key fields are read-only in edit forms by default.
-
-``hasDefault`` - boolean
+``hasSqliteDefault`` - boolean
     True if the column has a SQLite default value and the insert form can offer the "use default" behavior.
 
-``defaultValue``
-    The column default value or expression, if available.
+``sqliteDefaultExpression``
+    The SQLite default expression for the column, if available. This is the expression from the table schema, not the actual value SQLite will insert.
+
+``useSqliteDefaultInitially`` - boolean
+    True if the insert form should initially omit this column so SQLite uses the column default.
 
 ``form`` - ``HTMLFormElement`` or null
     The row insert/edit form element.
@@ -267,15 +271,15 @@ A plugin that wants to handle a field should return an object. Datasette current
 ``inputType`` - string, optional
     If set to ``"textarea"``, Datasette creates a ``<textarea>`` as the underlying ``field.input`` before calling ``render()``. Any other value is ignored.
 
-``render(node, field)`` - function
-    Called once to render the custom field UI. ``node`` is an empty container element created by Datasette. ``field`` is a helper object described below.
+``render(field)`` - function
+    Called once to render the custom field UI. ``field`` is a helper object described below.
 
-    The plugin should append its UI to ``node``. If ``render()`` returns a DOM node, Datasette appends that returned node to ``node``.
+    The plugin should append its UI to ``field.root``. If ``render()`` returns a DOM node, Datasette appends that returned node to ``field.root``.
 
-``focus(node, field)`` - function, optional
+``focus(field)`` - function, optional
     Called when Datasette wants to focus this field, for example when focusing the first editable field in the dialog. Use this to focus the most useful interactive element inside the custom UI.
 
-``destroy(node, field)`` - function, optional
+``destroy(field)`` - function, optional
     Called when Datasette tears down the insert/edit form. Use this to remove event listeners, close nested pickers, revoke object URLs, clear timers, or release other resources.
 
 Datasette adds a ``pluginName`` property to the control object internally, based on the name passed to ``registerPlugin()``.
@@ -283,7 +287,10 @@ Datasette adds a ``pluginName`` property to the control object internally, based
 The field helper object
 ^^^^^^^^^^^^^^^^^^^^^^^
 
-The second argument to ``render(node, field)`` provides the core input and stable IDs that help the plugin integrate with the modal's form and accessibility behavior:
+The ``field`` object passed to ``render(field)``, ``focus(field)`` and ``destroy(field)`` provides stable IDs, DOM elements and value helpers for integrating with the row insert/edit dialog:
+
+``context`` - object
+    The original context object passed to ``makeColumnField()``.
 
 ``id`` - string
     The ID Datasette assigned to the underlying form control.
@@ -294,48 +301,103 @@ The second argument to ``render(node, field)`` provides the core input and stabl
 ``descriptionId`` - string
     The ID of the field metadata/help text. This metadata can include details such as ``Primary key``, ``Required``, ``Current value: NULL`` or ``Custom type: file``.
 
+``root`` - ``HTMLElement``
+    The empty container element created by Datasette for this custom field. Plugins should append their UI to this element.
+
 ``input`` - ``HTMLInputElement`` or ``HTMLTextAreaElement``
-    The core-owned form control. Datasette reads this element's ``name``, ``value`` and ``dataset`` properties when the row is inserted or updated.
+    The core-owned backing form control. Plugins can keep this visible, wrap it or hide it, but should use the value helper methods below rather than mutating ``input.value`` directly.
 
 ``control``
     An alias for ``input``.
 
+``meta`` - ``HTMLElement`` or null
+    The field metadata/help text element.
+
 ``form`` - ``HTMLFormElement`` or null
     The containing row insert/edit form.
 
 ``dialog`` - ``HTMLDialogElement`` or null
     The containing modal dialog.
 
-``context`` - object
-    The original context object passed to ``makeColumnField()``.
+``getValue()`` - function
+    Returns the current value Datasette will submit for this field.
 
-Value handling
-^^^^^^^^^^^^^^
+    Datasette uses string values by default. Insert fields for ``"INTEGER"`` and ``"REAL"`` SQLite columns return numbers, or ``null`` if left blank. Plugins can use strings, numbers, booleans or ``null``. If a plugin is editing structured data stored in a SQLite ``TEXT`` column, such as JSON, it should serialize that data to a string before calling ``setValue()``.
 
-Custom fields should keep ``field.input.value`` synchronized with the raw value to submit.
+``setValue(value, options)`` - function
+    Sets the current value Datasette will submit for this field. ``value`` should be a string, number, boolean or ``null``. This also dispatches ``input`` and ``change`` events from the backing input. Pass ``{dispatch: false}`` as the second argument to skip those events.
 
-If a custom field changes the value programmatically, it should dispatch normal ``input`` and ``change`` events so the rest of the form can observe the update:
+    Calling ``setValue()`` also stops using the SQLite default for the field, if it was previously selected.
+
+``getInitialValue()`` - function
+    Returns the submitted-value representation the field had when the form was rendered. For edit forms this is the raw row value from the database. For insert forms this is the blank starting value.
+
+``hasChanged()`` - function
+    Returns true if the field value differs from its initial value, or if the field's SQLite-default state has changed.
+
+``clearValue(options)`` - function
+    Sets the value to ``null``. Accepts the same options as ``setValue()``.
+
+``resetValue(options)`` - function
+    Restores the initial field value. Accepts the same options as ``setValue()``.
+
+``isUsingSqliteDefault()`` - function
+    Returns true if the insert dialog is currently set to omit this column and use the SQLite default.
+
+``useSqliteDefault(options)`` - function
+    Switches the field to use the SQLite default, if one exists. Accepts ``{dispatch: false}``.
+
+``stopUsingSqliteDefault(options)`` - function
+    Switches the field away from the SQLite default without changing the current field value. Accepts ``{dispatch: false}``.
+
+``dispatchChange()`` - function
+    Dispatches ``input`` and ``change`` events from the backing input.
+
+``setValidity(message)`` - function
+    Sets a custom validation message for this field, marks the backing input with ``aria-invalid="true"`` and shows the message in the field metadata area. Pass an empty string to clear the error.
+
+``clearValidity()`` - function
+    Clears any custom validation message previously set by ``setValidity()``.
+
+Submitted value contract
+^^^^^^^^^^^^^^^^^^^^^^^^
+
+The field value contract is deliberately narrow. Datasette submits field values to the row insert/update JSON API, so a custom field value should be one of:
+
+* string
+* number
+* boolean
+* ``null``
+
+Plugins should not pass objects or arrays to ``field.setValue()``. If a column stores structured data in SQLite, such as JSON in a ``TEXT`` column, the plugin should serialize that data first and submit the serialized string. Client-side parsing can still be useful for validation or editor state, but the submitted value should match the SQLite value Datasette should write.
+
+``field.input.dataset`` is reserved for Datasette's private form state. Plugins should not read from it, write to it, or use it to change how Datasette serializes values.
+
+Value helpers
+^^^^^^^^^^^^^
+
+Custom fields should use ``field.getValue()`` and ``field.setValue(value)`` for value handling:
 
 .. code-block:: javascript
 
-    function setInputValue(input, value) {
-      input.value = value || "";
-      input.dispatchEvent(new Event("input", { bubbles: true }));
-      input.dispatchEvent(new Event("change", { bubbles: true }));
-    }
+    const currentValue = field.getValue();
+    field.setValue("new value");
+    field.setValue(null);
 
-Plugins can either keep the core input visible, wrap it in a custom element, or hide it and provide a richer interface. If the input is hidden, the custom UI must still expose an accessible name, state and keyboard interaction.
+Plugins can keep the core input visible, wrap it in a custom element, or hide it and provide a richer interface. If the input is hidden, the custom UI must still expose an accessible name, state and keyboard interaction.
 
-If the plugin changes the kind of value stored in the underlying input, it can adjust ``field.input.dataset.originalValueType``. Datasette uses that dataset value when converting the submitted text back to a JSON value for the insert/update API.
+``field.setValue()`` updates the backing input and Datasette's private value serialization state.
 
-For example, a file picker that stores a string file ID can set:
+For insert forms with a SQLite default, ``field.isUsingSqliteDefault()`` indicates whether Datasette will omit that column from the insert payload. Calling ``field.setValue(value)`` automatically stops using the SQLite default. A plugin can also expose explicit controls that call ``field.useSqliteDefault()`` and ``field.stopUsingSqliteDefault()``.
+
+Datasette's built-in ``json`` column type is implemented using this same JavaScript plugin hook. Datasette registers a small textarea-backed control for fields where ``context.columnType.type === "json"``; that control validates the field as JSON while the value changes and marks it visibly invalid if parsing fails. The submitted value remains the textarea string. The generic field API does not special-case custom column types.
+
+For example, a file picker can store a file ID string or ``null`` without modifying the backing input directly:
 
 .. code-block:: javascript
 
     field.input.type = "hidden";
-    field.input.dataset.originalValueType = "null";
-
-This causes an empty string to be submitted as ``null``.
+    field.setValue(fileId || null);
 
 Lazy loading large controls
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^
@@ -356,8 +418,8 @@ The JavaScript file that registers ``makeColumnField()`` should be small. If the
           }
           return {
             inputType: "textarea",
-            render(node, field) {
-              node.appendChild(field.input);
+            render(field) {
+              field.root.appendChild(field.input);
               import(editorUrl).then(function () {
                 // Enhance field.input here.
               });
@@ -386,10 +448,10 @@ This example handles a ``markdown-editor`` column type by asking Datasette for a
           return {
             inputType: "textarea",
 
-            render(node, field) {
+            render(field) {
               const editor = document.createElement("my-markdown-editor");
               editor.appendChild(field.input);
-              node.appendChild(editor);
+              field.root.appendChild(editor);
 
               if (field.labelId) {
                 field.input.setAttribute("aria-labelledby", field.labelId);
@@ -399,8 +461,8 @@ This example handles a ``markdown-editor`` column type by asking Datasette for a
               }
             },
 
-            focus(node, field) {
-              const editor = node.querySelector("my-markdown-editor");
+            focus(field) {
+              const editor = field.root.querySelector("my-markdown-editor");
               if (editor && editor.focus) {
                 editor.focus();
               } else {
@@ -429,9 +491,8 @@ This example handles an ``asset`` column type by hiding the core input and writi
           }
 
           return {
-            render(node, field) {
+            render(field) {
               field.input.type = "hidden";
-              field.input.dataset.originalValueType = "null";
 
               const group = document.createElement("div");
               group.setAttribute("role", "group");
@@ -439,7 +500,7 @@ This example handles an ``asset`` column type by hiding the core input and writi
               group.setAttribute("aria-describedby", field.descriptionId);
 
               const current = document.createElement("span");
-              current.textContent = field.input.value || "No asset selected";
+              current.textContent = field.getValue() || "No asset selected";
 
               const button = document.createElement("button");
               button.type = "button";
@@ -449,20 +510,18 @@ This example handles an ``asset`` column type by hiding the core input and writi
                 if (assetId === null) {
                   return;
                 }
-                field.input.value = assetId;
-                field.input.dispatchEvent(new Event("input", { bubbles: true }));
-                field.input.dispatchEvent(new Event("change", { bubbles: true }));
+                field.setValue(assetId || null);
                 current.textContent = assetId || "No asset selected";
               });
 
               group.appendChild(current);
               group.appendChild(button);
-              node.appendChild(field.input);
-              node.appendChild(group);
+              field.root.appendChild(field.input);
+              field.root.appendChild(group);
             },
 
-            focus(node) {
-              const button = node.querySelector("button");
+            focus(field) {
+              const button = field.root.querySelector("button");
               if (button) {
                 button.focus();
               }
diff --git a/tests/test_datasette_manager_js.py b/tests/test_datasette_manager_js.py
new file mode 100644
index 00000000..5e21b5bb
--- /dev/null
+++ b/tests/test_datasette_manager_js.py
@@ -0,0 +1,515 @@
+import json
+from pathlib import Path
+import subprocess
+import textwrap
+
+STATIC_DIR = Path(__file__).resolve().parents[1] / "datasette" / "static"
+
+
+def test_datasette_manager_make_column_field():
+    script = textwrap.dedent("""
+        const fs = require("fs");
+        const vm = require("vm");
+        const datasetteManagerJs = __DATASETTE_MANAGER_JS__;
+
+        const documentListeners = {};
+        global.CustomEvent = class {
+          constructor(name, options) {
+            this.type = name;
+            this.detail = options ? options.detail : undefined;
+          }
+        };
+        global.document = {
+          addEventListener(name, callback) {
+            documentListeners[name] = documentListeners[name] || [];
+            documentListeners[name].push(callback);
+          },
+          dispatchEvent(event) {
+            for (const callback of documentListeners[event.type] || []) {
+              callback(event);
+            }
+          },
+        };
+        global.window = { datasetteVersion: "test" };
+
+        vm.runInThisContext(
+          fs.readFileSync(datasetteManagerJs, "utf8"),
+          { filename: "datasette-manager.js" }
+        );
+        for (const callback of documentListeners.DOMContentLoaded || []) {
+          callback();
+        }
+
+        window.__DATASETTE__.registerPlugin("declines", {
+          makeColumnField() {
+            return null;
+          },
+        });
+        window.__DATASETTE__.registerPlugin("handles", {
+          makeColumnField(context) {
+            if (context.columnType.type !== "demo") {
+              return null;
+            }
+            return { inputType: "textarea" };
+          },
+        });
+
+        const control = window.__DATASETTE__.makeColumnField({
+          column: "body",
+          columnType: { type: "demo", config: null },
+        });
+        console.log(JSON.stringify(control));
+    """).replace(
+        "__DATASETTE_MANAGER_JS__",
+        json.dumps(str(STATIC_DIR / "datasette-manager.js")),
+    )
+    result = subprocess.run(
+        ["node", "-e", script],
+        text=True,
+        capture_output=True,
+        check=False,
+    )
+    assert result.returncode == 0, result.stderr
+    assert json.loads(result.stdout) == {
+        "pluginName": "handles",
+        "inputType": "textarea",
+    }
+
+
+def test_table_plugin_column_field_api():
+    script = textwrap.dedent("""
+        const fs = require("fs");
+        const vm = require("vm");
+        const tableJs = __TABLE_JS__;
+
+        class FakeEvent {
+          constructor(type, options) {
+            this.type = type;
+            this.bubbles = !!(options && options.bubbles);
+          }
+        }
+
+        class FakeElement {
+          constructor(tagName = "div") {
+            this.nodeName = tagName.toUpperCase();
+            this.nodeType = 1;
+            this.children = [];
+            this.dataset = {};
+            this.attributes = {};
+            this.value = "";
+            this.name = "";
+            this.disabled = false;
+            this.readOnly = false;
+            this.dispatchedEvents = [];
+            this.eventListeners = {};
+            this.validationMessage = "";
+            this.hidden = false;
+            this.textContent = "";
+            this.className = "";
+            this.classList = {
+              add: (...names) => {
+                const classes = new Set(this.className.split(/\\s+/).filter(Boolean));
+                for (const name of names) {
+                  classes.add(name);
+                }
+                this.className = Array.from(classes).join(" ");
+              },
+              remove: (...names) => {
+                const removeNames = new Set(names);
+                this.className = this.className
+                  .split(/\\s+/)
+                  .filter((name) => name && !removeNames.has(name))
+                  .join(" ");
+              },
+              contains: (name) => this.className.split(/\\s+/).includes(name),
+            };
+          }
+          appendChild(child) {
+            this.children.push(child);
+            child.parentNode = this;
+            return child;
+          }
+          addEventListener(type, callback) {
+            this.eventListeners[type] = this.eventListeners[type] || [];
+            this.eventListeners[type].push(callback);
+          }
+          dispatchEvent(event) {
+            event.target = event.target || this;
+            this.dispatchedEvents.push(event.type);
+            for (const callback of this.eventListeners[event.type] || []) {
+              callback(event);
+            }
+            return true;
+          }
+          setAttribute(name, value) {
+            this.attributes[name] = String(value);
+          }
+          getAttribute(name) {
+            return this.attributes[name] || null;
+          }
+          removeAttribute(name) {
+            delete this.attributes[name];
+          }
+          setCustomValidity(message) {
+            this.validationMessage = message;
+          }
+        }
+
+        global.Event = FakeEvent;
+        global.document = {
+          addEventListener() {},
+          createElement(tagName) {
+            return new FakeElement(tagName);
+          },
+          createTextNode(text) {
+            const node = new FakeElement("#text");
+            node.textContent = text;
+            return node;
+          },
+        };
+        global.location = {
+          href: "http://localhost/data/projects",
+          pathname: "/data/projects",
+          search: "",
+        };
+        global.window = {
+          _datasetteTableData: {
+            database: "data",
+            table: "projects",
+            tableUrl: "/data/projects",
+          },
+        };
+
+        vm.runInThisContext(fs.readFileSync(tableJs, "utf8"), {
+          filename: "table.js",
+        });
+
+        const context = columnFormControlContext(
+          "logo",
+          "df-old",
+          false,
+          { type: "file", config: null },
+          {
+            mode: "edit",
+            hasSqliteDefault: true,
+            sqliteDefaultExpression: "lower(hex(randomblob(4)))",
+            useSqliteDefaultInitially: true,
+          }
+        );
+        if ("defaultValue" in context) {
+          throw new Error("context should not expose defaultValue");
+        }
+        if (!context.hasSqliteDefault) {
+          throw new Error("context.hasSqliteDefault should be true");
+        }
+        if (context.sqliteDefaultExpression !== "lower(hex(randomblob(4)))") {
+          throw new Error("context.sqliteDefaultExpression was not set");
+        }
+        if (JSON.stringify(context.columnType) !== '{"type":"file","config":{}}') {
+          throw new Error("context.columnType should expose type and object config");
+        }
+        if ("value" in context || "valueType" in context) {
+          throw new Error("context should not expose value state");
+        }
+        if ("initialValue" in context || "initialValueKind" in context) {
+          throw new Error("context should not expose initial value state");
+        }
+
+        const control = new FakeElement("input");
+        control.name = "logo";
+        control.value = "df-old";
+        control.dataset.initialValue = "df-old";
+        control.dataset.initialValueKind = "string";
+        control.dataset.currentValueKind = "string";
+        control.dataset.useSqliteDefault = "1";
+        control.disabled = true;
+
+        const field = createColumnFieldApi({
+          id: "row-edit-field-0",
+          labelId: "row-edit-field-label-0",
+          descriptionId: "row-edit-field-meta-0",
+          control,
+          meta: new FakeElement("span"),
+          context,
+        });
+
+        let renderArgumentCount = null;
+        let renderField = null;
+        const wrapper = renderColumnField(
+          {
+            pluginName: "test-plugin",
+            render(field) {
+              renderArgumentCount = arguments.length;
+              renderField = field;
+              field.root.appendChild(document.createElement("button"));
+            },
+          },
+          field
+        );
+        if (renderArgumentCount !== 1 || renderField !== field) {
+          throw new Error("plugin render should receive the field object only");
+        }
+        if (field.root !== wrapper) {
+          throw new Error("field.root should be the plugin wrapper");
+        }
+
+        field.setValue(null);
+        if (field.getValue() !== null) {
+          throw new Error("field.setValue(null) should round-trip as null");
+        }
+        if (field.isUsingSqliteDefault()) {
+          throw new Error("field.setValue() should stop using the SQLite default");
+        }
+        if (control.dataset.currentValueKind !== "null") {
+          throw new Error("null values should update currentValueKind");
+        }
+
+        field.setValue("df-new");
+        if (field.getValue() !== "df-new") {
+          throw new Error("field.setValue() should update the current value");
+        }
+        if (field.getInitialValue() !== "df-old") {
+          throw new Error("field.getInitialValue() should remain stable");
+        }
+        if (!field.hasChanged()) {
+          throw new Error("field.hasChanged() should notice plugin value changes");
+        }
+        if (control.dispatchedEvents.join(",") !== "input,change,input,change") {
+          throw new Error(`Unexpected dispatched events: ${control.dispatchedEvents}`);
+        }
+        try {
+          field.setValue({ id: "df-object" });
+          throw new Error("field.setValue() should reject object values");
+        } catch (error) {
+          if (!String(error.message).includes("serialize objects")) {
+            throw error;
+          }
+        }
+
+        field.setValidity("Pick a file");
+        if (control.validationMessage !== "Pick a file") {
+          throw new Error("field.setValidity() should set custom validity");
+        }
+        if (control.getAttribute("aria-invalid") !== "true") {
+          throw new Error("field.setValidity() should set aria-invalid");
+        }
+        if (!field.validationMessageElement || field.validationMessageElement.hidden) {
+          throw new Error("field.setValidity() should show a field validation message");
+        }
+        field.clearValidity();
+        if (control.validationMessage !== "" || control.getAttribute("aria-invalid") !== null) {
+          throw new Error("field.clearValidity() should clear custom validity");
+        }
+
+        field.useSqliteDefault();
+        if (!field.isUsingSqliteDefault() || !control.disabled) {
+          throw new Error("field.useSqliteDefault() should mark and disable control");
+        }
+
+        process.stdout.write("ok");
+    """).replace("__TABLE_JS__", json.dumps(str(STATIC_DIR / "table.js")))
+    result = subprocess.run(
+        ["node", "-e", script],
+        text=True,
+        capture_output=True,
+        check=False,
+    )
+    assert result.returncode == 0, result.stderr
+    assert result.stdout == "ok"
+
+
+def test_builtin_json_column_field_validation():
+    script = textwrap.dedent("""
+        const fs = require("fs");
+        const vm = require("vm");
+        const tableJs = __TABLE_JS__;
+
+        class FakeEvent {
+          constructor(type, options) {
+            this.type = type;
+            this.bubbles = !!(options && options.bubbles);
+          }
+        }
+
+        class FakeElement {
+          constructor(tagName = "div") {
+            this.nodeName = tagName.toUpperCase();
+            this.nodeType = 1;
+            this.children = [];
+            this.dataset = {};
+            this.attributes = {};
+            this.value = "";
+            this.name = "";
+            this.disabled = false;
+            this.hidden = false;
+            this.textContent = "";
+            this.validationMessage = "";
+            this.eventListeners = {};
+            this.className = "";
+          }
+          appendChild(child) {
+            this.children.push(child);
+            child.parentNode = this;
+            return child;
+          }
+          addEventListener(type, callback) {
+            this.eventListeners[type] = this.eventListeners[type] || [];
+            this.eventListeners[type].push(callback);
+          }
+          dispatchEvent(event) {
+            event.target = event.target || this;
+            for (const callback of this.eventListeners[event.type] || []) {
+              callback(event);
+            }
+            return true;
+          }
+          setAttribute(name, value) {
+            this.attributes[name] = String(value);
+          }
+          getAttribute(name) {
+            return this.attributes[name] || null;
+          }
+          removeAttribute(name) {
+            delete this.attributes[name];
+          }
+          setCustomValidity(message) {
+            this.validationMessage = message;
+          }
+        }
+
+        global.Event = FakeEvent;
+        global.document = {
+          addEventListener() {},
+          createElement(tagName) {
+            return new FakeElement(tagName);
+          },
+          createTextNode(text) {
+            const node = new FakeElement("#text");
+            node.textContent = text;
+            return node;
+          },
+        };
+        global.location = {
+          href: "http://localhost/data/projects",
+          pathname: "/data/projects",
+          search: "",
+        };
+        global.window = {
+          _datasetteTableData: {
+            database: "data",
+            table: "projects",
+            tableUrl: "/data/projects",
+          },
+        };
+
+        vm.runInThisContext(fs.readFileSync(tableJs, "utf8"), {
+          filename: "table.js",
+        });
+
+        const plugins = [];
+        registerBuiltinColumnFieldPlugins({
+          registerPlugin(name, plugin) {
+            plugins.push({ name, plugin });
+          },
+        });
+        const jsonPlugin = plugins.find((entry) => entry.name === "datasette-json-column");
+        if (!jsonPlugin) {
+          throw new Error("datasette-json-column plugin was not registered");
+        }
+        const pluginControl = jsonPlugin.plugin.makeColumnField({
+          column: "metadata",
+          columnType: { type: "json", config: {} },
+        });
+        if (!pluginControl || pluginControl.inputType !== "textarea") {
+          throw new Error("JSON column plugin should request a textarea");
+        }
+
+        const context = columnFormControlContext(
+          "metadata",
+          '{"ok": true}',
+          false,
+          { type: "json", config: {} },
+          { mode: "edit" }
+        );
+        const control = new FakeElement("textarea");
+        control.name = "metadata";
+        control.value = '{"ok": true}';
+        control.dataset.initialValue = '{"ok": true}';
+        control.dataset.initialValueKind = "string";
+        control.dataset.currentValueKind = "string";
+        const meta = new FakeElement("span");
+
+        const field = createColumnFieldApi({
+          id: "row-edit-field-0",
+          labelId: "row-edit-field-label-0",
+          descriptionId: "row-edit-field-meta-0",
+          control,
+          meta,
+          context,
+        });
+        renderColumnField(
+          Object.assign({ pluginName: "datasette-json-column" }, pluginControl),
+          field
+        );
+
+        if (control.validationMessage !== "") {
+          throw new Error("Initial valid JSON should not be invalid");
+        }
+        if (control.dataset.initialValueKind !== "string") {
+          throw new Error("JSON plugin should keep the original string value kind");
+        }
+        if (control.dataset.currentValueKind !== "string") {
+          throw new Error("JSON plugin should keep the current string value kind");
+        }
+        if (!field.validationMessageElement || field.validationMessageElement.hidden !== true) {
+          throw new Error("JSON validation message should start hidden");
+        }
+
+        control.value = "{";
+        control.dispatchEvent(new Event("input", { bubbles: true }));
+        if (!control.validationMessage.startsWith("Invalid JSON")) {
+          throw new Error("Invalid JSON should set a custom validity message");
+        }
+        if (control.getAttribute("aria-invalid") !== "true") {
+          throw new Error("Invalid JSON should set aria-invalid");
+        }
+        if (field.validationMessageElement.hidden) {
+          throw new Error("Invalid JSON should show the validation message");
+        }
+
+        control.value = '{"ok": true}';
+        control.dispatchEvent(new Event("input", { bubbles: true }));
+        if (control.validationMessage !== "") {
+          throw new Error("Valid JSON should clear the custom validity message");
+        }
+        if (control.getAttribute("aria-invalid") !== null) {
+          throw new Error("Valid JSON should clear aria-invalid");
+        }
+        if (!field.validationMessageElement.hidden) {
+          throw new Error("Valid JSON should hide the validation message");
+        }
+
+        control.dataset.initialValue = '{"ok":';
+        control.value = '{"ok": true}';
+        const values = collectRowFormValues({
+          mode: "edit",
+          fields: {
+            querySelectorAll() {
+              return [control];
+            },
+          },
+        });
+        if (values.metadata !== '{"ok": true}') {
+          throw new Error("Corrected JSON should be submitted as a string value");
+        }
+
+        process.stdout.write("ok");
+    """).replace("__TABLE_JS__", json.dumps(str(STATIC_DIR / "table.js")))
+    result = subprocess.run(
+        ["node", "-e", script],
+        text=True,
+        capture_output=True,
+        check=False,
+    )
+    assert result.returncode == 0, result.stderr
+    assert result.stdout == "ok"
diff --git a/tests/test_table_html.py b/tests/test_table_html.py
index a1510aeb..023e7c4c 100644
--- a/tests/test_table_html.py
+++ b/tests/test_table_html.py
@@ -990,14 +990,18 @@ async def test_table_insert_action_button_and_data():
         ]
         name, score, created, body = insert_data["columns"]
         assert name["notnull"] == 1
-        assert name["value_type"] == "string"
+        assert name["sqlite_type"] == "TEXT"
+        assert name["value_kind"] == "string"
         assert not name["has_default"]
         assert score["default"] == "5"
         assert score["has_default"]
-        assert score["value_type"] == "number"
+        assert score["sqlite_type"] == "INTEGER"
+        assert score["value_kind"] == "number"
         assert created["default"] == "datetime('now')"
         assert created["has_default"]
-        assert body["value_type"] == "string"
+        assert created["sqlite_type"] == "TEXT"
+        assert body["sqlite_type"] == "TEXT"
+        assert body["value_kind"] == "string"
         assert body["column_type"] == {"type": "textarea", "config": None}
     finally:
         ds.close()

From c083e44561cbc227b489e31b95e79c8cc72745b6 Mon Sep 17 00:00:00 2001
From: Simon Willison <swillison@gmail.com>
Date: Sun, 14 Jun 2026 14:21:04 -0700
Subject: [PATCH 19/23] Ignore .playwright-mcp

Codex Desktop likes using this folder.
---
 .gitignore | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 12acd87e..8c058692 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,8 @@
 build-metadata.json
 datasets.json
 
+.playwright-mcp
+
 scratchpad
 
 .vscode
@@ -131,4 +133,4 @@ tests/*.dylib
 tests/*.so
 tests/*.dll
 
-.idea
\ No newline at end of file
+.idea

From 3f7d389caf72081cb7d6d5c6b25e9a19068e744e Mon Sep 17 00:00:00 2001
From: Simon Willison <swillison@gmail.com>
Date: Sun, 14 Jun 2026 15:00:07 -0700
Subject: [PATCH 20/23] Refine column field plugin API and documentation

- Simplify JavaScript column field context:
  - expose `isPk` instead of `isPrimaryKey`
  - expose `defaultExpression` instead of separate SQLite default flags
  - remove value/default state from plugin context
- Update field helper behavior:
  - `setValue()` no longer dispatches input/change events
  - remove dispatch options and `resetValue()`
  - add `markClean()` for plugin-normalized initial values
  - track clean field state for reliable dirty detection

Also:

- Prompt before closing row insert/edit dialogs when there are unsaved changes
- Map declared SQLite types to affinities, returning `BLOB` for typeless columns and `NUMERIC` for numeric/date/boolean-like declarations
---
 datasette/column_types.py          |  12 +-
 datasette/static/table.js          | 256 ++++++++++++++++++-----------
 docs/javascript_plugins.rst        | 149 +++++------------
 tests/test_column_types.py         |   9 +-
 tests/test_datasette_manager_js.py | 196 +++++++++++++++++++---
 tests/test_table_html.py           |  12 +-
 6 files changed, 391 insertions(+), 243 deletions(-)

diff --git a/datasette/column_types.py b/datasette/column_types.py
index 7320e1d6..11a14ec0 100644
--- a/datasette/column_types.py
+++ b/datasette/column_types.py
@@ -6,19 +6,17 @@ class SQLiteType(Enum):
     INTEGER = "INTEGER"
     REAL = "REAL"
     BLOB = "BLOB"
-    NULL = "NULL"
+    NUMERIC = "NUMERIC"
 
     @classmethod
-    def from_declared_type(cls, declared_type: str | None) -> "SQLiteType | None":
+    def from_declared_type(cls, declared_type: str | None) -> "SQLiteType":
         if declared_type is None:
-            return cls.NULL
+            return cls.BLOB
 
         normalized = declared_type.strip().upper()
         if not normalized:
-            return cls.NULL
+            return cls.BLOB
 
-        if normalized == cls.NULL.value:
-            return cls.NULL
         if "INT" in normalized:
             return cls.INTEGER
         if any(token in normalized for token in ("CHAR", "CLOB", "TEXT")):
@@ -31,7 +29,7 @@ class SQLiteType(Enum):
         ):
             return cls.REAL
 
-        return None
+        return cls.NUMERIC
 
 
 class ColumnType:
diff --git a/datasette/static/table.js b/datasette/static/table.js
index 79ed45b9..291afc95 100644
--- a/datasette/static/table.js
+++ b/datasette/static/table.js
@@ -993,12 +993,16 @@ function columnTypeForContext(columnType) {
   };
 }
 
-function columnFormControlContext(column, value, isPk, columnType, options) {
+function defaultExpressionForContext(expression) {
+  if (expression === null || typeof expression === "undefined") {
+    return null;
+  }
+  return expression;
+}
+
+function columnFormControlContext(column, isPk, columnType, options) {
   var pageData = tablePageData();
-  var hasSqliteDefault =
-    options.hasSqliteDefault ||
-    (options.sqliteDefaultExpression !== null &&
-      typeof options.sqliteDefaultExpression !== "undefined");
+  var defaultExpression = defaultExpressionForContext(options.defaultExpression);
   return {
     mode: options.mode || "edit",
     database: pageData.database || null,
@@ -1008,12 +1012,8 @@ function columnFormControlContext(column, value, isPk, columnType, options) {
     columnType: columnTypeForContext(columnType),
     sqliteType: options.sqliteType || null,
     notNull: !!options.notnull,
-    isPrimaryKey: !!isPk,
-    hasSqliteDefault: !!hasSqliteDefault,
-    sqliteDefaultExpression: options.sqliteDefaultExpression,
-    useSqliteDefaultInitially: !!(
-      hasSqliteDefault && options.useSqliteDefaultInitially
-    ),
+    isPk: !!isPk,
+    defaultExpression: defaultExpression,
     form: options.form || null,
     dialog: options.dialog || null,
   };
@@ -1044,8 +1044,7 @@ function createColumnFieldApi(options) {
     getValue: function () {
       return valueFromRowEditControl(control);
     },
-    setValue: function (value, setOptions) {
-      setOptions = setOptions || {};
+    setValue: function (value) {
       if (
         value !== null &&
         typeof value !== "undefined" &&
@@ -1055,53 +1054,27 @@ function createColumnFieldApi(options) {
           "field.setValue() accepts strings, numbers, booleans or null; serialize objects before setting the field value",
         );
       }
-      field.stopUsingSqliteDefault({ dispatch: false });
+      field.stopUsingSqliteDefault();
       control.value = valueToEditText(value);
       control.dataset.currentValueKind = rowEditValueKind(value);
-      if (setOptions.dispatch !== false) {
-        field.dispatchChange();
-      }
     },
     getInitialValue: function () {
       return initialValueFromRowEditControl(control);
     },
     hasChanged: function () {
-      if (field.isUsingSqliteDefault()) {
-        return !context.useSqliteDefaultInitially;
-      }
-      if (
-        control.value === (control.dataset.initialValue || "") &&
-        (control.dataset.currentValueKind ||
-          control.dataset.initialValueKind ||
-          "string") === (control.dataset.initialValueKind || "string")
-      ) {
-        return false;
-      }
-      try {
-        return !rowEditValuesMatch(field.getValue(), field.getInitialValue());
-      } catch (_error) {
-        return true;
-      }
+      return rowEditControlHasChanged(control);
     },
-    clearValue: function (clearOptions) {
-      field.setValue(null, clearOptions);
-    },
-    resetValue: function (resetOptions) {
-      resetOptions = resetOptions || {};
-      field.stopUsingSqliteDefault({ dispatch: false });
-      control.value = control.dataset.initialValue || "";
-      control.dataset.currentValueKind =
-        control.dataset.initialValueKind || "string";
-      if (resetOptions.dispatch !== false) {
-        field.dispatchChange();
-      }
+    clearValue: function () {
+      field.setValue(null);
     },
     isUsingSqliteDefault: function () {
       return control.dataset.useSqliteDefault === "1";
     },
-    useSqliteDefault: function (defaultOptions) {
-      defaultOptions = defaultOptions || {};
-      if (!context.hasSqliteDefault) {
+    useSqliteDefault: function () {
+      if (
+        context.defaultExpression === null ||
+        typeof context.defaultExpression === "undefined"
+      ) {
         return;
       }
       control.dataset.useSqliteDefault = "1";
@@ -1109,26 +1082,18 @@ function createColumnFieldApi(options) {
       control.value = "";
       control.dataset.currentValueKind = "null";
       field.syncSqliteDefaultUi();
-      if (defaultOptions.dispatch !== false) {
-        field.dispatchChange();
-      }
     },
-    stopUsingSqliteDefault: function (defaultOptions) {
-      defaultOptions = defaultOptions || {};
+    stopUsingSqliteDefault: function () {
       if (control.dataset.useSqliteDefault !== "1") {
         return;
       }
       control.dataset.useSqliteDefault = "0";
       control.disabled = false;
       field.syncSqliteDefaultUi();
-      if (defaultOptions.dispatch !== false) {
-        field.dispatchChange();
-      }
     },
     syncSqliteDefaultUi: function () {},
-    dispatchChange: function () {
-      control.dispatchEvent(new Event("input", { bubbles: true }));
-      control.dispatchEvent(new Event("change", { bubbles: true }));
+    markClean: function () {
+      markRowEditControlClean(control);
     },
     setValidity: function (message) {
       message = message || "";
@@ -1148,6 +1113,7 @@ function createColumnFieldApi(options) {
       field.setValidity("");
     },
   };
+  field.markClean();
   return field;
 }
 
@@ -1220,10 +1186,10 @@ function registerBuiltinColumnFieldPlugins(manager) {
     version: "1.0",
     makeColumnField: function (context) {
       if (!context.columnType || context.columnType.type !== "json") {
-        return null;
+        return;
       }
       return {
-        inputType: "textarea",
+        useTextarea: true,
         render: function (field) {
           field.input.addEventListener("input", function () {
             validateJsonColumnField(field);
@@ -1232,7 +1198,7 @@ function registerBuiltinColumnFieldPlugins(manager) {
             validateJsonColumnField(field);
           });
           validateJsonColumnField(field);
-          field.root.appendChild(field.input);
+          return field.input;
         },
         focus: function (field) {
           field.input.focus();
@@ -1305,12 +1271,9 @@ function createRowEditField(column, value, isPk, columnType, index, options) {
   options = options || {};
   var field = document.createElement("div");
   field.className = "row-edit-field";
-  var hasSqliteDefault =
-    options.hasSqliteDefault ||
-    (options.sqliteDefaultExpression !== null &&
-      typeof options.sqliteDefaultExpression !== "undefined");
-  var useSqliteDefaultInitially =
-    hasSqliteDefault && options.useSqliteDefaultInitially;
+  var defaultExpression = defaultExpressionForContext(options.defaultExpression);
+  var hasDefaultExpression = defaultExpression !== null;
+  var useSqliteDefault = hasDefaultExpression && options.useSqliteDefault;
 
   var fieldId = "row-edit-field-" + index;
   var metaId = "row-edit-field-meta-" + index;
@@ -1326,14 +1289,15 @@ function createRowEditField(column, value, isPk, columnType, index, options) {
 
   var context = columnFormControlContext(
     column,
-    value,
     isPk,
     columnType,
     options,
   );
   var pluginControl = makeColumnField(options.manager, context);
-  var preferredControl = pluginControl && pluginControl.inputType;
-  var control = (preferredControl === "textarea" || shouldUseTextarea(value, columnType))
+  var useTextarea =
+    (pluginControl && pluginControl.useTextarea === true) ||
+    shouldUseTextarea(value, columnType);
+  var control = useTextarea
     ? document.createElement("textarea")
     : document.createElement("input");
   control.className = "row-edit-input";
@@ -1346,10 +1310,10 @@ function createRowEditField(column, value, isPk, columnType, index, options) {
     options.valueKind || rowEditValueKind(value);
   control.dataset.primaryKey = isPk ? "1" : "0";
   control.dataset.currentValueKind = control.dataset.initialValueKind;
-  if (hasSqliteDefault) {
-    control.dataset.useSqliteDefault = useSqliteDefaultInitially ? "1" : "0";
+  if (hasDefaultExpression) {
+    control.dataset.useSqliteDefault = useSqliteDefault ? "1" : "0";
   }
-  if (useSqliteDefaultInitially) {
+  if (useSqliteDefault) {
     control.disabled = true;
   }
   if (options.omitIfBlank) {
@@ -1380,8 +1344,8 @@ function createRowEditField(column, value, isPk, columnType, index, options) {
   if (options.notnull) {
     metaParts.push("Required");
   }
-  if (hasSqliteDefault && !useSqliteDefaultInitially) {
-    metaParts.push("SQLite default: " + options.sqliteDefaultExpression);
+  if (hasDefaultExpression && !useSqliteDefault) {
+    metaParts.push("SQLite default: " + defaultExpression);
   }
   if (value === null) {
     metaParts.push("Current value: NULL");
@@ -1427,6 +1391,7 @@ function createRowEditField(column, value, isPk, columnType, index, options) {
     dialog: options.dialog || null,
     context: context,
   });
+  field._datasetteColumnFormField = fieldApi;
   var pluginControlElement = renderColumnField(pluginControl, fieldApi);
   var controlElement =
     pluginControlElement || rowEditControlElement(control, options.autocompleteUrl);
@@ -1447,7 +1412,7 @@ function createRowEditField(column, value, isPk, columnType, index, options) {
     resolveForeignKeyMetaLink(control, options.autocompleteUrl, meta);
   }
 
-  if (hasSqliteDefault) {
+  if (hasDefaultExpression) {
     var defaultBlock = document.createElement("div");
     defaultBlock.className = "row-edit-default";
     defaultBlock.setAttribute("aria-describedby", metaId);
@@ -1457,7 +1422,7 @@ function createRowEditField(column, value, isPk, columnType, index, options) {
     defaultText.appendChild(document.createTextNode("default "));
     var defaultCode = document.createElement("code");
     defaultCode.className = "row-edit-default-code";
-    defaultCode.textContent = options.sqliteDefaultExpression;
+    defaultCode.textContent = defaultExpression;
     defaultText.appendChild(defaultCode);
 
     var setValueButton = document.createElement("button");
@@ -1551,9 +1516,7 @@ function valueFromRowEditControl(control) {
   return valueFromRowEditText(
     control.name,
     value,
-    control.dataset.currentValueKind ||
-      control.dataset.initialValueKind ||
-      "string",
+    rowEditControlValueKind(control),
   );
 }
 
@@ -1593,6 +1556,56 @@ function initialValueFromRowEditControl(control) {
   );
 }
 
+function rowEditControlValueKind(control) {
+  return (
+    control.dataset.currentValueKind ||
+    control.dataset.initialValueKind ||
+    "string"
+  );
+}
+
+function rowEditControlCleanValue(control) {
+  if (Object.prototype.hasOwnProperty.call(control.dataset, "cleanValue")) {
+    return control.dataset.cleanValue;
+  }
+  return control.dataset.initialValue || "";
+}
+
+function rowEditControlCleanValueKind(control) {
+  return (
+    control.dataset.cleanValueKind ||
+    control.dataset.initialValueKind ||
+    "string"
+  );
+}
+
+function rowEditControlCleanUsesSqliteDefault(control) {
+  if (
+    Object.prototype.hasOwnProperty.call(
+      control.dataset,
+      "cleanUseSqliteDefault",
+    )
+  ) {
+    return control.dataset.cleanUseSqliteDefault === "1";
+  }
+  return false;
+}
+
+function markRowEditControlClean(control) {
+  control.dataset.cleanValue = control.value;
+  control.dataset.cleanValueKind = rowEditControlValueKind(control);
+  control.dataset.cleanUseSqliteDefault =
+    control.dataset.useSqliteDefault === "1" ? "1" : "0";
+}
+
+function cleanValueFromRowEditControl(control) {
+  return valueFromRowEditText(
+    control.name,
+    rowEditControlCleanValue(control),
+    rowEditControlCleanValueKind(control),
+  );
+}
+
 function rowEditValuesMatch(left, right) {
   if (left === right) {
     return true;
@@ -1608,6 +1621,28 @@ function rowEditValuesMatch(left, right) {
   return false;
 }
 
+function rowEditControlHasChanged(control) {
+  var usingSqliteDefault = control.dataset.useSqliteDefault === "1";
+  var cleanUsesSqliteDefault = rowEditControlCleanUsesSqliteDefault(control);
+  if (usingSqliteDefault || cleanUsesSqliteDefault) {
+    return usingSqliteDefault !== cleanUsesSqliteDefault;
+  }
+  if (
+    control.value === rowEditControlCleanValue(control) &&
+    rowEditControlValueKind(control) === rowEditControlCleanValueKind(control)
+  ) {
+    return false;
+  }
+  try {
+    return !rowEditValuesMatch(
+      valueFromRowEditControl(control),
+      cleanValueFromRowEditControl(control),
+    );
+  } catch (_error) {
+    return true;
+  }
+}
+
 function collectRowFormValues(state) {
   var values = {};
   state.fields.querySelectorAll(".row-edit-input").forEach(function (control) {
@@ -1648,6 +1683,43 @@ function collectRowFormValues(state) {
   return values;
 }
 
+function rowEditDialogHasChanges(state) {
+  if (!state || !state.hasLoaded || state.isLoading) {
+    return false;
+  }
+  var fields = state.fields.querySelectorAll(".row-edit-field");
+  for (var i = 0; i < fields.length; i += 1) {
+    var fieldApi = fields[i]._datasetteColumnFormField;
+    if (fieldApi && fieldApi.hasChanged && fieldApi.hasChanged()) {
+      return true;
+    }
+  }
+  return false;
+}
+
+function confirmDiscardRowEditChanges(state) {
+  if (!rowEditDialogHasChanges(state)) {
+    return true;
+  }
+  var message =
+    state.mode === "insert"
+      ? "Discard this new row?"
+      : "Discard unsaved changes to this row?";
+  return window.confirm(message);
+}
+
+function closeRowEditDialogIfConfirmed(state) {
+  if (!state || state.isSaving) {
+    return false;
+  }
+  if (!confirmDiscardRowEditChanges(state)) {
+    return false;
+  }
+  state.shouldRestoreFocus = true;
+  state.dialog.close();
+  return true;
+}
+
 function findDataRowElement(root, rowId) {
   var elements = root.querySelectorAll("[data-row]");
   for (var i = 0; i < elements.length; i += 1) {
@@ -1905,14 +1977,13 @@ function renderRowInsertFields(state, data) {
           autocompleteUrl: foreignKeyAutocompleteUrl(column.name),
           dialog: state.dialog,
           form: state.form,
-          hasSqliteDefault: column.has_default,
+          defaultExpression: column.default,
           manager: state.manager,
           mode: state.mode,
           notnull: column.notnull,
           primaryKeyReadonly: false,
-          sqliteDefaultExpression: column.default,
           sqliteType: column.sqlite_type,
-          useSqliteDefaultInitially: column.has_default,
+          useSqliteDefault: column.default !== null,
           valueKind: column.value_kind,
         },
       ),
@@ -2027,9 +2098,8 @@ function ensureRowEditDialog(manager) {
   });
 
   dialog.addEventListener("click", function (ev) {
-    if (ev.target === dialog && !rowEditDialogState.isSaving) {
-      rowEditDialogState.shouldRestoreFocus = true;
-      dialog.close();
+    if (ev.target === dialog) {
+      closeRowEditDialogIfConfirmed(rowEditDialogState);
     }
   });
 
@@ -2037,17 +2107,15 @@ function ensureRowEditDialog(manager) {
     if (ev.key !== "Escape") {
       return;
     }
-    if (rowEditDialogState.isSaving) {
-      ev.preventDefault();
-      return;
-    }
     ev.preventDefault();
-    rowEditDialogState.shouldRestoreFocus = true;
-    dialog.close();
+    closeRowEditDialogIfConfirmed(rowEditDialogState);
   });
 
   dialog.addEventListener("cancel", function (ev) {
-    if (rowEditDialogState.isSaving) {
+    if (
+      rowEditDialogState.isSaving ||
+      !confirmDiscardRowEditChanges(rowEditDialogState)
+    ) {
       ev.preventDefault();
     } else {
       rowEditDialogState.shouldRestoreFocus = true;
diff --git a/docs/javascript_plugins.rst b/docs/javascript_plugins.rst
index e1a889b4..4bc9b53c 100644
--- a/docs/javascript_plugins.rst
+++ b/docs/javascript_plugins.rst
@@ -200,11 +200,11 @@ This method, if present, can provide a custom form field for a column in Dataset
 
 It is designed for plugins that :ref:`register custom column types <plugin_register_column_types>` using the Python ``register_column_types()`` plugin hook. For example, a plugin that defines a ``file`` column type can use ``makeColumnField()`` to replace a plain text input with a file picker, and a plugin that defines a rich text column type can use it to enhance the field with an editor.
 
-Datasette calls ``makeColumnField(context)`` on each registered JavaScript plugin when it renders an editable insert/edit field. Plugins should inspect the ``context`` object and return ``null`` or ``undefined`` for fields they do not handle.
+Datasette calls ``makeColumnField(context)`` on each registered JavaScript plugin when it renders an editable insert/edit field. Plugins should inspect the ``context`` object and only return a control object if they can handle that field. Otherwise, use a bare ``return;``.
 
 The first plugin to return a truthy control object is used for that field. Plugins are called in registration order. If a plugin raises an exception, Datasette logs the error to the browser console and continues to the next plugin.
 
-Datasette owns the value that will be submitted to the insert/update API. The ``context`` object describes the column and form environment; custom controls should read and write field values using the ``field`` helper object passed to ``render(field)``.
+The row dialog tracks the value that will be sent to the insert/update API. The ``context`` object describes the column and form environment; custom controls should read and write field values using the ``field`` helper object passed to ``render(field)``.
 
 Context object
 ^^^^^^^^^^^^^^
@@ -237,25 +237,17 @@ Context object
     ``config`` - object
         Configuration for this specific column type assignment. This is ``{}`` if no configuration has been set.
 
-    Plugins should generally check ``context.columnType && context.columnType.type`` before deciding whether to handle a field.
-
 ``sqliteType`` - string or null
-    The normalized SQLite type for this column, if known. This is one of ``"TEXT"``, ``"INTEGER"``, ``"REAL"``, ``"BLOB"``, ``"NULL"`` or ``null`` if Datasette could not determine the type.
+    The SQLite affinity for this column, if known. This is one of ``"TEXT"``, ``"INTEGER"``, ``"REAL"``, ``"BLOB"``, ``"NUMERIC"`` or ``null`` if Datasette could not determine the affinity.
 
 ``notNull`` - boolean
     True if the column is defined as ``NOT NULL``.
 
-``isPrimaryKey`` - boolean
+``isPk`` - boolean
     True if this column is part of the table's primary key.
 
-``hasSqliteDefault`` - boolean
-    True if the column has a SQLite default value and the insert form can offer the "use default" behavior.
-
-``sqliteDefaultExpression``
-    The SQLite default expression for the column, if available. This is the expression from the table schema, not the actual value SQLite will insert.
-
-``useSqliteDefaultInitially`` - boolean
-    True if the insert form should initially omit this column so SQLite uses the column default.
+``defaultExpression`` - string or null
+    The SQLite default expression for the column, if available. This is ``null`` if the column has no SQLite default. For example, a column defined with ``DEFAULT (datetime('now'))`` will have ``"datetime('now')"`` here. This is the expression from the table schema, not the actual value SQLite will insert.
 
 ``form`` - ``HTMLFormElement`` or null
     The row insert/edit form element.
@@ -268,13 +260,13 @@ Returned control object
 
 A plugin that wants to handle a field should return an object. Datasette currently recognizes these properties:
 
-``inputType`` - string, optional
-    If set to ``"textarea"``, Datasette creates a ``<textarea>`` as the underlying ``field.input`` before calling ``render()``. Any other value is ignored.
+``useTextarea`` - boolean, optional
+    If true, Datasette creates a ``<textarea>`` as the underlying ``field.input`` before calling ``render()``. If omitted, Datasette chooses either an ``<input>`` or ``<textarea>`` based on the column type and current value.
 
 ``render(field)`` - function
     Called once to render the custom field UI. ``field`` is a helper object described below.
 
-    The plugin should append its UI to ``field.root``. If ``render()`` returns a DOM node, Datasette appends that returned node to ``field.root``.
+    The recommended pattern is to return a DOM node from ``render()``. Datasette appends that node to ``field.root``, a ``<div>`` inside the control area for that field in the row insert/edit dialog. A plugin can alternatively manipulate ``field.root`` directly and return nothing.
 
 ``focus(field)`` - function, optional
     Called when Datasette wants to focus this field, for example when focusing the first editable field in the dialog. Use this to focus the most useful interactive element inside the custom UI.
@@ -282,8 +274,6 @@ A plugin that wants to handle a field should return an object. Datasette current
 ``destroy(field)`` - function, optional
     Called when Datasette tears down the insert/edit form. Use this to remove event listeners, close nested pickers, revoke object URLs, clear timers, or release other resources.
 
-Datasette adds a ``pluginName`` property to the control object internally, based on the name passed to ``registerPlugin()``.
-
 The field helper object
 ^^^^^^^^^^^^^^^^^^^^^^^
 
@@ -293,7 +283,7 @@ The ``field`` object passed to ``render(field)``, ``focus(field)`` and ``destroy
     The original context object passed to ``makeColumnField()``.
 
 ``id`` - string
-    The ID Datasette assigned to the underlying form control.
+    The ID Datasette assigned to ``field.input``, the backing ``<input>`` or ``<textarea>`` element.
 
 ``labelId`` - string
     The ID of the visible field label.
@@ -302,7 +292,7 @@ The ``field`` object passed to ``render(field)``, ``focus(field)`` and ``destroy
     The ID of the field metadata/help text. This metadata can include details such as ``Primary key``, ``Required``, ``Current value: NULL`` or ``Custom type: file``.
 
 ``root`` - ``HTMLElement``
-    The empty container element created by Datasette for this custom field. Plugins should append their UI to this element.
+    The empty ``<div>`` container created by Datasette for this custom field. It is inside the control area for the field in the row insert/edit dialog, next to the field label and above the field metadata. Datasette appends the DOM node returned by ``render(field)`` to this element. Plugins can alternatively manipulate this element directly and return nothing from ``render(field)``.
 
 ``input`` - ``HTMLInputElement`` or ``HTMLTextAreaElement``
     The core-owned backing form control. Plugins can keep this visible, wrap it or hide it, but should use the value helper methods below rather than mutating ``input.value`` directly.
@@ -320,12 +310,12 @@ The ``field`` object passed to ``render(field)``, ``focus(field)`` and ``destroy
     The containing modal dialog.
 
 ``getValue()`` - function
-    Returns the current value Datasette will submit for this field.
+    Returns the current value for this field.
 
     Datasette uses string values by default. Insert fields for ``"INTEGER"`` and ``"REAL"`` SQLite columns return numbers, or ``null`` if left blank. Plugins can use strings, numbers, booleans or ``null``. If a plugin is editing structured data stored in a SQLite ``TEXT`` column, such as JSON, it should serialize that data to a string before calling ``setValue()``.
 
-``setValue(value, options)`` - function
-    Sets the current value Datasette will submit for this field. ``value`` should be a string, number, boolean or ``null``. This also dispatches ``input`` and ``change`` events from the backing input. Pass ``{dispatch: false}`` as the second argument to skip those events.
+``setValue(value)`` - function
+    Sets the current value for this field. ``value`` should be a string, number, boolean or ``null``.
 
     Calling ``setValue()`` also stops using the SQLite default for the field, if it was previously selected.
 
@@ -333,26 +323,19 @@ The ``field`` object passed to ``render(field)``, ``focus(field)`` and ``destroy
     Returns the submitted-value representation the field had when the form was rendered. For edit forms this is the raw row value from the database. For insert forms this is the blank starting value.
 
 ``hasChanged()`` - function
-    Returns true if the field value differs from its initial value, or if the field's SQLite-default state has changed.
+    Returns true if the field has changed since Datasette last considered it unmodified. By default that means the field state when the insert/edit form was rendered.
 
-``clearValue(options)`` - function
-    Sets the value to ``null``. Accepts the same options as ``setValue()``.
+``clearValue()`` - function
+    Sets the value to ``null``.
 
-``resetValue(options)`` - function
-    Restores the initial field value. Accepts the same options as ``setValue()``.
+``markClean()`` - function
+    Tells Datasette to treat the field's current state as unmodified. After calling this method, ``hasChanged()`` returns false until the field value changes again or its SQLite-default state changes.
+
+    This is useful when a plugin rewrites the starting value into an equivalent representation while initializing its editor. For example, a rich text editor might normalize empty HTML or reserialize its initial document before the user has made any edits.
 
 ``isUsingSqliteDefault()`` - function
     Returns true if the insert dialog is currently set to omit this column and use the SQLite default.
 
-``useSqliteDefault(options)`` - function
-    Switches the field to use the SQLite default, if one exists. Accepts ``{dispatch: false}``.
-
-``stopUsingSqliteDefault(options)`` - function
-    Switches the field away from the SQLite default without changing the current field value. Accepts ``{dispatch: false}``.
-
-``dispatchChange()`` - function
-    Dispatches ``input`` and ``change`` events from the backing input.
-
 ``setValidity(message)`` - function
     Sets a custom validation message for this field, marks the backing input with ``aria-invalid="true"`` and shows the message in the field metadata area. Pass an empty string to clear the error.
 
@@ -362,16 +345,16 @@ The ``field`` object passed to ``render(field)``, ``focus(field)`` and ``destroy
 Submitted value contract
 ^^^^^^^^^^^^^^^^^^^^^^^^
 
-The field value contract is deliberately narrow. Datasette submits field values to the row insert/update JSON API, so a custom field value should be one of:
+The ``field.setValue()`` method accepts the following value types:
 
 * string
 * number
 * boolean
 * ``null``
 
-Plugins should not pass objects or arrays to ``field.setValue()``. If a column stores structured data in SQLite, such as JSON in a ``TEXT`` column, the plugin should serialize that data first and submit the serialized string. Client-side parsing can still be useful for validation or editor state, but the submitted value should match the SQLite value Datasette should write.
+These values are used as column values in requests to the :ref:`insert rows <TableInsertView>` and :ref:`update row <RowUpdateView>` JSON APIs.
 
-``field.input.dataset`` is reserved for Datasette's private form state. Plugins should not read from it, write to it, or use it to change how Datasette serializes values.
+Plugins should not pass objects or arrays to ``field.setValue()``. If a column stores structured data in SQLite, such as JSON in a ``TEXT`` column, the plugin should serialize that data first and submit the serialized string. Client-side parsing can still be useful for validation or editor state, but the submitted value should match the SQLite value Datasette should write.
 
 Value helpers
 ^^^^^^^^^^^^^
@@ -386,18 +369,16 @@ Custom fields should use ``field.getValue()`` and ``field.setValue(value)`` for
 
 Plugins can keep the core input visible, wrap it in a custom element, or hide it and provide a richer interface. If the input is hidden, the custom UI must still expose an accessible name, state and keyboard interaction.
 
-``field.setValue()`` updates the backing input and Datasette's private value serialization state.
+``field.setValue()`` updates both ``field.input`` and the value used in the insert/update request.
 
-For insert forms with a SQLite default, ``field.isUsingSqliteDefault()`` indicates whether Datasette will omit that column from the insert payload. Calling ``field.setValue(value)`` automatically stops using the SQLite default. A plugin can also expose explicit controls that call ``field.useSqliteDefault()`` and ``field.stopUsingSqliteDefault()``.
-
-Datasette's built-in ``json`` column type is implemented using this same JavaScript plugin hook. Datasette registers a small textarea-backed control for fields where ``context.columnType.type === "json"``; that control validates the field as JSON while the value changes and marks it visibly invalid if parsing fails. The submitted value remains the textarea string. The generic field API does not special-case custom column types.
-
-For example, a file picker can store a file ID string or ``null`` without modifying the backing input directly:
+For example, a file picker that stores a selected file ID can hide the backing input and call ``field.setValue()`` when the selection changes:
 
 .. code-block:: javascript
 
     field.input.type = "hidden";
-    field.setValue(fileId || null);
+    field.setValue(fileId);
+
+For insert forms with a SQLite default, ``field.isUsingSqliteDefault()`` indicates whether Datasette will omit that column from the insert payload. Calling ``field.setValue(value)`` automatically stops using the SQLite default.
 
 Lazy loading large controls
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^
@@ -414,15 +395,15 @@ The JavaScript file that registers ``makeColumnField()`` should be small. If the
 
         makeColumnField(context) {
           if (!context.columnType || context.columnType.type !== "my-editor") {
-            return null;
+            return;
           }
           return {
-            inputType: "textarea",
+            useTextarea: true,
             render(field) {
-              field.root.appendChild(field.input);
               import(editorUrl).then(function () {
                 // Enhance field.input here.
               });
+              return field.input;
             }
           };
         }
@@ -432,7 +413,7 @@ The JavaScript file that registers ``makeColumnField()`` should be small. If the
 Example: textarea-backed custom element
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
-This example handles a ``markdown-editor`` column type by asking Datasette for a textarea and wrapping that textarea in a custom element:
+This example handles a ``markdown-editor`` column type by asking Datasette for a textarea and wrapping that textarea in a custom ``<my-markdown-editor>`` Web Component element:
 
 .. code-block:: javascript
 
@@ -442,16 +423,15 @@ This example handles a ``markdown-editor`` column type by asking Datasette for a
 
         makeColumnField(context) {
           if (!context.columnType || context.columnType.type !== "markdown-editor") {
-            return null;
+            return;
           }
 
           return {
-            inputType: "textarea",
+            useTextarea: true,
 
             render(field) {
               const editor = document.createElement("my-markdown-editor");
               editor.appendChild(field.input);
-              field.root.appendChild(editor);
 
               if (field.labelId) {
                 field.input.setAttribute("aria-labelledby", field.labelId);
@@ -459,6 +439,8 @@ This example handles a ``markdown-editor`` column type by asking Datasette for a
               if (field.descriptionId) {
                 field.input.setAttribute("aria-describedby", field.descriptionId);
               }
+
+              return editor;
             },
 
             focus(field) {
@@ -474,63 +456,6 @@ This example handles a ``markdown-editor`` column type by asking Datasette for a
       });
     });
 
-Example: hidden input with custom picker
-^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-
-This example handles an ``asset`` column type by hiding the core input and writing an asset ID into it when the user selects an item:
-
-.. code-block:: javascript
-
-    document.addEventListener("datasette_init", function (event) {
-      event.detail.registerPlugin("asset-picker", {
-        version: "0.1",
-
-        makeColumnField(context) {
-          if (!context.columnType || context.columnType.type !== "asset") {
-            return null;
-          }
-
-          return {
-            render(field) {
-              field.input.type = "hidden";
-
-              const group = document.createElement("div");
-              group.setAttribute("role", "group");
-              group.setAttribute("aria-labelledby", field.labelId);
-              group.setAttribute("aria-describedby", field.descriptionId);
-
-              const current = document.createElement("span");
-              current.textContent = field.getValue() || "No asset selected";
-
-              const button = document.createElement("button");
-              button.type = "button";
-              button.textContent = "Choose asset";
-              button.addEventListener("click", async function () {
-                const assetId = await chooseAsset();
-                if (assetId === null) {
-                  return;
-                }
-                field.setValue(assetId || null);
-                current.textContent = assetId || "No asset selected";
-              });
-
-              group.appendChild(current);
-              group.appendChild(button);
-              field.root.appendChild(field.input);
-              field.root.appendChild(group);
-            },
-
-            focus(field) {
-              const button = field.root.querySelector("button");
-              if (button) {
-                button.focus();
-              }
-            }
-          };
-        }
-      });
-    });
-
 Accessibility
 ^^^^^^^^^^^^^
 
diff --git a/tests/test_column_types.py b/tests/test_column_types.py
index 0c6b0dd4..45a9e7d1 100644
--- a/tests/test_column_types.py
+++ b/tests/test_column_types.py
@@ -518,13 +518,18 @@ async def test_column_type_class_attributes(ds_ct):
 
 
 def test_sqlite_type_from_declared_type():
+    assert SQLiteType.from_declared_type(None) == SQLiteType.BLOB
     assert SQLiteType.from_declared_type("text") == SQLiteType.TEXT
     assert SQLiteType.from_declared_type("varchar(255)") == SQLiteType.TEXT
     assert SQLiteType.from_declared_type("integer") == SQLiteType.INTEGER
     assert SQLiteType.from_declared_type("float") == SQLiteType.REAL
     assert SQLiteType.from_declared_type("blob") == SQLiteType.BLOB
-    assert SQLiteType.from_declared_type("") == SQLiteType.NULL
-    assert SQLiteType.from_declared_type("numeric") is None
+    assert SQLiteType.from_declared_type("") == SQLiteType.BLOB
+    assert SQLiteType.from_declared_type("numeric") == SQLiteType.NUMERIC
+    assert SQLiteType.from_declared_type("decimal(10,5)") == SQLiteType.NUMERIC
+    assert SQLiteType.from_declared_type("boolean") == SQLiteType.NUMERIC
+    assert SQLiteType.from_declared_type("date") == SQLiteType.NUMERIC
+    assert SQLiteType.from_declared_type("null") == SQLiteType.NUMERIC
 
 
 # --- JSON API ---
diff --git a/tests/test_datasette_manager_js.py b/tests/test_datasette_manager_js.py
index 5e21b5bb..f32f2de0 100644
--- a/tests/test_datasette_manager_js.py
+++ b/tests/test_datasette_manager_js.py
@@ -42,15 +42,15 @@ def test_datasette_manager_make_column_field():
 
         window.__DATASETTE__.registerPlugin("declines", {
           makeColumnField() {
-            return null;
+            return;
           },
         });
         window.__DATASETTE__.registerPlugin("handles", {
           makeColumnField(context) {
             if (context.columnType.type !== "demo") {
-              return null;
+              return;
             }
-            return { inputType: "textarea" };
+            return { useTextarea: true };
           },
         });
 
@@ -72,7 +72,7 @@ def test_datasette_manager_make_column_field():
     assert result.returncode == 0, result.stderr
     assert json.loads(result.stdout) == {
         "pluginName": "handles",
-        "inputType": "textarea",
+        "useTextarea": True,
     }
 
 
@@ -186,33 +186,39 @@ def test_table_plugin_column_field_api():
 
         const context = columnFormControlContext(
           "logo",
-          "df-old",
-          false,
+          true,
           { type: "file", config: null },
           {
             mode: "edit",
-            hasSqliteDefault: true,
-            sqliteDefaultExpression: "lower(hex(randomblob(4)))",
-            useSqliteDefaultInitially: true,
+            defaultExpression: "lower(hex(randomblob(4)))",
+            useSqliteDefault: true,
           }
         );
-        if ("defaultValue" in context) {
-          throw new Error("context should not expose defaultValue");
+        const expectedContextKeys = [
+          "mode",
+          "database",
+          "table",
+          "tableUrl",
+          "column",
+          "columnType",
+          "sqliteType",
+          "notNull",
+          "isPk",
+          "defaultExpression",
+          "form",
+          "dialog",
+        ].join(",");
+        if (Object.keys(context).join(",") !== expectedContextKeys) {
+          throw new Error(`Unexpected context keys: ${Object.keys(context).join(",")}`);
         }
-        if (!context.hasSqliteDefault) {
-          throw new Error("context.hasSqliteDefault should be true");
-        }
-        if (context.sqliteDefaultExpression !== "lower(hex(randomblob(4)))") {
-          throw new Error("context.sqliteDefaultExpression was not set");
+        if (context.defaultExpression !== "lower(hex(randomblob(4)))") {
+          throw new Error("context.defaultExpression was not set");
         }
         if (JSON.stringify(context.columnType) !== '{"type":"file","config":{}}') {
           throw new Error("context.columnType should expose type and object config");
         }
-        if ("value" in context || "valueType" in context) {
-          throw new Error("context should not expose value state");
-        }
-        if ("initialValue" in context || "initialValueKind" in context) {
-          throw new Error("context should not expose initial value state");
+        if (!context.isPk) {
+          throw new Error("context.isPk should say whether the column is a primary key");
         }
 
         const control = new FakeElement("input");
@@ -241,7 +247,7 @@ def test_table_plugin_column_field_api():
             render(field) {
               renderArgumentCount = arguments.length;
               renderField = field;
-              field.root.appendChild(document.createElement("button"));
+              return document.createElement("button");
             },
           },
           field
@@ -252,6 +258,9 @@ def test_table_plugin_column_field_api():
         if (field.root !== wrapper) {
           throw new Error("field.root should be the plugin wrapper");
         }
+        if (wrapper.children.length !== 1 || wrapper.children[0].nodeName !== "BUTTON") {
+          throw new Error("plugin render should append returned DOM nodes to field.root");
+        }
 
         field.setValue(null);
         if (field.getValue() !== null) {
@@ -274,9 +283,145 @@ def test_table_plugin_column_field_api():
         if (!field.hasChanged()) {
           throw new Error("field.hasChanged() should notice plugin value changes");
         }
-        if (control.dispatchedEvents.join(",") !== "input,change,input,change") {
-          throw new Error(`Unexpected dispatched events: ${control.dispatchedEvents}`);
+        if (control.dispatchedEvents.length !== 0) {
+          throw new Error(`field.setValue() should not dispatch events: ${control.dispatchedEvents}`);
         }
+
+        const dirtyRowField = new FakeElement("div");
+        dirtyRowField._datasetteColumnFormField = field;
+        const dirtyState = {
+          hasLoaded: true,
+          isLoading: false,
+          isSaving: false,
+          mode: "edit",
+          fields: {
+            querySelectorAll(selector) {
+              return selector === ".row-edit-field" ? [dirtyRowField] : [];
+            },
+          },
+          dialog: {
+            closeCalled: false,
+            close() {
+              this.closeCalled = true;
+            },
+          },
+          shouldRestoreFocus: false,
+        };
+        const confirmMessages = [];
+        window.confirm = (message) => {
+          confirmMessages.push(message);
+          return false;
+        };
+        if (!rowEditDialogHasChanges(dirtyState)) {
+          throw new Error("row edit dialog should notice changed field values");
+        }
+        if (closeRowEditDialogIfConfirmed(dirtyState)) {
+          throw new Error("dirty row edit dialog should stay open when discard is rejected");
+        }
+        if (dirtyState.dialog.closeCalled) {
+          throw new Error("dirty row edit dialog should not close when discard is rejected");
+        }
+        if (confirmMessages[0] !== "Discard unsaved changes to this row?") {
+          throw new Error(`Unexpected discard confirmation: ${confirmMessages[0]}`);
+        }
+        dirtyState.mode = "insert";
+        window.confirm = (message) => {
+          confirmMessages.push(message);
+          return true;
+        };
+        if (!closeRowEditDialogIfConfirmed(dirtyState)) {
+          throw new Error("dirty row edit dialog should close when discard is confirmed");
+        }
+        if (!dirtyState.dialog.closeCalled || !dirtyState.shouldRestoreFocus) {
+          throw new Error("confirmed dirty row edit dialog should close and restore focus");
+        }
+        if (confirmMessages[1] !== "Discard this new row?") {
+          throw new Error(`Unexpected insert discard confirmation: ${confirmMessages[1]}`);
+        }
+
+        const cleanContext = columnFormControlContext(
+          "title",
+          false,
+          null,
+          { mode: "edit" }
+        );
+        if (cleanContext.defaultExpression !== null) {
+          throw new Error("context.defaultExpression should be null without a SQLite default");
+        }
+        const cleanControl = new FakeElement("input");
+        cleanControl.name = "title";
+        cleanControl.value = "clean";
+        cleanControl.dataset.initialValue = "clean";
+        cleanControl.dataset.initialValueKind = "string";
+        cleanControl.dataset.currentValueKind = "string";
+        const cleanField = createColumnFieldApi({
+          id: "row-edit-field-1",
+          labelId: "row-edit-field-label-1",
+          descriptionId: "row-edit-field-meta-1",
+          control: cleanControl,
+          meta: new FakeElement("span"),
+          context: cleanContext,
+        });
+        const cleanRowField = new FakeElement("div");
+        cleanRowField._datasetteColumnFormField = cleanField;
+        const cleanState = {
+          hasLoaded: true,
+          isLoading: false,
+          isSaving: false,
+          mode: "edit",
+          fields: {
+            querySelectorAll(selector) {
+              return selector === ".row-edit-field" ? [cleanRowField] : [];
+            },
+          },
+          dialog: {
+            closeCalled: false,
+            close() {
+              this.closeCalled = true;
+            },
+          },
+          shouldRestoreFocus: false,
+        };
+        confirmMessages.length = 0;
+        window.confirm = (message) => {
+          confirmMessages.push(message);
+          return false;
+        };
+        if (rowEditDialogHasChanges(cleanState)) {
+          throw new Error("row edit dialog should ignore unchanged field values");
+        }
+        if (!closeRowEditDialogIfConfirmed(cleanState)) {
+          throw new Error("clean row edit dialog should close without confirmation");
+        }
+        if (!cleanState.dialog.closeCalled || !cleanState.shouldRestoreFocus) {
+          throw new Error("clean row edit dialog should close and restore focus");
+        }
+        if (confirmMessages.length !== 0) {
+          throw new Error("clean row edit dialog should not ask for confirmation");
+        }
+
+        dirtyState.dialog.closeCalled = false;
+        dirtyState.shouldRestoreFocus = false;
+        confirmMessages.length = 0;
+        field.setValue("<p></p>");
+        field.markClean();
+        if (field.hasChanged()) {
+          throw new Error("field.markClean() should update the clean baseline");
+        }
+        if (rowEditDialogHasChanges(dirtyState)) {
+          throw new Error("row edit dialog should ignore clean plugin normalization");
+        }
+        if (!closeRowEditDialogIfConfirmed(dirtyState)) {
+          throw new Error("normalized row edit dialog should close without confirmation");
+        }
+        if (confirmMessages.length !== 0) {
+          throw new Error("normalized row edit dialog should not ask for confirmation");
+        }
+        field.setValue("<p>Hello</p>");
+        if (!field.hasChanged() || !rowEditDialogHasChanges(dirtyState)) {
+          throw new Error("later plugin value changes should still count as dirty");
+        }
+
         try {
           field.setValue({ id: "df-object" });
           throw new Error("field.setValue() should reject object values");
@@ -420,13 +565,12 @@ def test_builtin_json_column_field_validation():
           column: "metadata",
           columnType: { type: "json", config: {} },
         });
-        if (!pluginControl || pluginControl.inputType !== "textarea") {
+        if (!pluginControl || pluginControl.useTextarea !== true) {
           throw new Error("JSON column plugin should request a textarea");
         }
 
         const context = columnFormControlContext(
           "metadata",
-          '{"ok": true}',
           false,
           { type: "json", config: {} },
           { mode: "edit" }
diff --git a/tests/test_table_html.py b/tests/test_table_html.py
index 023e7c4c..b9936eab 100644
--- a/tests/test_table_html.py
+++ b/tests/test_table_html.py
@@ -962,8 +962,10 @@ async def test_table_insert_action_button_and_data():
                 id integer primary key,
                 name text not null,
                 score integer default 5,
+                price numeric,
                 created text default (datetime('now')),
-                body text
+                body text,
+                typeless
             );
             """)
         response = await ds.client.get("/data/items", actor={"id": "root"})
@@ -985,10 +987,12 @@ async def test_table_insert_action_button_and_data():
         assert [column["name"] for column in insert_data["columns"]] == [
             "name",
             "score",
+            "price",
             "created",
             "body",
+            "typeless",
         ]
-        name, score, created, body = insert_data["columns"]
+        name, score, price, created, body, typeless = insert_data["columns"]
         assert name["notnull"] == 1
         assert name["sqlite_type"] == "TEXT"
         assert name["value_kind"] == "string"
@@ -997,12 +1001,16 @@ async def test_table_insert_action_button_and_data():
         assert score["has_default"]
         assert score["sqlite_type"] == "INTEGER"
         assert score["value_kind"] == "number"
+        assert price["sqlite_type"] == "NUMERIC"
+        assert price["value_kind"] == "string"
         assert created["default"] == "datetime('now')"
         assert created["has_default"]
         assert created["sqlite_type"] == "TEXT"
         assert body["sqlite_type"] == "TEXT"
         assert body["value_kind"] == "string"
         assert body["column_type"] == {"type": "textarea", "config": None}
+        assert typeless["sqlite_type"] == "BLOB"
+        assert typeless["value_kind"] == "string"
     finally:
         ds.close()
 

From 4ce2888e79d4fdd5a6d5c4f949b70abac6f59e53 Mon Sep 17 00:00:00 2001
From: Simon Willison <swillison@gmail.com>
Date: Sun, 14 Jun 2026 15:58:37 -0700
Subject: [PATCH 21/23] Support for <button> items in action menus

Closes #2782

Animated demo: https://github.com/simonw/datasette/pull/2781#issuecomment-4703303274
---
 datasette/hookspecs.py                | 12 ++---
 datasette/static/app.css              | 20 +++++--
 datasette/templates/_action_menu.html | 18 +++++--
 docs/custom_templates.rst             |  8 +++
 docs/plugin_hooks.rst                 | 75 ++++++++++++++++++++++++++-
 tests/plugins/my_plugin.py            | 19 ++++++-
 tests/test_plugins.py                 | 47 +++++++++++++++--
 7 files changed, 179 insertions(+), 20 deletions(-)

diff --git a/datasette/hookspecs.py b/datasette/hookspecs.py
index dcd502af..7c56f882 100644
--- a/datasette/hookspecs.py
+++ b/datasette/hookspecs.py
@@ -159,32 +159,32 @@ def jump_items_sql(datasette, actor, request):
 
 @hookspec
 def row_actions(datasette, actor, request, database, table, row):
-    """Links for the row actions menu"""
+    """Items for the row actions menu"""
 
 
 @hookspec
 def table_actions(datasette, actor, database, table, request):
-    """Links for the table actions menu"""
+    """Items for the table actions menu"""
 
 
 @hookspec
 def view_actions(datasette, actor, database, view, request):
-    """Links for the view actions menu"""
+    """Items for the view actions menu"""
 
 
 @hookspec
 def query_actions(datasette, actor, database, query_name, request, sql, params):
-    """Links for the query and stored query actions menu"""
+    """Items for the query and stored query actions menu"""
 
 
 @hookspec
 def database_actions(datasette, actor, database, request):
-    """Links for the database actions menu"""
+    """Items for the database actions menu"""
 
 
 @hookspec
 def homepage_actions(datasette, actor, request):
-    """Links for the homepage actions menu"""
+    """Items for the homepage actions menu"""
 
 
 @hookspec
diff --git a/datasette/static/app.css b/datasette/static/app.css
index c053f484..5fe4502d 100644
--- a/datasette/static/app.css
+++ b/datasette/static/app.css
@@ -2061,18 +2061,32 @@ svg.dropdown-menu-icon {
 .dropdown-menu a:link,
 .dropdown-menu a:visited,
 .dropdown-menu a:hover,
-.dropdown-menu a:focus
-.dropdown-menu a:active {
+.dropdown-menu a:focus,
+.dropdown-menu a:active,
+.dropdown-menu button.action-menu-button {
     text-decoration: none;
     display: block;
     padding: 4px 8px 2px 8px;
     color: #222;
     white-space: nowrap;
 }
-.dropdown-menu a:hover {
+.dropdown-menu button.action-menu-button {
+    appearance: none;
+    background: none;
+    border: none;
+    box-sizing: border-box;
+    cursor: pointer;
+    font: inherit;
+    text-align: left;
+    width: 100%;
+}
+.dropdown-menu a:hover,
+.dropdown-menu button.action-menu-button:hover,
+.dropdown-menu button.action-menu-button:focus {
     background-color: #eee;
 }
 .dropdown-menu .dropdown-description {
+    display: block;
     margin: 0;
     color: #666;
     font-size: 0.8em;
diff --git a/datasette/templates/_action_menu.html b/datasette/templates/_action_menu.html
index 1ae8c173..86089992 100644
--- a/datasette/templates/_action_menu.html
+++ b/datasette/templates/_action_menu.html
@@ -15,14 +15,22 @@
         <div class="hook"></div>
         <ul role="menu">
             {% for link in action_links %}
-            <li role="none"><a href="{{ link.href }}" role="menuitem" tabindex="-1">{{ link.label }}
-            {% if link.description %}
-                <p class="dropdown-description">{{ link.description }}</p>
-            {% endif %}</a>
+            <li role="none">
+            {% if link.get("type") == "button" %}
+                <button type="button" class="button-as-link action-menu-button" role="menuitem" tabindex="-1"{% for name, value in (link.get("attrs") or {}).items() %} {{ name }}="{{ value }}"{% endfor %}>{{ link.label }}
+                {% if link.description %}
+                    <span class="dropdown-description">{{ link.description }}</span>
+                {% endif %}</button>
+            {% else %}
+                <a href="{{ link.href }}" role="menuitem" tabindex="-1">{{ link.label }}
+                {% if link.description %}
+                    <span class="dropdown-description">{{ link.description }}</span>
+                {% endif %}</a>
+            {% endif %}
             </li>
             {% endfor %}
         </ul>
     </div>
 </details>
 </div>
-{% endif %}
\ No newline at end of file
+{% endif %}
diff --git a/docs/custom_templates.rst b/docs/custom_templates.rst
index aa82a536..8851a841 100644
--- a/docs/custom_templates.rst
+++ b/docs/custom_templates.rst
@@ -288,6 +288,14 @@ element that wraps the HTML for that row. Datasette uses this attribute to find
 the element to remove after a delete, or replace after an edit. Any edit or
 delete controls should be rendered inside that same element.
 
+The ``_action_menu.html`` template renders the action menus used by database,
+table, query and row pages. Plugin-provided actions can be link dictionaries
+with ``href`` and ``label`` keys, or button dictionaries using ``{"type":
+"button", "label": "...", "attrs": {...}}`` for JavaScript-backed interactions.
+Both shapes can include an optional ``description`` key. Custom
+``_action_menu.html`` templates should preserve support for both link and button
+action items.
+
 .. _custom_pages:
 
 Custom pages
diff --git a/docs/plugin_hooks.rst b/docs/plugin_hooks.rst
index 7ae52a68..d2f87e27 100644
--- a/docs/plugin_hooks.rst
+++ b/docs/plugin_hooks.rst
@@ -1909,7 +1909,80 @@ Action hooks
 
 Action hooks can be used to add items to the action menus that appear at the top of different pages within Datasette. Unlike :ref:`menu_links() <plugin_hook_menu_links>`, actions which are displayed on every page, actions should only be relevant to the page the user is currently viewing.
 
-Each of these hooks should return return a list of ``{"href": "...", "label": "..."}`` menu items, with optional ``"description": "..."`` keys describing each action in more detail.
+Each of these hooks should return a list of menu items, with optional ``"description": "..."`` keys describing each action in more detail.
+
+The most common action item is a link to another page:
+
+.. code-block:: python
+
+    {
+        "href": datasette.urls.path("/-/custom-action"),
+        "label": "Custom action",
+        "description": "Run this action on a separate page.",
+    }
+
+Plugins can also return button actions for JavaScript-backed interactions:
+
+.. code-block:: python
+
+    {
+        "type": "button",
+        "label": "Open custom dialog",
+        "description": "Show a dialog without leaving this page.",
+        "attrs": {
+            "aria-label": "Open custom dialog",
+            "data-plugin-action": "open-custom-dialog",
+        },
+    }
+
+These are rendered as ``<button type="button" class="button-as-link action-menu-button" role="menuitem" tabindex="-1">``. The optional ``attrs`` dictionary is added to the button, and is useful for ``data-*`` attributes that your plugin's JavaScript can use to attach event handlers.
+
+Here is a minimal plugin example that adds a button to a table page and loads JavaScript to handle clicks on that button:
+
+.. code-block:: python
+
+    from datasette import hookimpl
+
+
+    @hookimpl
+    def table_actions(datasette, database, table):
+        return [
+            {
+                "type": "button",
+                "label": "Show table name",
+                "description": "Open a JavaScript-powered plugin action.",
+                "attrs": {
+                    "aria-label": "Show table name",
+                    "data-plugin-action": "show-table-name",
+                    "data-database": database,
+                    "data-table": table,
+                },
+            }
+        ]
+
+
+    @hookimpl
+    def extra_js_urls(datasette):
+        return [
+            datasette.urls.static_plugins(
+                "datasette_show_table",
+                "show-table.js",
+            )
+        ]
+
+The ``static/show-table.js`` file in that plugin could look like this:
+
+.. code-block:: javascript
+
+    document.addEventListener("click", (event) => {
+      const button = event.target.closest(
+        "button[data-plugin-action='show-table-name']"
+      );
+      if (!button) {
+        return;
+      }
+      alert(`${button.dataset.database}.${button.dataset.table}`);
+    });
 
 They can alternatively return an ``async def`` awaitable function which, when called, returns a list of those menu items.
 
diff --git a/tests/plugins/my_plugin.py b/tests/plugins/my_plugin.py
index 1d2378b4..c89ad0a3 100644
--- a/tests/plugins/my_plugin.py
+++ b/tests/plugins/my_plugin.py
@@ -357,15 +357,30 @@ def menu_links(datasette, actor, request):
 
 
 @hookimpl
-def table_actions(datasette, database, table, actor):
+def table_actions(datasette, database, table, actor, request):
     if actor:
-        return [
+        actions = [
             {
                 "href": datasette.urls.instance(),
                 "label": f"Database: {database}",
             },
             {"href": datasette.urls.instance(), "label": f"Table: {table}"},
         ]
+        if request.args.get("_button"):
+            actions.append(
+                {
+                    "type": "button",
+                    "label": "Plugin button",
+                    "description": "Runs JavaScript from a plugin",
+                    "attrs": {
+                        "aria-label": "Plugin button for {}".format(table),
+                        "data-plugin-action": "plugin-button",
+                        "data-database": database,
+                        "data-table": table,
+                    },
+                }
+            )
+        return actions
 
 
 @hookimpl
diff --git a/tests/test_plugins.py b/tests/test_plugins.py
index cf753c9e..da14c714 100644
--- a/tests/test_plugins.py
+++ b/tests/test_plugins.py
@@ -1062,6 +1062,7 @@ async def test_hook_menu_links(ds_client):
 async def test_hook_table_actions(ds_client):
     response = await ds_client.get("/fixtures/facetable")
     assert get_actions_links(response.text) == []
+    assert get_actions_buttons(response.text) == []
     response_2 = await ds_client.get("/fixtures/facetable?_bot=1&_hello=BOB")
     assert ">Table actions<" in response_2.text
     assert sorted(
@@ -1071,6 +1072,23 @@ async def test_hook_table_actions(ds_client):
         {"label": "From async BOB", "href": "/", "description": None},
         {"label": "Table: facetable", "href": "/", "description": None},
     ]
+    response_3 = await ds_client.get("/fixtures/facetable?_bot=1&_button=1")
+    assert get_actions_buttons(response_3.text) == [
+        {
+            "label": "Plugin button",
+            "description": "Runs JavaScript from a plugin",
+            "attrs": {
+                "aria-label": "Plugin button for facetable",
+                "class": ["button-as-link", "action-menu-button"],
+                "data-database": "fixtures",
+                "data-plugin-action": "plugin-button",
+                "data-table": "facetable",
+                "role": "menuitem",
+                "tabindex": "-1",
+                "type": "button",
+            },
+        }
+    ]
 
 
 @pytest.mark.asyncio
@@ -1098,15 +1116,38 @@ def get_actions_links(html):
     links = []
     for a_el in details.select("a"):
         description = None
-        if a_el.find("p") is not None:
-            description = a_el.find("p").text.strip()
-            a_el.find("p").extract()
+        description_el = a_el.find(class_="dropdown-description")
+        if description_el is not None:
+            description = description_el.text.strip()
+            description_el.extract()
         label = a_el.text.strip()
         href = a_el["href"]
         links.append({"label": label, "href": href, "description": description})
     return links
 
 
+def get_actions_buttons(html):
+    soup = Soup(html, "html.parser")
+    details = soup.find("details", {"class": "actions-menu-links"})
+    if details is None:
+        return []
+    buttons = []
+    for button_el in details.select("button.action-menu-button"):
+        description = None
+        description_el = button_el.find(class_="dropdown-description")
+        if description_el is not None:
+            description = description_el.text.strip()
+            description_el.extract()
+        buttons.append(
+            {
+                "label": button_el.text.strip(),
+                "description": description,
+                "attrs": dict(button_el.attrs),
+            }
+        )
+    return buttons
+
+
 @pytest.mark.asyncio
 @pytest.mark.parametrize(
     "path,expected_url",

From 82c95a1a135d4a2c1b667031e141cb7f88193bc4 Mon Sep 17 00:00:00 2001
From: Simon Willison <swillison@gmail.com>
Date: Sun, 14 Jun 2026 15:59:08 -0700
Subject: [PATCH 22/23] Refactor edit/delete tools to work on row pages too

Refs https://github.com/simonw/datasette/pull/2781#issuecomment-4703303274

Refs #2780
---
 datasette/app.py                   |    1 +
 datasette/static/edit-tools.js     | 1972 ++++++++++++++++++++++++++++
 datasette/static/table.js          | 1938 ---------------------------
 datasette/templates/row.html       |    7 +
 datasette/templates/table.html     |    1 +
 datasette/views/row.py             |  120 +-
 tests/test_datasette_manager_js.py |   16 +-
 tests/test_table_html.py           |  154 +++
 8 files changed, 2261 insertions(+), 1948 deletions(-)
 create mode 100644 datasette/static/edit-tools.js

diff --git a/datasette/app.py b/datasette/app.py
index 9b3cf51c..545a65c8 100644
--- a/datasette/app.py
+++ b/datasette/app.py
@@ -2320,6 +2320,7 @@ class Datasette:
                 and "ds_actor" in request.cookies
                 and request.actor,
                 "app_css_hash": self.app_css_hash(),
+                "edit_tools_js_hash": self.static_hash("edit-tools.js"),
                 "table_js_hash": self.static_hash("table.js"),
                 "zip": zip,
                 "body_scripts": body_scripts,
diff --git a/datasette/static/edit-tools.js b/datasette/static/edit-tools.js
new file mode 100644
index 00000000..2af7b35b
--- /dev/null
+++ b/datasette/static/edit-tools.js
@@ -0,0 +1,1972 @@
+var ROW_DELETE_DIALOG_ID = "row-delete-dialog";
+var rowDeleteDialogState = null;
+var ROW_EDIT_DIALOG_ID = "row-edit-dialog";
+var rowEditDialogState = null;
+
+function ensureRowMutationStatus(manager) {
+  var status = document.querySelector(".row-mutation-status");
+  if (status) {
+    return status;
+  }
+
+  status = document.createElement("p");
+  status.className = "row-mutation-status";
+  status.hidden = true;
+  status.setAttribute("role", "status");
+  status.setAttribute("aria-live", "polite");
+  status.setAttribute("tabindex", "-1");
+
+  var tableWrapper = document.querySelector(manager.selectors.tableWrapper);
+  if (tableWrapper && tableWrapper.parentNode) {
+    tableWrapper.parentNode.insertBefore(status, tableWrapper);
+  } else {
+    document.body.appendChild(status);
+  }
+  return status;
+}
+
+function showRowMutationStatus(manager, message, isError) {
+  var status = ensureRowMutationStatus(manager);
+  status.hidden = false;
+  status.classList.toggle("row-mutation-status-error", !!isError);
+  status.textContent = message;
+  return status;
+}
+
+function hideRowMutationStatus() {
+  var status = document.querySelector(".row-mutation-status");
+  if (!status) {
+    return;
+  }
+  status.hidden = true;
+  status.classList.remove("row-mutation-status-error");
+  status.textContent = "";
+}
+
+function setRowDeleteDialogBusy(state, isBusy) {
+  state.isBusy = isBusy;
+  state.confirmButton.disabled = isBusy;
+  state.cancelButton.disabled = isBusy;
+  state.confirmButton.textContent = isBusy ? "Deleting..." : "Delete row";
+}
+
+function clearRowDeleteDialogError(state) {
+  state.error.hidden = true;
+  state.error.textContent = "";
+}
+
+function showRowDeleteDialogError(state, message) {
+  state.error.hidden = false;
+  state.error.textContent = message;
+}
+
+function rowMutationRequestError(response, data) {
+  if (data && data.errors) {
+    return new Error(data.errors.join(" "));
+  }
+  if (data && data.error) {
+    return new Error(data.error);
+  }
+  if (data && data.title) {
+    return new Error(data.title);
+  }
+  return new Error("Request failed with HTTP " + response.status);
+}
+
+function tildeDecode(value) {
+  if (!value) {
+    return "";
+  }
+  var placeholder = "__datasette_percent_placeholder__";
+  try {
+    return decodeURIComponent(
+      value
+        .replace(/%/g, placeholder)
+        .replace(/~/g, "%")
+        .replace(/\+/g, " "),
+    ).replace(new RegExp(placeholder, "g"), "%");
+  } catch (_error) {
+    return value;
+  }
+}
+
+function tildeEncode(value) {
+  var bytes = new TextEncoder().encode(String(value));
+  var encoded = "";
+  bytes.forEach(function (byte) {
+    var isSafe =
+      (byte >= 65 && byte <= 90) ||
+      (byte >= 97 && byte <= 122) ||
+      (byte >= 48 && byte <= 57) ||
+      byte === 95 ||
+      byte === 45;
+    if (isSafe) {
+      encoded += String.fromCharCode(byte);
+    } else if (byte === 32) {
+      encoded += "+";
+    } else {
+      encoded += "~" + byte.toString(16).toUpperCase().padStart(2, "0");
+    }
+  });
+  return encoded;
+}
+
+function rowDisplayLabel(row) {
+  return tildeDecode(row.getAttribute("data-row") || "");
+}
+
+function rowTitleLabel(row) {
+  return row.getAttribute("data-row-label") || "";
+}
+
+function insertedRowStatusMessage(rowId, rowLabel) {
+  var message = "Inserted row " + rowId;
+  if (rowLabel && rowLabel !== rowId) {
+    message += " (" + rowLabel + ")";
+  }
+  return message + ".";
+}
+
+function tableBaseUrl() {
+  var tableUrl =
+    window._datasetteTableData && window._datasetteTableData.tableUrl;
+  var url = new URL(tableUrl || location.href, location.href);
+  url.hash = "";
+  url.search = "";
+  return url;
+}
+
+function tablePageData() {
+  return window._datasetteTableData || {};
+}
+
+function tableInsertData() {
+  return tablePageData().insertRow;
+}
+
+function tableForeignKeys() {
+  return tablePageData().foreignKeys || {};
+}
+
+function isRowPage() {
+  return document.body && document.body.classList.contains("row");
+}
+
+function rowElementForActionButton(button) {
+  return (
+    button.closest("[data-row]") ||
+    (button.getAttribute("data-row") ? button : null)
+  );
+}
+
+function foreignKeyAutocompleteUrl(column) {
+  return tableForeignKeys()[column] || null;
+}
+
+function autocompleteRowPk(row) {
+  var pks = (row && row.pks) || {};
+  var keys = Object.keys(pks);
+  if (keys.length !== 1) {
+    return null;
+  }
+  return pks[keys[0]];
+}
+
+function foreignKeyRowUrl(autocompleteUrl, pk) {
+  var url = new URL(autocompleteUrl, location.href);
+  if (!/\/-\/autocomplete\/?$/.test(url.pathname)) {
+    return null;
+  }
+  url.pathname =
+    url.pathname.replace(/\/-\/autocomplete\/?$/, "") + "/" + tildeEncode(pk);
+  url.search = "";
+  url.hash = "";
+  return url.toString();
+}
+
+function foreignKeyLabelText(row) {
+  var pk = autocompleteRowPk(row);
+  var label = row && row.label;
+  if (
+    label !== null &&
+    typeof label !== "undefined" &&
+    String(label) !== String(pk)
+  ) {
+    return String(label);
+  }
+  return "View row";
+}
+
+function rowEditMetaTextWithoutCurrentValue(meta) {
+  return (meta.dataset.baseMeta || "")
+    .split(" · ")
+    .filter(function (part) {
+      return part !== "Current value: NULL";
+    })
+    .join(" · ");
+}
+
+function updateRowEditForeignKeySeparator(meta) {
+  var separator = meta.querySelector(".row-edit-fk-separator");
+  if (!separator) {
+    return;
+  }
+  var baseMeta = meta.querySelector(".row-edit-base-meta");
+  var hasBaseMeta = !!(baseMeta && baseMeta.textContent);
+  separator.textContent = hasBaseMeta ? " · " : "";
+  separator.hidden = !hasBaseMeta;
+}
+
+function updateRowEditFieldMetaHidden(meta) {
+  var baseMeta = meta.querySelector(".row-edit-base-meta");
+  var hasBaseMeta = !!(baseMeta && baseMeta.textContent);
+  var foreignKeyLinkWrap = meta.querySelector(".row-edit-fk-link-wrap");
+  var hasForeignKeyLink = foreignKeyLinkWrap && !foreignKeyLinkWrap.hidden;
+  meta.hidden =
+    meta.dataset.reserveSpace !== "1" && !hasBaseMeta && !hasForeignKeyLink;
+}
+
+function setRowEditBaseMetaText(meta, text) {
+  var baseMeta = meta.querySelector(".row-edit-base-meta");
+  if (!baseMeta) {
+    return;
+  }
+  baseMeta.textContent = text || "";
+  updateRowEditForeignKeySeparator(meta);
+  updateRowEditFieldMetaHidden(meta);
+}
+
+function setForeignKeyMetaLink(meta, autocompleteUrl, row) {
+  var wrap = meta.querySelector(".row-edit-fk-link-wrap");
+  if (!wrap) {
+    return;
+  }
+  var pkSpan = wrap.querySelector(".row-edit-fk-pk");
+  var link = wrap.querySelector("a");
+  var pk = autocompleteRowPk(row);
+  var url =
+    pk === null || typeof pk === "undefined"
+      ? null
+      : foreignKeyRowUrl(autocompleteUrl, pk);
+  if (!url) {
+    wrap.hidden = true;
+    pkSpan.textContent = "";
+    link.removeAttribute("href");
+    link.textContent = "";
+    link.removeAttribute("aria-label");
+    setRowEditBaseMetaText(meta, meta.dataset.baseMeta || "");
+    updateRowEditFieldMetaHidden(meta);
+    return;
+  }
+  setRowEditBaseMetaText(meta, rowEditMetaTextWithoutCurrentValue(meta));
+  var pkText = String(pk);
+  var linkText = foreignKeyLabelText(row);
+  pkSpan.textContent = pkText;
+  link.href = url;
+  link.textContent = linkText;
+  link.setAttribute(
+    "aria-label",
+    "Open referenced row " + pkText + " " + linkText + " in a new tab",
+  );
+  wrap.hidden = false;
+  updateRowEditFieldMetaHidden(meta);
+}
+
+async function resolveForeignKeyMetaLink(control, autocompleteUrl, meta) {
+  var value = control.value.trim();
+  if (!value) {
+    setForeignKeyMetaLink(meta, autocompleteUrl, null);
+    return;
+  }
+
+  var url = new URL(autocompleteUrl, location.href);
+  url.searchParams.set("q", value);
+  try {
+    var response = await fetch(url.toString(), {
+      headers: {
+        Accept: "application/json",
+      },
+    });
+    if (!response.ok) {
+      throw new Error("HTTP " + response.status);
+    }
+    var data = await response.json();
+    if (control.value.trim() !== value) {
+      return;
+    }
+    var rows = (data && data.rows) || [];
+    var row = rows.find(function (candidate) {
+      var pk = autocompleteRowPk(candidate);
+      return pk !== null && typeof pk !== "undefined" && String(pk) === value;
+    });
+    setForeignKeyMetaLink(meta, autocompleteUrl, row || null);
+  } catch (_error) {
+    if (control.value.trim() === value) {
+      setForeignKeyMetaLink(meta, autocompleteUrl, null);
+    }
+  }
+}
+
+function tableInsertUrl() {
+  var data = tableInsertData();
+  if (data && data.path) {
+    return new URL(data.path, location.href).toString();
+  }
+  var url = tableBaseUrl();
+  url.pathname = url.pathname.replace(/\/$/, "") + "/-/insert";
+  return url.toString();
+}
+
+function rowResourceUrl(row) {
+  var rowId = row.getAttribute("data-row");
+  if (!rowId) {
+    return null;
+  }
+  var url = tableBaseUrl();
+  url.pathname = url.pathname.replace(/\/$/, "") + "/" + rowId;
+  return url;
+}
+
+function rowJsonUrl(row) {
+  var url = rowResourceUrl(row);
+  if (!url) {
+    return "";
+  }
+  url.pathname = url.pathname + ".json";
+  url.searchParams.set("_extra", "columns,column_types");
+  return url.toString();
+}
+
+function rowDeleteUrl(row) {
+  var url = rowResourceUrl(row);
+  if (!url) {
+    return "";
+  }
+  url.pathname = url.pathname.replace(/\/$/, "") + "/-/delete";
+  if (isRowPage()) {
+    url.searchParams.set("_redirect_to_table", "1");
+  }
+  return url.toString();
+}
+
+function rowUpdateUrl(row) {
+  var url = rowResourceUrl(row);
+  if (!url) {
+    return "";
+  }
+  url.pathname = url.pathname.replace(/\/$/, "") + "/-/update";
+  if (isRowPage()) {
+    url.searchParams.set("_message", "1");
+  }
+  return url.toString();
+}
+
+function rowFragmentUrl(row) {
+  var rowId = row.getAttribute("data-row");
+  return rowFragmentUrlById(rowId);
+}
+
+function rowFragmentUrlById(rowId) {
+  if (!rowId) {
+    return "";
+  }
+  var url = tableBaseUrl();
+  url.search = new URL(location.href).search;
+  url.pathname = url.pathname.replace(/\/$/, "") + "/-/fragment";
+  url.searchParams.delete("_next");
+  url.searchParams.set("_row", rowId);
+  url.searchParams.set("_nocount", "1");
+  url.searchParams.set("_nofacet", "1");
+  url.searchParams.set("_nosuggest", "1");
+  return url.toString();
+}
+
+function nextRowActionFocusTarget(row, action) {
+  var selector = 'button[data-row-action="' + action + '"]:not([disabled])';
+  var sibling = row.nextElementSibling;
+  while (sibling) {
+    var nextButton = sibling.querySelector(selector);
+    if (nextButton) {
+      return nextButton;
+    }
+    sibling = sibling.nextElementSibling;
+  }
+
+  sibling = row.previousElementSibling;
+  while (sibling) {
+    var previousButton = sibling.querySelector(selector);
+    if (previousButton) {
+      return previousButton;
+    }
+    sibling = sibling.previousElementSibling;
+  }
+
+  return null;
+}
+
+function nextRowDeleteFocusTarget(row, manager) {
+  return nextRowActionFocusTarget(row, "delete") || ensureRowMutationStatus(manager);
+}
+
+function ensureRowDeleteDialog(manager) {
+  if (rowDeleteDialogState) {
+    return rowDeleteDialogState;
+  }
+  if (!window.HTMLDialogElement) {
+    return null;
+  }
+
+  var dialog = document.createElement("dialog");
+  dialog.id = ROW_DELETE_DIALOG_ID;
+  dialog.className = "row-delete-dialog";
+  dialog.setAttribute("aria-labelledby", "row-delete-title");
+  dialog.setAttribute("aria-describedby", "row-delete-message");
+  dialog.innerHTML = `
+    <div class="modal-header">
+      <span class="modal-title" id="row-delete-title">Delete row</span>
+    </div>
+    <p class="row-delete-message" id="row-delete-message">Delete row <span class="row-delete-id"></span>?</p>
+    <p class="row-delete-error" role="alert" hidden></p>
+    <div class="modal-footer">
+      <button type="button" class="btn btn-ghost row-delete-cancel">Cancel</button>
+      <button type="button" class="btn btn-primary row-delete-confirm">Delete row</button>
+    </div>
+  `;
+  document.body.appendChild(dialog);
+
+  rowDeleteDialogState = {
+    dialog: dialog,
+    title: dialog.querySelector(".modal-title"),
+    message: dialog.querySelector(".row-delete-message"),
+    rowId: dialog.querySelector(".row-delete-id"),
+    error: dialog.querySelector(".row-delete-error"),
+    cancelButton: dialog.querySelector(".row-delete-cancel"),
+    confirmButton: dialog.querySelector(".row-delete-confirm"),
+    currentRow: null,
+    currentDeleteUrl: null,
+    currentPkPath: null,
+    manager: manager,
+    isBusy: false,
+    shouldRestoreFocus: true,
+  };
+
+  rowDeleteDialogState.cancelButton.addEventListener("click", function () {
+    if (!rowDeleteDialogState.isBusy) {
+      rowDeleteDialogState.shouldRestoreFocus = true;
+      dialog.close();
+    }
+  });
+
+  dialog.addEventListener("click", function (ev) {
+    if (ev.target === dialog && !rowDeleteDialogState.isBusy) {
+      rowDeleteDialogState.shouldRestoreFocus = true;
+      dialog.close();
+    }
+  });
+
+  dialog.addEventListener("keydown", function (ev) {
+    if (
+      ev.key === "Enter" &&
+      document.activeElement === rowDeleteDialogState.confirmButton
+    ) {
+      ev.preventDefault();
+      if (!rowDeleteDialogState.isBusy) {
+        rowDeleteDialogState.confirmButton.click();
+      }
+      return;
+    }
+    if (ev.key !== "Escape") {
+      return;
+    }
+    if (rowDeleteDialogState.isBusy) {
+      ev.preventDefault();
+      return;
+    }
+    ev.preventDefault();
+    rowDeleteDialogState.shouldRestoreFocus = true;
+    dialog.close();
+  });
+
+  dialog.addEventListener("cancel", function (ev) {
+    if (rowDeleteDialogState.isBusy) {
+      ev.preventDefault();
+    } else {
+      rowDeleteDialogState.shouldRestoreFocus = true;
+    }
+  });
+
+  dialog.addEventListener("close", function () {
+    var state = rowDeleteDialogState;
+    clearRowDeleteDialogError(state);
+    setRowDeleteDialogBusy(state, false);
+    if (
+      state.shouldRestoreFocus &&
+      state.currentButton &&
+      document.contains(state.currentButton)
+    ) {
+      state.currentButton.focus();
+    }
+  });
+
+  rowDeleteDialogState.confirmButton.addEventListener("click", async function () {
+    var state = rowDeleteDialogState;
+    clearRowDeleteDialogError(state);
+    setRowDeleteDialogBusy(state, true);
+
+    try {
+      var response = await fetch(state.currentDeleteUrl, {
+        method: "POST",
+        headers: {
+          Accept: "application/json",
+        },
+      });
+      var data = null;
+      try {
+        data = await response.json();
+      } catch (_error) {
+        data = null;
+      }
+      if (!response.ok || (data && data.ok === false)) {
+        throw rowMutationRequestError(response, data);
+      }
+      if (data && data.redirect) {
+        state.shouldRestoreFocus = false;
+        state.dialog.close();
+        location.href = data.redirect;
+        return;
+      }
+
+      var focusTarget = nextRowDeleteFocusTarget(state.currentRow, state.manager);
+      var statusMessage = state.currentPkPath
+        ? "Deleted row " + state.currentPkPath + "."
+        : "Deleted row.";
+      state.shouldRestoreFocus = false;
+      state.dialog.close();
+      state.currentRow.remove();
+      showRowMutationStatus(state.manager, statusMessage, false);
+      if (focusTarget && document.contains(focusTarget)) {
+        focusTarget.focus();
+      } else {
+        ensureRowMutationStatus(state.manager).focus();
+      }
+    } catch (error) {
+      setRowDeleteDialogBusy(state, false);
+      showRowDeleteDialogError(state, error.message || "Delete failed");
+    }
+  });
+
+  return rowDeleteDialogState;
+}
+
+function openRowDeleteDialog(button, manager) {
+  var row = rowElementForActionButton(button);
+  if (!row || !row.getAttribute("data-row")) {
+    return;
+  }
+  var state = ensureRowDeleteDialog(manager);
+  if (!state) {
+    return;
+  }
+
+  state.manager = manager;
+  state.currentButton = button;
+  state.currentRow = row;
+  state.currentDeleteUrl = rowDeleteUrl(row);
+  state.currentPkPath = rowDisplayLabel(row);
+  state.shouldRestoreFocus = true;
+
+  clearRowDeleteDialogError(state);
+  setRowDeleteDialogBusy(state, false);
+  setRowDialogTitle(
+    state.title,
+    "Delete row",
+    state.currentPkPath || "this row",
+    rowTitleLabel(row),
+  );
+  state.rowId.textContent = state.currentPkPath || "this row";
+
+  if (!state.dialog.open) {
+    state.dialog.showModal();
+  }
+  state.confirmButton.focus();
+}
+
+function initRowDeleteActions(manager) {
+  if (!window.fetch || !window.HTMLDialogElement) {
+    return;
+  }
+  document.addEventListener("click", function (ev) {
+    var button = ev.target.closest('button[data-row-action="delete"]');
+    if (!button) {
+      return;
+    }
+    ev.preventDefault();
+    openRowDeleteDialog(button, manager);
+  });
+}
+
+function valueToEditText(value) {
+  if (value === null || typeof value === "undefined") {
+    return "";
+  }
+  if (typeof value === "object") {
+    return JSON.stringify(value, null, 2);
+  }
+  return String(value);
+}
+
+function shouldUseTextarea(value, columnType) {
+  if (columnType && columnType.type === "textarea") {
+    return true;
+  }
+  if (value && typeof value === "object") {
+    return true;
+  }
+  var text = valueToEditText(value);
+  return text.length > 80 || /[\r\n]/.test(text);
+}
+
+function rowEditValueKind(value) {
+  if (value === null || typeof value === "undefined") {
+    return "null";
+  }
+  if (typeof value === "number") {
+    return "number";
+  }
+  if (typeof value === "boolean") {
+    return "boolean";
+  }
+  return "string";
+}
+
+function rowEditControlElement(control, autocompleteUrl) {
+  if (!autocompleteUrl || control.nodeName !== "INPUT") {
+    return control;
+  }
+  var autocomplete = document.createElement("datasette-autocomplete");
+  autocomplete.setAttribute("src", autocompleteUrl);
+  autocomplete.setAttribute("suggest-on-focus", "");
+  autocomplete.appendChild(control);
+  return autocomplete;
+}
+
+function columnTypeForContext(columnType) {
+  if (!columnType) {
+    return null;
+  }
+  return {
+    type: columnType.type,
+    config: columnType.config || {},
+  };
+}
+
+function defaultExpressionForContext(expression) {
+  if (expression === null || typeof expression === "undefined") {
+    return null;
+  }
+  return expression;
+}
+
+function columnFormControlContext(column, isPk, columnType, options) {
+  var pageData = tablePageData();
+  var defaultExpression = defaultExpressionForContext(options.defaultExpression);
+  return {
+    mode: options.mode || "edit",
+    database: pageData.database || null,
+    table: pageData.table || (tableInsertData() && tableInsertData().tableName) || null,
+    tableUrl: pageData.tableUrl || null,
+    column: column,
+    columnType: columnTypeForContext(columnType),
+    sqliteType: options.sqliteType || null,
+    notNull: !!options.notnull,
+    isPk: !!isPk,
+    defaultExpression: defaultExpression,
+    form: options.form || null,
+    dialog: options.dialog || null,
+  };
+}
+
+function makeColumnField(manager, context) {
+  if (!manager || !manager.makeColumnField) {
+    return null;
+  }
+  return manager.makeColumnField(context);
+}
+
+function createColumnFieldApi(options) {
+  var control = options.control;
+  var context = options.context;
+  var field = {
+    context: context,
+    id: options.id,
+    labelId: options.labelId,
+    descriptionId: options.descriptionId,
+    root: null,
+    form: options.form || null,
+    dialog: options.dialog || null,
+    input: control,
+    control: control,
+    meta: options.meta || null,
+    validationMessageElement: null,
+    getValue: function () {
+      return valueFromRowEditControl(control);
+    },
+    setValue: function (value) {
+      if (
+        value !== null &&
+        typeof value !== "undefined" &&
+        typeof value === "object"
+      ) {
+        throw new TypeError(
+          "field.setValue() accepts strings, numbers, booleans or null; serialize objects before setting the field value",
+        );
+      }
+      field.stopUsingSqliteDefault();
+      control.value = valueToEditText(value);
+      control.dataset.currentValueKind = rowEditValueKind(value);
+    },
+    getInitialValue: function () {
+      return initialValueFromRowEditControl(control);
+    },
+    hasChanged: function () {
+      return rowEditControlHasChanged(control);
+    },
+    clearValue: function () {
+      field.setValue(null);
+    },
+    isUsingSqliteDefault: function () {
+      return control.dataset.useSqliteDefault === "1";
+    },
+    useSqliteDefault: function () {
+      if (
+        context.defaultExpression === null ||
+        typeof context.defaultExpression === "undefined"
+      ) {
+        return;
+      }
+      control.dataset.useSqliteDefault = "1";
+      control.disabled = true;
+      control.value = "";
+      control.dataset.currentValueKind = "null";
+      field.syncSqliteDefaultUi();
+    },
+    stopUsingSqliteDefault: function () {
+      if (control.dataset.useSqliteDefault !== "1") {
+        return;
+      }
+      control.dataset.useSqliteDefault = "0";
+      control.disabled = false;
+      field.syncSqliteDefaultUi();
+    },
+    syncSqliteDefaultUi: function () {},
+    markClean: function () {
+      markRowEditControlClean(control);
+    },
+    setValidity: function (message) {
+      message = message || "";
+      control.setCustomValidity(message);
+      if (message) {
+        control.setAttribute("aria-invalid", "true");
+      } else {
+        control.removeAttribute("aria-invalid");
+      }
+      var validationMessage = ensureColumnFieldValidationMessage(field);
+      if (validationMessage) {
+        validationMessage.textContent = message;
+        validationMessage.hidden = !message;
+      }
+    },
+    clearValidity: function () {
+      field.setValidity("");
+    },
+  };
+  field.markClean();
+  return field;
+}
+
+function ensureColumnFieldValidationMessage(field) {
+  if (field.validationMessageElement) {
+    return field.validationMessageElement;
+  }
+  if (!field.meta) {
+    return null;
+  }
+  var validationMessage = document.createElement("span");
+  validationMessage.id = field.id + "-validation-error";
+  validationMessage.className = "row-edit-field-validation-error";
+  validationMessage.hidden = true;
+  validationMessage.setAttribute("role", "alert");
+  field.meta.appendChild(validationMessage);
+  field.validationMessageElement = validationMessage;
+  return validationMessage;
+}
+
+function renderColumnField(pluginControl, fieldApi) {
+  if (!pluginControl || !pluginControl.render) {
+    return null;
+  }
+  var pluginWrap = document.createElement("div");
+  pluginWrap.className = "row-edit-plugin-control";
+  pluginWrap.dataset.pluginName = pluginControl.pluginName || "";
+  pluginWrap.dataset.column = fieldApi.context.column;
+  if (fieldApi.context.columnType && fieldApi.context.columnType.type) {
+    pluginWrap.dataset.columnType = fieldApi.context.columnType.type;
+  }
+  fieldApi.root = pluginWrap;
+  try {
+    var rendered = pluginControl.render(fieldApi);
+    if (rendered && rendered.nodeType) {
+      pluginWrap.appendChild(rendered);
+    }
+  } catch (error) {
+    console.error("Error rendering column form control", error);
+    return null;
+  }
+  pluginWrap._datasetteColumnField = pluginControl;
+  pluginWrap._datasetteColumnFormField = fieldApi;
+  return pluginWrap;
+}
+
+function validateJsonColumnField(field) {
+  var value = field.input.value;
+  if (value.trim() === "") {
+    field.clearValidity();
+    return true;
+  }
+  try {
+    JSON.parse(value);
+    field.clearValidity();
+    return true;
+  } catch (error) {
+    field.setValidity(
+      "Invalid JSON" + (error && error.message ? ": " + error.message : ""),
+    );
+    return false;
+  }
+}
+
+function registerBuiltinColumnFieldPlugins(manager) {
+  if (!manager || !manager.registerPlugin) {
+    return;
+  }
+  manager.registerPlugin("datasette-json-column", {
+    version: "1.0",
+    makeColumnField: function (context) {
+      if (!context.columnType || context.columnType.type !== "json") {
+        return;
+      }
+      return {
+        useTextarea: true,
+        render: function (field) {
+          field.input.addEventListener("input", function () {
+            validateJsonColumnField(field);
+          });
+          field.input.addEventListener("change", function () {
+            validateJsonColumnField(field);
+          });
+          validateJsonColumnField(field);
+          return field.input;
+        },
+        focus: function (field) {
+          field.input.focus();
+        },
+      };
+    },
+  });
+}
+
+function focusRowEditPluginControl(field) {
+  var pluginWrap = field.querySelector(".row-edit-plugin-control");
+  if (!pluginWrap) {
+    return false;
+  }
+  var pluginControl = pluginWrap._datasetteColumnField;
+  var fieldApi = pluginWrap._datasetteColumnFormField;
+  if (pluginControl && pluginControl.focus) {
+    try {
+      pluginControl.focus(fieldApi);
+      return true;
+    } catch (error) {
+      console.error("Error focusing column form control", error);
+    }
+  }
+  return false;
+}
+
+function focusFirstRowEditControl(state, options) {
+  options = options || {};
+  var fields = state.fields.querySelectorAll(".row-edit-field");
+  for (var i = 0; i < fields.length; i += 1) {
+    var field = fields[i];
+    var control = field.querySelector(".row-edit-input");
+    if (!control) {
+      continue;
+    }
+    if (options.skipReadonly && (control.readOnly || control.disabled)) {
+      continue;
+    }
+    if (focusRowEditPluginControl(field)) {
+      return true;
+    }
+    control.focus();
+    return true;
+  }
+  return false;
+}
+
+function destroyRowEditFields(state) {
+  if (!state || !state.fields) {
+    return;
+  }
+  state.fields
+    .querySelectorAll(".row-edit-plugin-control")
+    .forEach(function (pluginWrap) {
+      var pluginControl = pluginWrap._datasetteColumnField;
+      var fieldApi = pluginWrap._datasetteColumnFormField;
+      if (pluginControl && pluginControl.destroy) {
+        try {
+          pluginControl.destroy(fieldApi);
+        } catch (error) {
+          console.error("Error destroying column form control", error);
+        }
+      }
+    });
+  state.fields.innerHTML = "";
+}
+
+function createRowEditField(column, value, isPk, columnType, index, options) {
+  options = options || {};
+  var field = document.createElement("div");
+  field.className = "row-edit-field";
+  var defaultExpression = defaultExpressionForContext(options.defaultExpression);
+  var hasDefaultExpression = defaultExpression !== null;
+  var useSqliteDefault = hasDefaultExpression && options.useSqliteDefault;
+
+  var fieldId = "row-edit-field-" + index;
+  var metaId = "row-edit-field-meta-" + index;
+  var labelId = "row-edit-field-label-" + index;
+  var label = document.createElement("label");
+  label.className = "row-edit-label";
+  label.id = labelId;
+  label.setAttribute("for", fieldId);
+  label.textContent = column;
+
+  var controlWrap = document.createElement("div");
+  controlWrap.className = "row-edit-control-wrap";
+
+  var context = columnFormControlContext(
+    column,
+    isPk,
+    columnType,
+    options,
+  );
+  var pluginControl = makeColumnField(options.manager, context);
+  var useTextarea =
+    (pluginControl && pluginControl.useTextarea === true) ||
+    shouldUseTextarea(value, columnType);
+  var control = useTextarea
+    ? document.createElement("textarea")
+    : document.createElement("input");
+  control.className = "row-edit-input";
+  control.id = fieldId;
+  control.name = column;
+  control.value = valueToEditText(value);
+  control.setAttribute("aria-describedby", metaId);
+  control.dataset.initialValue = valueToEditText(value);
+  control.dataset.initialValueKind =
+    options.valueKind || rowEditValueKind(value);
+  control.dataset.primaryKey = isPk ? "1" : "0";
+  control.dataset.currentValueKind = control.dataset.initialValueKind;
+  if (hasDefaultExpression) {
+    control.dataset.useSqliteDefault = useSqliteDefault ? "1" : "0";
+  }
+  if (useSqliteDefault) {
+    control.disabled = true;
+  }
+  if (options.omitIfBlank) {
+    control.dataset.omitIfBlank = "1";
+  }
+
+  if (control.nodeName === "TEXTAREA") {
+    control.rows = Math.min(8, Math.max(3, control.value.split("\n").length));
+  } else {
+    control.type = "text";
+  }
+
+  if (isPk && options.primaryKeyReadonly !== false) {
+    control.readOnly = true;
+  }
+
+  var meta = document.createElement("span");
+  meta.id = metaId;
+  meta.className = "row-edit-field-meta";
+  if (options.autocompleteUrl) {
+    meta.classList.add("row-edit-field-meta-autocomplete");
+    meta.dataset.reserveSpace = "1";
+  }
+  var metaParts = [];
+  if (isPk) {
+    metaParts.push("Primary key");
+  }
+  if (options.notnull) {
+    metaParts.push("Required");
+  }
+  if (hasDefaultExpression && !useSqliteDefault) {
+    metaParts.push("SQLite default: " + defaultExpression);
+  }
+  if (value === null) {
+    metaParts.push("Current value: NULL");
+    control.placeholder = "NULL";
+  }
+  if (columnType && columnType.type) {
+    metaParts.push("Custom type: " + columnType.type);
+  }
+  meta.dataset.baseMeta = metaParts.join(" · ");
+  var baseMeta = document.createElement("span");
+  baseMeta.className = "row-edit-base-meta";
+  baseMeta.textContent = meta.dataset.baseMeta;
+  meta.appendChild(baseMeta);
+  if (options.autocompleteUrl) {
+    var foreignKeyLinkWrap = document.createElement("span");
+    foreignKeyLinkWrap.className = "row-edit-fk-link-wrap";
+    foreignKeyLinkWrap.hidden = true;
+    var foreignKeySeparator = document.createElement("span");
+    foreignKeySeparator.className = "row-edit-fk-separator";
+    foreignKeySeparator.textContent = meta.dataset.baseMeta ? " · " : "";
+    foreignKeySeparator.hidden = !meta.dataset.baseMeta;
+    foreignKeyLinkWrap.appendChild(foreignKeySeparator);
+    var foreignKeyPk = document.createElement("span");
+    foreignKeyPk.className = "row-edit-fk-pk";
+    foreignKeyLinkWrap.appendChild(foreignKeyPk);
+    foreignKeyLinkWrap.appendChild(document.createTextNode(" "));
+    var foreignKeyLink = document.createElement("a");
+    foreignKeyLink.className = "row-edit-fk-link";
+    foreignKeyLink.target = "_blank";
+    foreignKeyLink.rel = "noopener noreferrer";
+    foreignKeyLinkWrap.appendChild(foreignKeyLink);
+    meta.appendChild(foreignKeyLinkWrap);
+    updateRowEditFieldMetaHidden(meta);
+  }
+  var fieldApi = createColumnFieldApi({
+    id: fieldId,
+    labelId: labelId,
+    descriptionId: metaId,
+    control: control,
+    meta: meta,
+    input: control,
+    form: options.form || null,
+    dialog: options.dialog || null,
+    context: context,
+  });
+  field._datasetteColumnFormField = fieldApi;
+  var pluginControlElement = renderColumnField(pluginControl, fieldApi);
+  var controlElement =
+    pluginControlElement || rowEditControlElement(control, options.autocompleteUrl);
+  if (options.autocompleteUrl && !pluginControlElement) {
+    control.addEventListener("input", function () {
+      setForeignKeyMetaLink(meta, options.autocompleteUrl, null);
+    });
+    control.addEventListener("change", function () {
+      resolveForeignKeyMetaLink(control, options.autocompleteUrl, meta);
+    });
+    controlElement.addEventListener("datasette-autocomplete-select", function (ev) {
+      setForeignKeyMetaLink(
+        meta,
+        options.autocompleteUrl,
+        ev.detail && ev.detail.row,
+      );
+    });
+    resolveForeignKeyMetaLink(control, options.autocompleteUrl, meta);
+  }
+
+  if (hasDefaultExpression) {
+    var defaultBlock = document.createElement("div");
+    defaultBlock.className = "row-edit-default";
+    defaultBlock.setAttribute("aria-describedby", metaId);
+
+    var defaultText = document.createElement("span");
+    defaultText.className = "row-edit-default-text";
+    defaultText.appendChild(document.createTextNode("default "));
+    var defaultCode = document.createElement("code");
+    defaultCode.className = "row-edit-default-code";
+    defaultCode.textContent = defaultExpression;
+    defaultText.appendChild(defaultCode);
+
+    var setValueButton = document.createElement("button");
+    setValueButton.type = "button";
+    setValueButton.className =
+      "row-edit-default-button row-edit-default-set-value";
+    setValueButton.textContent = "Set value";
+    setValueButton.setAttribute("aria-label", "Set value for " + column);
+
+    var customWrap = document.createElement("div");
+    customWrap.className = "row-edit-custom-value";
+    customWrap.hidden = true;
+
+    var useSqliteDefaultButton = document.createElement("button");
+    useSqliteDefaultButton.type = "button";
+    useSqliteDefaultButton.className = "row-edit-default-button";
+    useSqliteDefaultButton.textContent = "Use default";
+    useSqliteDefaultButton.setAttribute(
+      "aria-label",
+      "Use SQLite default for " + column,
+    );
+
+    setValueButton.addEventListener("click", function () {
+      fieldApi.stopUsingSqliteDefault();
+      control.focus();
+    });
+
+    useSqliteDefaultButton.addEventListener("click", function () {
+      fieldApi.useSqliteDefault();
+      setValueButton.focus();
+    });
+
+    defaultBlock.appendChild(defaultText);
+    defaultBlock.appendChild(setValueButton);
+    customWrap.appendChild(controlElement);
+    customWrap.appendChild(useSqliteDefaultButton);
+    controlWrap.appendChild(defaultBlock);
+    controlWrap.appendChild(customWrap);
+    fieldApi.syncSqliteDefaultUi = function () {
+      var usingDefault = fieldApi.isUsingSqliteDefault();
+      defaultBlock.hidden = !usingDefault;
+      customWrap.hidden = usingDefault;
+    };
+    fieldApi.syncSqliteDefaultUi();
+  } else {
+    controlWrap.appendChild(controlElement);
+  }
+  if (meta.textContent || options.autocompleteUrl) {
+    controlWrap.appendChild(meta);
+  }
+  field.appendChild(label);
+  field.appendChild(controlWrap);
+  return field;
+}
+
+function clearRowEditDialogError(state) {
+  state.error.hidden = true;
+  state.error.textContent = "";
+}
+
+function showRowEditDialogError(state, message) {
+  state.error.hidden = false;
+  state.error.textContent = message;
+  state.error.focus();
+}
+
+function updateRowEditDialogButtons(state) {
+  state.saveButton.disabled = state.isLoading || state.isSaving || !state.hasLoaded;
+  state.cancelButton.disabled = state.isSaving;
+  var saveLabel = state.mode === "insert" ? "Insert row" : "Save";
+  state.saveButton.textContent = state.isSaving ? "Saving..." : saveLabel;
+  state.form.setAttribute(
+    "aria-busy",
+    state.isLoading || state.isSaving ? "true" : "false",
+  );
+}
+
+function setRowEditDialogLoading(state, isLoading) {
+  state.isLoading = isLoading;
+  state.loading.hidden = !isLoading;
+  updateRowEditDialogButtons(state);
+}
+
+function setRowEditDialogSaving(state, isSaving) {
+  state.isSaving = isSaving;
+  updateRowEditDialogButtons(state);
+}
+
+function valueFromRowEditControl(control) {
+  var value = control.value;
+  return valueFromRowEditText(
+    control.name,
+    value,
+    rowEditControlValueKind(control),
+  );
+}
+
+function valueFromRowEditText(name, value, initialValueKind) {
+  var trimmed = value.trim();
+
+  if (initialValueKind === "null" && value === "") {
+    return null;
+  }
+  if (initialValueKind === "number") {
+    if (trimmed === "") {
+      return null;
+    }
+    var numberValue = Number(trimmed);
+    if (Number.isNaN(numberValue)) {
+      throw new Error(name + " must be a number");
+    }
+    return numberValue;
+  }
+  if (initialValueKind === "boolean") {
+    if (/^(true|1|yes)$/i.test(trimmed)) {
+      return true;
+    }
+    if (/^(false|0|no)$/i.test(trimmed)) {
+      return false;
+    }
+    throw new Error(name + " must be true or false");
+  }
+  return value;
+}
+
+function initialValueFromRowEditControl(control) {
+  return valueFromRowEditText(
+    control.name,
+    control.dataset.initialValue || "",
+    control.dataset.initialValueKind || "string",
+  );
+}
+
+function rowEditControlValueKind(control) {
+  return (
+    control.dataset.currentValueKind ||
+    control.dataset.initialValueKind ||
+    "string"
+  );
+}
+
+function rowEditControlCleanValue(control) {
+  if (Object.prototype.hasOwnProperty.call(control.dataset, "cleanValue")) {
+    return control.dataset.cleanValue;
+  }
+  return control.dataset.initialValue || "";
+}
+
+function rowEditControlCleanValueKind(control) {
+  return (
+    control.dataset.cleanValueKind ||
+    control.dataset.initialValueKind ||
+    "string"
+  );
+}
+
+function rowEditControlCleanUsesSqliteDefault(control) {
+  if (
+    Object.prototype.hasOwnProperty.call(
+      control.dataset,
+      "cleanUseSqliteDefault",
+    )
+  ) {
+    return control.dataset.cleanUseSqliteDefault === "1";
+  }
+  return false;
+}
+
+function markRowEditControlClean(control) {
+  control.dataset.cleanValue = control.value;
+  control.dataset.cleanValueKind = rowEditControlValueKind(control);
+  control.dataset.cleanUseSqliteDefault =
+    control.dataset.useSqliteDefault === "1" ? "1" : "0";
+}
+
+function cleanValueFromRowEditControl(control) {
+  return valueFromRowEditText(
+    control.name,
+    rowEditControlCleanValue(control),
+    rowEditControlCleanValueKind(control),
+  );
+}
+
+function rowEditValuesMatch(left, right) {
+  if (left === right) {
+    return true;
+  }
+  if (
+    left &&
+    right &&
+    typeof left === "object" &&
+    typeof right === "object"
+  ) {
+    return JSON.stringify(left) === JSON.stringify(right);
+  }
+  return false;
+}
+
+function rowEditControlHasChanged(control) {
+  var usingSqliteDefault = control.dataset.useSqliteDefault === "1";
+  var cleanUsesSqliteDefault = rowEditControlCleanUsesSqliteDefault(control);
+  if (usingSqliteDefault || cleanUsesSqliteDefault) {
+    return usingSqliteDefault !== cleanUsesSqliteDefault;
+  }
+  if (
+    control.value === rowEditControlCleanValue(control) &&
+    rowEditControlValueKind(control) === rowEditControlCleanValueKind(control)
+  ) {
+    return false;
+  }
+  try {
+    return !rowEditValuesMatch(
+      valueFromRowEditControl(control),
+      cleanValueFromRowEditControl(control),
+    );
+  } catch (_error) {
+    return true;
+  }
+}
+
+function collectRowFormValues(state) {
+  var values = {};
+  state.fields.querySelectorAll(".row-edit-input").forEach(function (control) {
+    if (
+      state.mode === "edit" &&
+      (control.readOnly || control.dataset.primaryKey === "1")
+    ) {
+      return;
+    }
+    if (control.dataset.useSqliteDefault === "1") {
+      return;
+    }
+    if (control.dataset.omitIfBlank === "1" && control.value === "") {
+      return;
+    }
+    if (
+      state.mode === "edit" &&
+      control.value === (control.dataset.initialValue || "") &&
+      (control.dataset.currentValueKind ||
+        control.dataset.initialValueKind ||
+        "string") === (control.dataset.initialValueKind || "string")
+    ) {
+      return;
+    }
+    var value = valueFromRowEditControl(control);
+    if (state.mode === "edit") {
+      try {
+        if (rowEditValuesMatch(value, initialValueFromRowEditControl(control))) {
+          return;
+        }
+      } catch (_error) {
+        // If the original value cannot be parsed using the field's current
+        // type, treat the field as changed and submit the corrected value.
+      }
+    }
+    values[control.name] = value;
+  });
+  return values;
+}
+
+function rowEditDialogHasChanges(state) {
+  if (!state || !state.hasLoaded || state.isLoading) {
+    return false;
+  }
+  var fields = state.fields.querySelectorAll(".row-edit-field");
+  for (var i = 0; i < fields.length; i += 1) {
+    var fieldApi = fields[i]._datasetteColumnFormField;
+    if (fieldApi && fieldApi.hasChanged && fieldApi.hasChanged()) {
+      return true;
+    }
+  }
+  return false;
+}
+
+function confirmDiscardRowEditChanges(state) {
+  if (!rowEditDialogHasChanges(state)) {
+    return true;
+  }
+  var message =
+    state.mode === "insert"
+      ? "Discard this new row?"
+      : "Discard unsaved changes to this row?";
+  return window.confirm(message);
+}
+
+function closeRowEditDialogIfConfirmed(state) {
+  if (!state || state.isSaving) {
+    return false;
+  }
+  if (!confirmDiscardRowEditChanges(state)) {
+    return false;
+  }
+  state.shouldRestoreFocus = true;
+  state.dialog.close();
+  return true;
+}
+
+function findDataRowElement(root, rowId) {
+  var elements = root.querySelectorAll("[data-row]");
+  for (var i = 0; i < elements.length; i += 1) {
+    if (elements[i].getAttribute("data-row") === rowId) {
+      return elements[i];
+    }
+  }
+  return null;
+}
+
+async function fetchUpdatedRowElement(state) {
+  if (!state.currentFragmentUrl || !state.currentRowId) {
+    return null;
+  }
+  var response = await fetch(state.currentFragmentUrl, {
+    headers: {
+      Accept: "text/html",
+    },
+  });
+  var html = await response.text();
+  if (!response.ok) {
+    throw new Error("Could not refresh row: HTTP " + response.status);
+  }
+  var doc = new DOMParser().parseFromString(html, "text/html");
+  return findDataRowElement(doc, state.currentRowId);
+}
+
+function rowPathFromRowData(row, primaryKeys) {
+  if (!row) {
+    return null;
+  }
+  var keys = primaryKeys && primaryKeys.length ? primaryKeys : ["rowid"];
+  var bits = [];
+  for (var i = 0; i < keys.length; i += 1) {
+    var key = keys[i];
+    if (typeof row[key] === "undefined") {
+      return null;
+    }
+    bits.push(tildeEncode(row[key]));
+  }
+  return bits.join(",");
+}
+
+function addInsertedRowToPage(rowElement) {
+  var importedRow = document.importNode(rowElement, true);
+  var firstRow = document.querySelector("[data-row]");
+  if (firstRow && firstRow.parentNode) {
+    firstRow.parentNode.insertBefore(importedRow, firstRow);
+  } else {
+    var tbody = document.querySelector("table.rows-and-columns tbody");
+    if (!tbody) {
+      return null;
+    }
+    tbody.appendChild(importedRow);
+  }
+  var zeroResults = document.querySelector(".zero-results");
+  if (zeroResults) {
+    zeroResults.remove();
+  }
+  return importedRow;
+}
+
+async function saveRowEditDialog(state) {
+  if (state.isLoading || state.isSaving || !state.hasLoaded) {
+    return;
+  }
+  clearRowEditDialogError(state);
+  setRowEditDialogSaving(state, true);
+
+  try {
+    var url = state.mode === "insert" ? state.currentInsertUrl : state.currentUpdateUrl;
+    if (!url) {
+      throw new Error(
+        state.mode === "insert"
+          ? "Could not find the row insert URL"
+          : "Could not find the row update URL",
+      );
+    }
+    var formValues = collectRowFormValues(state);
+    if (state.mode === "edit" && !Object.keys(formValues).length) {
+      state.shouldRestoreFocus = true;
+      hideRowMutationStatus();
+      state.dialog.close();
+      return;
+    }
+    var payload =
+      state.mode === "insert"
+        ? { row: formValues, return: true }
+        : { update: formValues, return: true };
+    var response = await fetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+      body: JSON.stringify(payload),
+    });
+    var data = null;
+    try {
+      data = await response.json();
+    } catch (_error) {
+      data = null;
+    }
+    if (!response.ok || (data && data.ok === false)) {
+      throw rowMutationRequestError(response, data);
+    }
+
+    if (state.mode === "insert") {
+      var insertData = tableInsertData() || {};
+      var insertedRowData = data && data.rows && data.rows.length ? data.rows[0] : null;
+      var insertedRowId = rowPathFromRowData(
+        insertedRowData,
+        insertData.primaryKeys || [],
+      );
+      state.shouldRestoreFocus = false;
+      if (!insertedRowId) {
+        state.dialog.close();
+        var missingIdStatus = showRowMutationStatus(
+          state.manager,
+          "Inserted row. Refresh the page to see it.",
+          false,
+        );
+        missingIdStatus.focus();
+        return;
+      }
+
+      state.currentRowId = insertedRowId;
+      state.currentFragmentUrl = rowFragmentUrlById(insertedRowId);
+      var insertedRow = null;
+      try {
+        insertedRow = await fetchUpdatedRowElement(state);
+      } catch (_error) {
+        state.dialog.close();
+        var refreshFailedStatus = showRowMutationStatus(
+          state.manager,
+          "Inserted row, but could not refresh the table row. Refresh the page to see it.",
+          true,
+        );
+        refreshFailedStatus.focus();
+        return;
+      }
+      if (insertedRow) {
+        var insertedStatusMessage = insertedRowStatusMessage(
+          tildeDecode(insertedRowId),
+          rowTitleLabel(insertedRow),
+        );
+        var addedRow = addInsertedRowToPage(insertedRow);
+        state.dialog.close();
+        showRowMutationStatus(state.manager, insertedStatusMessage, false);
+        if (addedRow) {
+          var insertedFocusTarget =
+            addedRow.querySelector('button[data-row-action="edit"]') || addedRow;
+          insertedFocusTarget.focus();
+        }
+      } else {
+        state.dialog.close();
+        var filteredStatus = showRowMutationStatus(
+          state.manager,
+          "Inserted row. It does not match the current filters.",
+          false,
+        );
+        filteredStatus.focus();
+      }
+      return;
+    }
+
+    if (isRowPage()) {
+      state.shouldRestoreFocus = false;
+      state.dialog.close();
+      location.reload();
+      return;
+    }
+
+    var updatedRow = await fetchUpdatedRowElement(state);
+    var focusTarget = null;
+    if (updatedRow && state.currentRow && document.contains(state.currentRow)) {
+      var importedRow = document.importNode(updatedRow, true);
+      state.currentRow.replaceWith(importedRow);
+      showRowMutationStatus(
+        state.manager,
+        state.currentPkPath
+          ? "Updated row " + state.currentPkPath + "."
+          : "Updated row.",
+        false,
+      );
+      focusTarget =
+        importedRow.querySelector('button[data-row-action="edit"]') || importedRow;
+    } else if (state.currentRow && document.contains(state.currentRow)) {
+      focusTarget =
+        nextRowActionFocusTarget(state.currentRow, "edit") ||
+        ensureRowMutationStatus(state.manager);
+      state.currentRow.remove();
+      showRowMutationStatus(
+        state.manager,
+        state.currentPkPath
+          ? "Updated row " +
+              state.currentPkPath +
+              ". It no longer matches the current filters."
+          : "Updated row. It no longer matches the current filters.",
+        false,
+      );
+    }
+
+    state.shouldRestoreFocus = false;
+    state.dialog.close();
+    if (focusTarget && document.contains(focusTarget)) {
+      focusTarget.focus();
+    }
+  } catch (error) {
+    setRowEditDialogSaving(state, false);
+    showRowEditDialogError(state, error.message || "Could not save row");
+  }
+}
+
+function renderRowEditFields(state, data) {
+  var row = data.rows && data.rows.length ? data.rows[0] : null;
+  var columns = data.columns || (row ? Object.keys(row) : []);
+  var primaryKeys = data.primary_keys || [];
+  var columnTypes = data.column_types || {};
+
+  destroyRowEditFields(state);
+  columns.forEach(function (column, index) {
+    state.fields.appendChild(
+      createRowEditField(
+        column,
+        row ? row[column] : null,
+        primaryKeys.indexOf(column) !== -1,
+        columnTypes[column],
+        index,
+        {
+          autocompleteUrl: foreignKeyAutocompleteUrl(column),
+          dialog: state.dialog,
+          form: state.form,
+          manager: state.manager,
+          mode: state.mode,
+          primaryKeyReadonly: true,
+        },
+      ),
+    );
+  });
+
+  state.hasLoaded = true;
+  updateRowEditDialogButtons(state);
+  if (!focusFirstRowEditControl(state, { skipReadonly: true })) {
+    focusFirstRowEditControl(state) || state.cancelButton.focus();
+  }
+}
+
+function renderRowInsertFields(state, data) {
+  var columns = data.columns || [];
+
+  destroyRowEditFields(state);
+  columns.forEach(function (column, index) {
+    state.fields.appendChild(
+      createRowEditField(
+        column.name,
+        "",
+        !!column.is_pk,
+        column.column_type,
+        index,
+        {
+          autocompleteUrl: foreignKeyAutocompleteUrl(column.name),
+          dialog: state.dialog,
+          form: state.form,
+          defaultExpression: column.default,
+          manager: state.manager,
+          mode: state.mode,
+          notnull: column.notnull,
+          primaryKeyReadonly: false,
+          sqliteType: column.sqlite_type,
+          useSqliteDefault: column.default !== null,
+          valueKind: column.value_kind,
+        },
+      ),
+    );
+  });
+
+  if (!columns.length) {
+    var emptyMessage = document.createElement("p");
+    emptyMessage.className = "row-edit-empty";
+    emptyMessage.textContent = "This row will use the table defaults.";
+    state.fields.appendChild(emptyMessage);
+  }
+
+  state.hasLoaded = true;
+  updateRowEditDialogButtons(state);
+  var firstDefaultButton = state.fields.querySelector(".row-edit-default-set-value");
+  if (firstDefaultButton) {
+    firstDefaultButton.focus();
+  } else {
+    focusFirstRowEditControl(state, { skipReadonly: true }) ||
+      state.saveButton.focus();
+  }
+}
+
+function setRowDialogTitle(title, text, codeText, labelText) {
+  title.textContent = "";
+  var action = document.createElement("span");
+  action.className = "row-dialog-action";
+  action.textContent = text;
+  title.appendChild(action);
+  if (!codeText) {
+    return;
+  }
+  title.appendChild(document.createTextNode(" "));
+  var code = document.createElement("code");
+  code.textContent = codeText;
+  title.appendChild(code);
+  if (labelText && labelText !== codeText) {
+    title.appendChild(document.createTextNode(" "));
+    var label = document.createElement("span");
+    label.className = "row-dialog-label";
+    label.textContent = labelText;
+    title.appendChild(label);
+  }
+}
+
+function ensureRowEditDialog(manager) {
+  if (rowEditDialogState) {
+    return rowEditDialogState;
+  }
+  if (!window.HTMLDialogElement) {
+    return null;
+  }
+
+  var dialog = document.createElement("dialog");
+  dialog.id = ROW_EDIT_DIALOG_ID;
+  dialog.className = "row-edit-dialog";
+  dialog.setAttribute("aria-labelledby", "row-edit-title");
+  dialog.innerHTML = `
+    <div class="modal-header">
+      <span class="modal-title" id="row-edit-title">Edit row</span>
+    </div>
+    <form class="row-edit-form" method="post">
+      <p class="row-edit-summary" id="row-edit-summary" hidden></p>
+      <p class="row-edit-loading" role="status" aria-live="polite">Loading row...</p>
+      <p class="row-edit-error" role="alert" tabindex="-1" hidden></p>
+      <div class="row-edit-fields"></div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-ghost row-edit-cancel">Cancel</button>
+        <button type="submit" class="btn btn-primary row-edit-save" disabled>Save</button>
+      </div>
+    </form>
+  `;
+  document.body.appendChild(dialog);
+
+  rowEditDialogState = {
+    dialog: dialog,
+    form: dialog.querySelector(".row-edit-form"),
+    title: dialog.querySelector(".modal-title"),
+    summary: dialog.querySelector(".row-edit-summary"),
+    loading: dialog.querySelector(".row-edit-loading"),
+    error: dialog.querySelector(".row-edit-error"),
+    fields: dialog.querySelector(".row-edit-fields"),
+    cancelButton: dialog.querySelector(".row-edit-cancel"),
+    saveButton: dialog.querySelector(".row-edit-save"),
+    currentButton: null,
+    currentRow: null,
+    currentRowId: null,
+    currentPkPath: null,
+    currentInsertUrl: null,
+    currentUpdateUrl: null,
+    currentFragmentUrl: null,
+    mode: "edit",
+    loadId: 0,
+    manager: manager,
+    isLoading: false,
+    isSaving: false,
+    hasLoaded: false,
+    shouldRestoreFocus: true,
+  };
+
+  rowEditDialogState.form.addEventListener("submit", function (ev) {
+    ev.preventDefault();
+    saveRowEditDialog(rowEditDialogState);
+  });
+
+  rowEditDialogState.cancelButton.addEventListener("click", function () {
+    if (!rowEditDialogState.isSaving) {
+      rowEditDialogState.shouldRestoreFocus = true;
+      dialog.close();
+    }
+  });
+
+  dialog.addEventListener("click", function (ev) {
+    if (ev.target === dialog) {
+      closeRowEditDialogIfConfirmed(rowEditDialogState);
+    }
+  });
+
+  dialog.addEventListener("keydown", function (ev) {
+    if (ev.key !== "Escape") {
+      return;
+    }
+    ev.preventDefault();
+    closeRowEditDialogIfConfirmed(rowEditDialogState);
+  });
+
+  dialog.addEventListener("cancel", function (ev) {
+    if (
+      rowEditDialogState.isSaving ||
+      !confirmDiscardRowEditChanges(rowEditDialogState)
+    ) {
+      ev.preventDefault();
+    } else {
+      rowEditDialogState.shouldRestoreFocus = true;
+    }
+  });
+
+  dialog.addEventListener("close", function () {
+    var state = rowEditDialogState;
+    state.loadId += 1;
+    clearRowEditDialogError(state);
+    state.hasLoaded = false;
+    destroyRowEditFields(state);
+    setRowEditDialogLoading(state, false);
+    setRowEditDialogSaving(state, false);
+    if (
+      state.shouldRestoreFocus &&
+      state.currentButton &&
+      document.contains(state.currentButton)
+    ) {
+      state.currentButton.focus();
+    }
+  });
+
+  return rowEditDialogState;
+}
+
+async function openRowEditDialog(button, manager) {
+  var row = rowElementForActionButton(button);
+  if (!row || !row.getAttribute("data-row")) {
+    return;
+  }
+  var state = ensureRowEditDialog(manager);
+  if (!state) {
+    return;
+  }
+
+  state.manager = manager;
+  state.mode = "edit";
+  state.currentButton = button;
+  state.currentRow = row;
+  state.currentRowId = row.getAttribute("data-row") || "";
+  state.currentPkPath = rowDisplayLabel(row);
+  state.currentInsertUrl = null;
+  state.currentUpdateUrl = rowUpdateUrl(row);
+  state.currentFragmentUrl = rowFragmentUrl(row);
+  if (state.currentUpdateUrl) {
+    state.form.action = new URL(state.currentUpdateUrl, location.href).toString();
+  } else {
+    state.form.removeAttribute("action");
+  }
+  state.shouldRestoreFocus = true;
+  state.hasLoaded = false;
+  state.loadId += 1;
+  var loadId = state.loadId;
+
+  clearRowEditDialogError(state);
+  setRowEditDialogLoading(state, true);
+  destroyRowEditFields(state);
+  state.dialog.removeAttribute("aria-describedby");
+  setRowDialogTitle(
+    state.title,
+    "Edit row",
+    state.currentPkPath || "this row",
+    rowTitleLabel(row),
+  );
+  state.summary.hidden = true;
+  state.summary.textContent = "";
+
+  if (!state.dialog.open) {
+    state.dialog.showModal();
+  }
+  state.cancelButton.focus();
+
+  try {
+    var response = await fetch(rowJsonUrl(row), {
+      headers: {
+        Accept: "application/json",
+      },
+    });
+    var data = await response.json();
+    if (loadId !== state.loadId) {
+      return;
+    }
+    if (!response.ok || data.ok === false) {
+      throw rowMutationRequestError(response, data);
+    }
+    setRowEditDialogLoading(state, false);
+    renderRowEditFields(state, data);
+  } catch (error) {
+    if (loadId !== state.loadId) {
+      return;
+    }
+    setRowEditDialogLoading(state, false);
+    showRowEditDialogError(state, error.message || "Could not load row");
+    state.cancelButton.focus();
+  }
+}
+
+function openRowInsertDialog(button, manager) {
+  var insertData = tableInsertData();
+  if (!insertData) {
+    return;
+  }
+  var state = ensureRowEditDialog(manager);
+  if (!state) {
+    return;
+  }
+
+  state.manager = manager;
+  state.mode = "insert";
+  state.currentButton = button;
+  state.currentRow = null;
+  state.currentRowId = null;
+  state.currentPkPath = null;
+  state.currentInsertUrl = tableInsertUrl();
+  state.currentUpdateUrl = null;
+  state.currentFragmentUrl = null;
+  state.shouldRestoreFocus = true;
+  state.hasLoaded = false;
+  state.loadId += 1;
+
+  if (state.currentInsertUrl) {
+    state.form.action = new URL(state.currentInsertUrl, location.href).toString();
+  } else {
+    state.form.removeAttribute("action");
+  }
+
+  clearRowEditDialogError(state);
+  setRowEditDialogLoading(state, false);
+  destroyRowEditFields(state);
+  state.dialog.removeAttribute("aria-describedby");
+  setRowDialogTitle(
+    state.title,
+    insertData.tableName ? "Insert row into " + insertData.tableName : "Insert row",
+  );
+  state.summary.hidden = true;
+  state.summary.textContent = "";
+
+  if (!state.dialog.open) {
+    state.dialog.showModal();
+  }
+  renderRowInsertFields(state, insertData);
+}
+
+function initRowEditActions(manager) {
+  if (!window.fetch || !window.HTMLDialogElement) {
+    return;
+  }
+  document.addEventListener("click", function (ev) {
+    var button = ev.target.closest('button[data-row-action="edit"]');
+    if (!button) {
+      return;
+    }
+    ev.preventDefault();
+    openRowEditDialog(button, manager);
+  });
+}
+
+function initRowInsertActions(manager) {
+  if (!window.fetch || !window.HTMLDialogElement || !tableInsertData()) {
+    return;
+  }
+  document.addEventListener("click", function (ev) {
+    var button = ev.target.closest('button[data-table-action="insert-row"]');
+    if (!button) {
+      return;
+    }
+    ev.preventDefault();
+    openRowInsertDialog(button, manager);
+  });
+}
+
+document.addEventListener("datasette_init", function (evt) {
+  const { detail: manager } = evt;
+
+  registerBuiltinColumnFieldPlugins(manager);
+  initRowInsertActions(manager);
+  initRowEditActions(manager);
+  initRowDeleteActions(manager);
+});
diff --git a/datasette/static/table.js b/datasette/static/table.js
index 291afc95..f160f3f3 100644
--- a/datasette/static/table.js
+++ b/datasette/static/table.js
@@ -12,11 +12,6 @@ var DROPDOWN_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="14" heig
 
 var SET_COLUMN_TYPE_DIALOG_ID = "set-column-type-dialog";
 var setColumnTypeDialogState = null;
-var ROW_DELETE_DIALOG_ID = "row-delete-dialog";
-var rowDeleteDialogState = null;
-var ROW_EDIT_DIALOG_ID = "row-edit-dialog";
-var rowEditDialogState = null;
-
 function getParams() {
   return new URLSearchParams(location.search);
 }
@@ -359,1935 +354,6 @@ function openSetColumnTypeDialog(th) {
   }
 }
 
-function ensureRowMutationStatus(manager) {
-  var status = document.querySelector(".row-mutation-status");
-  if (status) {
-    return status;
-  }
-
-  status = document.createElement("p");
-  status.className = "row-mutation-status";
-  status.hidden = true;
-  status.setAttribute("role", "status");
-  status.setAttribute("aria-live", "polite");
-  status.setAttribute("tabindex", "-1");
-
-  var tableWrapper = document.querySelector(manager.selectors.tableWrapper);
-  if (tableWrapper && tableWrapper.parentNode) {
-    tableWrapper.parentNode.insertBefore(status, tableWrapper);
-  } else {
-    document.body.appendChild(status);
-  }
-  return status;
-}
-
-function showRowMutationStatus(manager, message, isError) {
-  var status = ensureRowMutationStatus(manager);
-  status.hidden = false;
-  status.classList.toggle("row-mutation-status-error", !!isError);
-  status.textContent = message;
-  return status;
-}
-
-function hideRowMutationStatus() {
-  var status = document.querySelector(".row-mutation-status");
-  if (!status) {
-    return;
-  }
-  status.hidden = true;
-  status.classList.remove("row-mutation-status-error");
-  status.textContent = "";
-}
-
-function setRowDeleteDialogBusy(state, isBusy) {
-  state.isBusy = isBusy;
-  state.confirmButton.disabled = isBusy;
-  state.cancelButton.disabled = isBusy;
-  state.confirmButton.textContent = isBusy ? "Deleting..." : "Delete row";
-}
-
-function clearRowDeleteDialogError(state) {
-  state.error.hidden = true;
-  state.error.textContent = "";
-}
-
-function showRowDeleteDialogError(state, message) {
-  state.error.hidden = false;
-  state.error.textContent = message;
-}
-
-function rowMutationRequestError(response, data) {
-  if (data && data.errors) {
-    return new Error(data.errors.join(" "));
-  }
-  if (data && data.error) {
-    return new Error(data.error);
-  }
-  if (data && data.title) {
-    return new Error(data.title);
-  }
-  return new Error("Request failed with HTTP " + response.status);
-}
-
-function tildeDecode(value) {
-  if (!value) {
-    return "";
-  }
-  var placeholder = "__datasette_percent_placeholder__";
-  try {
-    return decodeURIComponent(
-      value
-        .replace(/%/g, placeholder)
-        .replace(/~/g, "%")
-        .replace(/\+/g, " "),
-    ).replace(new RegExp(placeholder, "g"), "%");
-  } catch (_error) {
-    return value;
-  }
-}
-
-function tildeEncode(value) {
-  var bytes = new TextEncoder().encode(String(value));
-  var encoded = "";
-  bytes.forEach(function (byte) {
-    var isSafe =
-      (byte >= 65 && byte <= 90) ||
-      (byte >= 97 && byte <= 122) ||
-      (byte >= 48 && byte <= 57) ||
-      byte === 95 ||
-      byte === 45;
-    if (isSafe) {
-      encoded += String.fromCharCode(byte);
-    } else if (byte === 32) {
-      encoded += "+";
-    } else {
-      encoded += "~" + byte.toString(16).toUpperCase().padStart(2, "0");
-    }
-  });
-  return encoded;
-}
-
-function rowDisplayLabel(row) {
-  return tildeDecode(row.getAttribute("data-row") || "");
-}
-
-function rowTitleLabel(row) {
-  return row.getAttribute("data-row-label") || "";
-}
-
-function insertedRowStatusMessage(rowId, rowLabel) {
-  var message = "Inserted row " + rowId;
-  if (rowLabel && rowLabel !== rowId) {
-    message += " (" + rowLabel + ")";
-  }
-  return message + ".";
-}
-
-function tableBaseUrl() {
-  var tableUrl =
-    window._datasetteTableData && window._datasetteTableData.tableUrl;
-  var url = new URL(tableUrl || location.href, location.href);
-  url.hash = "";
-  url.search = "";
-  return url;
-}
-
-function tablePageData() {
-  return window._datasetteTableData || {};
-}
-
-function tableInsertData() {
-  return tablePageData().insertRow;
-}
-
-function tableForeignKeys() {
-  return tablePageData().foreignKeys || {};
-}
-
-function foreignKeyAutocompleteUrl(column) {
-  return tableForeignKeys()[column] || null;
-}
-
-function autocompleteRowPk(row) {
-  var pks = (row && row.pks) || {};
-  var keys = Object.keys(pks);
-  if (keys.length !== 1) {
-    return null;
-  }
-  return pks[keys[0]];
-}
-
-function foreignKeyRowUrl(autocompleteUrl, pk) {
-  var url = new URL(autocompleteUrl, location.href);
-  if (!/\/-\/autocomplete\/?$/.test(url.pathname)) {
-    return null;
-  }
-  url.pathname =
-    url.pathname.replace(/\/-\/autocomplete\/?$/, "") + "/" + tildeEncode(pk);
-  url.search = "";
-  url.hash = "";
-  return url.toString();
-}
-
-function foreignKeyLabelText(row) {
-  var pk = autocompleteRowPk(row);
-  var label = row && row.label;
-  if (
-    label !== null &&
-    typeof label !== "undefined" &&
-    String(label) !== String(pk)
-  ) {
-    return String(label);
-  }
-  return "View row";
-}
-
-function rowEditMetaTextWithoutCurrentValue(meta) {
-  return (meta.dataset.baseMeta || "")
-    .split(" · ")
-    .filter(function (part) {
-      return part !== "Current value: NULL";
-    })
-    .join(" · ");
-}
-
-function updateRowEditForeignKeySeparator(meta) {
-  var separator = meta.querySelector(".row-edit-fk-separator");
-  if (!separator) {
-    return;
-  }
-  var baseMeta = meta.querySelector(".row-edit-base-meta");
-  var hasBaseMeta = !!(baseMeta && baseMeta.textContent);
-  separator.textContent = hasBaseMeta ? " · " : "";
-  separator.hidden = !hasBaseMeta;
-}
-
-function updateRowEditFieldMetaHidden(meta) {
-  var baseMeta = meta.querySelector(".row-edit-base-meta");
-  var hasBaseMeta = !!(baseMeta && baseMeta.textContent);
-  var foreignKeyLinkWrap = meta.querySelector(".row-edit-fk-link-wrap");
-  var hasForeignKeyLink = foreignKeyLinkWrap && !foreignKeyLinkWrap.hidden;
-  meta.hidden =
-    meta.dataset.reserveSpace !== "1" && !hasBaseMeta && !hasForeignKeyLink;
-}
-
-function setRowEditBaseMetaText(meta, text) {
-  var baseMeta = meta.querySelector(".row-edit-base-meta");
-  if (!baseMeta) {
-    return;
-  }
-  baseMeta.textContent = text || "";
-  updateRowEditForeignKeySeparator(meta);
-  updateRowEditFieldMetaHidden(meta);
-}
-
-function setForeignKeyMetaLink(meta, autocompleteUrl, row) {
-  var wrap = meta.querySelector(".row-edit-fk-link-wrap");
-  if (!wrap) {
-    return;
-  }
-  var pkSpan = wrap.querySelector(".row-edit-fk-pk");
-  var link = wrap.querySelector("a");
-  var pk = autocompleteRowPk(row);
-  var url =
-    pk === null || typeof pk === "undefined"
-      ? null
-      : foreignKeyRowUrl(autocompleteUrl, pk);
-  if (!url) {
-    wrap.hidden = true;
-    pkSpan.textContent = "";
-    link.removeAttribute("href");
-    link.textContent = "";
-    link.removeAttribute("aria-label");
-    setRowEditBaseMetaText(meta, meta.dataset.baseMeta || "");
-    updateRowEditFieldMetaHidden(meta);
-    return;
-  }
-  setRowEditBaseMetaText(meta, rowEditMetaTextWithoutCurrentValue(meta));
-  var pkText = String(pk);
-  var linkText = foreignKeyLabelText(row);
-  pkSpan.textContent = pkText;
-  link.href = url;
-  link.textContent = linkText;
-  link.setAttribute(
-    "aria-label",
-    "Open referenced row " + pkText + " " + linkText + " in a new tab",
-  );
-  wrap.hidden = false;
-  updateRowEditFieldMetaHidden(meta);
-}
-
-async function resolveForeignKeyMetaLink(control, autocompleteUrl, meta) {
-  var value = control.value.trim();
-  if (!value) {
-    setForeignKeyMetaLink(meta, autocompleteUrl, null);
-    return;
-  }
-
-  var url = new URL(autocompleteUrl, location.href);
-  url.searchParams.set("q", value);
-  try {
-    var response = await fetch(url.toString(), {
-      headers: {
-        Accept: "application/json",
-      },
-    });
-    if (!response.ok) {
-      throw new Error("HTTP " + response.status);
-    }
-    var data = await response.json();
-    if (control.value.trim() !== value) {
-      return;
-    }
-    var rows = (data && data.rows) || [];
-    var row = rows.find(function (candidate) {
-      var pk = autocompleteRowPk(candidate);
-      return pk !== null && typeof pk !== "undefined" && String(pk) === value;
-    });
-    setForeignKeyMetaLink(meta, autocompleteUrl, row || null);
-  } catch (_error) {
-    if (control.value.trim() === value) {
-      setForeignKeyMetaLink(meta, autocompleteUrl, null);
-    }
-  }
-}
-
-function tableInsertUrl() {
-  var data = tableInsertData();
-  if (data && data.path) {
-    return new URL(data.path, location.href).toString();
-  }
-  var url = tableBaseUrl();
-  url.pathname = url.pathname.replace(/\/$/, "") + "/-/insert";
-  return url.toString();
-}
-
-function rowResourceUrl(row) {
-  var rowId = row.getAttribute("data-row");
-  if (!rowId) {
-    return null;
-  }
-  var url = tableBaseUrl();
-  url.pathname = url.pathname.replace(/\/$/, "") + "/" + rowId;
-  return url;
-}
-
-function rowJsonUrl(row) {
-  var url = rowResourceUrl(row);
-  if (!url) {
-    return "";
-  }
-  url.pathname = url.pathname + ".json";
-  url.searchParams.set("_extra", "columns,column_types");
-  return url.toString();
-}
-
-function rowDeleteUrl(row) {
-  var url = rowResourceUrl(row);
-  if (!url) {
-    return "";
-  }
-  url.pathname = url.pathname.replace(/\/$/, "") + "/-/delete";
-  return url.toString();
-}
-
-function rowUpdateUrl(row) {
-  var url = rowResourceUrl(row);
-  if (!url) {
-    return "";
-  }
-  url.pathname = url.pathname.replace(/\/$/, "") + "/-/update";
-  return url.toString();
-}
-
-function rowFragmentUrl(row) {
-  var rowId = row.getAttribute("data-row");
-  return rowFragmentUrlById(rowId);
-}
-
-function rowFragmentUrlById(rowId) {
-  if (!rowId) {
-    return "";
-  }
-  var url = tableBaseUrl();
-  url.search = new URL(location.href).search;
-  url.pathname = url.pathname.replace(/\/$/, "") + "/-/fragment";
-  url.searchParams.delete("_next");
-  url.searchParams.set("_row", rowId);
-  url.searchParams.set("_nocount", "1");
-  url.searchParams.set("_nofacet", "1");
-  url.searchParams.set("_nosuggest", "1");
-  return url.toString();
-}
-
-function nextRowActionFocusTarget(row, action) {
-  var selector = 'button[data-row-action="' + action + '"]:not([disabled])';
-  var sibling = row.nextElementSibling;
-  while (sibling) {
-    var nextButton = sibling.querySelector(selector);
-    if (nextButton) {
-      return nextButton;
-    }
-    sibling = sibling.nextElementSibling;
-  }
-
-  sibling = row.previousElementSibling;
-  while (sibling) {
-    var previousButton = sibling.querySelector(selector);
-    if (previousButton) {
-      return previousButton;
-    }
-    sibling = sibling.previousElementSibling;
-  }
-
-  return null;
-}
-
-function nextRowDeleteFocusTarget(row, manager) {
-  return nextRowActionFocusTarget(row, "delete") || ensureRowMutationStatus(manager);
-}
-
-function ensureRowDeleteDialog(manager) {
-  if (rowDeleteDialogState) {
-    return rowDeleteDialogState;
-  }
-  if (!window.HTMLDialogElement) {
-    return null;
-  }
-
-  var dialog = document.createElement("dialog");
-  dialog.id = ROW_DELETE_DIALOG_ID;
-  dialog.className = "row-delete-dialog";
-  dialog.setAttribute("aria-labelledby", "row-delete-title");
-  dialog.setAttribute("aria-describedby", "row-delete-message");
-  dialog.innerHTML = `
-    <div class="modal-header">
-      <span class="modal-title" id="row-delete-title">Delete row</span>
-    </div>
-    <p class="row-delete-message" id="row-delete-message">Delete row <span class="row-delete-id"></span>?</p>
-    <p class="row-delete-error" role="alert" hidden></p>
-    <div class="modal-footer">
-      <button type="button" class="btn btn-ghost row-delete-cancel">Cancel</button>
-      <button type="button" class="btn btn-primary row-delete-confirm">Delete row</button>
-    </div>
-  `;
-  document.body.appendChild(dialog);
-
-  rowDeleteDialogState = {
-    dialog: dialog,
-    title: dialog.querySelector(".modal-title"),
-    message: dialog.querySelector(".row-delete-message"),
-    rowId: dialog.querySelector(".row-delete-id"),
-    error: dialog.querySelector(".row-delete-error"),
-    cancelButton: dialog.querySelector(".row-delete-cancel"),
-    confirmButton: dialog.querySelector(".row-delete-confirm"),
-    currentRow: null,
-    currentDeleteUrl: null,
-    currentPkPath: null,
-    manager: manager,
-    isBusy: false,
-    shouldRestoreFocus: true,
-  };
-
-  rowDeleteDialogState.cancelButton.addEventListener("click", function () {
-    if (!rowDeleteDialogState.isBusy) {
-      rowDeleteDialogState.shouldRestoreFocus = true;
-      dialog.close();
-    }
-  });
-
-  dialog.addEventListener("click", function (ev) {
-    if (ev.target === dialog && !rowDeleteDialogState.isBusy) {
-      rowDeleteDialogState.shouldRestoreFocus = true;
-      dialog.close();
-    }
-  });
-
-  dialog.addEventListener("keydown", function (ev) {
-    if (
-      ev.key === "Enter" &&
-      document.activeElement === rowDeleteDialogState.confirmButton
-    ) {
-      ev.preventDefault();
-      if (!rowDeleteDialogState.isBusy) {
-        rowDeleteDialogState.confirmButton.click();
-      }
-      return;
-    }
-    if (ev.key !== "Escape") {
-      return;
-    }
-    if (rowDeleteDialogState.isBusy) {
-      ev.preventDefault();
-      return;
-    }
-    ev.preventDefault();
-    rowDeleteDialogState.shouldRestoreFocus = true;
-    dialog.close();
-  });
-
-  dialog.addEventListener("cancel", function (ev) {
-    if (rowDeleteDialogState.isBusy) {
-      ev.preventDefault();
-    } else {
-      rowDeleteDialogState.shouldRestoreFocus = true;
-    }
-  });
-
-  dialog.addEventListener("close", function () {
-    var state = rowDeleteDialogState;
-    clearRowDeleteDialogError(state);
-    setRowDeleteDialogBusy(state, false);
-    if (
-      state.shouldRestoreFocus &&
-      state.currentButton &&
-      document.contains(state.currentButton)
-    ) {
-      state.currentButton.focus();
-    }
-  });
-
-  rowDeleteDialogState.confirmButton.addEventListener("click", async function () {
-    var state = rowDeleteDialogState;
-    clearRowDeleteDialogError(state);
-    setRowDeleteDialogBusy(state, true);
-
-    try {
-      var response = await fetch(state.currentDeleteUrl, {
-        method: "POST",
-        headers: {
-          Accept: "application/json",
-        },
-      });
-      var data = null;
-      try {
-        data = await response.json();
-      } catch (_error) {
-        data = null;
-      }
-      if (!response.ok || (data && data.ok === false)) {
-        throw rowMutationRequestError(response, data);
-      }
-
-      var focusTarget = nextRowDeleteFocusTarget(state.currentRow, state.manager);
-      var statusMessage = state.currentPkPath
-        ? "Deleted row " + state.currentPkPath + "."
-        : "Deleted row.";
-      state.shouldRestoreFocus = false;
-      state.dialog.close();
-      state.currentRow.remove();
-      showRowMutationStatus(state.manager, statusMessage, false);
-      if (focusTarget && document.contains(focusTarget)) {
-        focusTarget.focus();
-      } else {
-        ensureRowMutationStatus(state.manager).focus();
-      }
-    } catch (error) {
-      setRowDeleteDialogBusy(state, false);
-      showRowDeleteDialogError(state, error.message || "Delete failed");
-    }
-  });
-
-  return rowDeleteDialogState;
-}
-
-function openRowDeleteDialog(button, manager) {
-  var row = button.closest("[data-row]");
-  if (!row || !row.getAttribute("data-row")) {
-    return;
-  }
-  var state = ensureRowDeleteDialog(manager);
-  if (!state) {
-    return;
-  }
-
-  state.manager = manager;
-  state.currentButton = button;
-  state.currentRow = row;
-  state.currentDeleteUrl = rowDeleteUrl(row);
-  state.currentPkPath = rowDisplayLabel(row);
-  state.shouldRestoreFocus = true;
-
-  clearRowDeleteDialogError(state);
-  setRowDeleteDialogBusy(state, false);
-  setRowDialogTitle(
-    state.title,
-    "Delete row",
-    state.currentPkPath || "this row",
-    rowTitleLabel(row),
-  );
-  state.rowId.textContent = state.currentPkPath || "this row";
-
-  if (!state.dialog.open) {
-    state.dialog.showModal();
-  }
-  state.confirmButton.focus();
-}
-
-function initRowDeleteActions(manager) {
-  if (!window.fetch || !window.HTMLDialogElement) {
-    return;
-  }
-  document.addEventListener("click", function (ev) {
-    var button = ev.target.closest('button[data-row-action="delete"]');
-    if (!button) {
-      return;
-    }
-    ev.preventDefault();
-    openRowDeleteDialog(button, manager);
-  });
-}
-
-function valueToEditText(value) {
-  if (value === null || typeof value === "undefined") {
-    return "";
-  }
-  if (typeof value === "object") {
-    return JSON.stringify(value, null, 2);
-  }
-  return String(value);
-}
-
-function shouldUseTextarea(value, columnType) {
-  if (columnType && columnType.type === "textarea") {
-    return true;
-  }
-  if (value && typeof value === "object") {
-    return true;
-  }
-  var text = valueToEditText(value);
-  return text.length > 80 || /[\r\n]/.test(text);
-}
-
-function rowEditValueKind(value) {
-  if (value === null || typeof value === "undefined") {
-    return "null";
-  }
-  if (typeof value === "number") {
-    return "number";
-  }
-  if (typeof value === "boolean") {
-    return "boolean";
-  }
-  return "string";
-}
-
-function rowEditControlElement(control, autocompleteUrl) {
-  if (!autocompleteUrl || control.nodeName !== "INPUT") {
-    return control;
-  }
-  var autocomplete = document.createElement("datasette-autocomplete");
-  autocomplete.setAttribute("src", autocompleteUrl);
-  autocomplete.setAttribute("suggest-on-focus", "");
-  autocomplete.appendChild(control);
-  return autocomplete;
-}
-
-function columnTypeForContext(columnType) {
-  if (!columnType) {
-    return null;
-  }
-  return {
-    type: columnType.type,
-    config: columnType.config || {},
-  };
-}
-
-function defaultExpressionForContext(expression) {
-  if (expression === null || typeof expression === "undefined") {
-    return null;
-  }
-  return expression;
-}
-
-function columnFormControlContext(column, isPk, columnType, options) {
-  var pageData = tablePageData();
-  var defaultExpression = defaultExpressionForContext(options.defaultExpression);
-  return {
-    mode: options.mode || "edit",
-    database: pageData.database || null,
-    table: pageData.table || (tableInsertData() && tableInsertData().tableName) || null,
-    tableUrl: pageData.tableUrl || null,
-    column: column,
-    columnType: columnTypeForContext(columnType),
-    sqliteType: options.sqliteType || null,
-    notNull: !!options.notnull,
-    isPk: !!isPk,
-    defaultExpression: defaultExpression,
-    form: options.form || null,
-    dialog: options.dialog || null,
-  };
-}
-
-function makeColumnField(manager, context) {
-  if (!manager || !manager.makeColumnField) {
-    return null;
-  }
-  return manager.makeColumnField(context);
-}
-
-function createColumnFieldApi(options) {
-  var control = options.control;
-  var context = options.context;
-  var field = {
-    context: context,
-    id: options.id,
-    labelId: options.labelId,
-    descriptionId: options.descriptionId,
-    root: null,
-    form: options.form || null,
-    dialog: options.dialog || null,
-    input: control,
-    control: control,
-    meta: options.meta || null,
-    validationMessageElement: null,
-    getValue: function () {
-      return valueFromRowEditControl(control);
-    },
-    setValue: function (value) {
-      if (
-        value !== null &&
-        typeof value !== "undefined" &&
-        typeof value === "object"
-      ) {
-        throw new TypeError(
-          "field.setValue() accepts strings, numbers, booleans or null; serialize objects before setting the field value",
-        );
-      }
-      field.stopUsingSqliteDefault();
-      control.value = valueToEditText(value);
-      control.dataset.currentValueKind = rowEditValueKind(value);
-    },
-    getInitialValue: function () {
-      return initialValueFromRowEditControl(control);
-    },
-    hasChanged: function () {
-      return rowEditControlHasChanged(control);
-    },
-    clearValue: function () {
-      field.setValue(null);
-    },
-    isUsingSqliteDefault: function () {
-      return control.dataset.useSqliteDefault === "1";
-    },
-    useSqliteDefault: function () {
-      if (
-        context.defaultExpression === null ||
-        typeof context.defaultExpression === "undefined"
-      ) {
-        return;
-      }
-      control.dataset.useSqliteDefault = "1";
-      control.disabled = true;
-      control.value = "";
-      control.dataset.currentValueKind = "null";
-      field.syncSqliteDefaultUi();
-    },
-    stopUsingSqliteDefault: function () {
-      if (control.dataset.useSqliteDefault !== "1") {
-        return;
-      }
-      control.dataset.useSqliteDefault = "0";
-      control.disabled = false;
-      field.syncSqliteDefaultUi();
-    },
-    syncSqliteDefaultUi: function () {},
-    markClean: function () {
-      markRowEditControlClean(control);
-    },
-    setValidity: function (message) {
-      message = message || "";
-      control.setCustomValidity(message);
-      if (message) {
-        control.setAttribute("aria-invalid", "true");
-      } else {
-        control.removeAttribute("aria-invalid");
-      }
-      var validationMessage = ensureColumnFieldValidationMessage(field);
-      if (validationMessage) {
-        validationMessage.textContent = message;
-        validationMessage.hidden = !message;
-      }
-    },
-    clearValidity: function () {
-      field.setValidity("");
-    },
-  };
-  field.markClean();
-  return field;
-}
-
-function ensureColumnFieldValidationMessage(field) {
-  if (field.validationMessageElement) {
-    return field.validationMessageElement;
-  }
-  if (!field.meta) {
-    return null;
-  }
-  var validationMessage = document.createElement("span");
-  validationMessage.id = field.id + "-validation-error";
-  validationMessage.className = "row-edit-field-validation-error";
-  validationMessage.hidden = true;
-  validationMessage.setAttribute("role", "alert");
-  field.meta.appendChild(validationMessage);
-  field.validationMessageElement = validationMessage;
-  return validationMessage;
-}
-
-function renderColumnField(pluginControl, fieldApi) {
-  if (!pluginControl || !pluginControl.render) {
-    return null;
-  }
-  var pluginWrap = document.createElement("div");
-  pluginWrap.className = "row-edit-plugin-control";
-  pluginWrap.dataset.pluginName = pluginControl.pluginName || "";
-  pluginWrap.dataset.column = fieldApi.context.column;
-  if (fieldApi.context.columnType && fieldApi.context.columnType.type) {
-    pluginWrap.dataset.columnType = fieldApi.context.columnType.type;
-  }
-  fieldApi.root = pluginWrap;
-  try {
-    var rendered = pluginControl.render(fieldApi);
-    if (rendered && rendered.nodeType) {
-      pluginWrap.appendChild(rendered);
-    }
-  } catch (error) {
-    console.error("Error rendering column form control", error);
-    return null;
-  }
-  pluginWrap._datasetteColumnField = pluginControl;
-  pluginWrap._datasetteColumnFormField = fieldApi;
-  return pluginWrap;
-}
-
-function validateJsonColumnField(field) {
-  var value = field.input.value;
-  if (value.trim() === "") {
-    field.clearValidity();
-    return true;
-  }
-  try {
-    JSON.parse(value);
-    field.clearValidity();
-    return true;
-  } catch (error) {
-    field.setValidity(
-      "Invalid JSON" + (error && error.message ? ": " + error.message : ""),
-    );
-    return false;
-  }
-}
-
-function registerBuiltinColumnFieldPlugins(manager) {
-  if (!manager || !manager.registerPlugin) {
-    return;
-  }
-  manager.registerPlugin("datasette-json-column", {
-    version: "1.0",
-    makeColumnField: function (context) {
-      if (!context.columnType || context.columnType.type !== "json") {
-        return;
-      }
-      return {
-        useTextarea: true,
-        render: function (field) {
-          field.input.addEventListener("input", function () {
-            validateJsonColumnField(field);
-          });
-          field.input.addEventListener("change", function () {
-            validateJsonColumnField(field);
-          });
-          validateJsonColumnField(field);
-          return field.input;
-        },
-        focus: function (field) {
-          field.input.focus();
-        },
-      };
-    },
-  });
-}
-
-function focusRowEditPluginControl(field) {
-  var pluginWrap = field.querySelector(".row-edit-plugin-control");
-  if (!pluginWrap) {
-    return false;
-  }
-  var pluginControl = pluginWrap._datasetteColumnField;
-  var fieldApi = pluginWrap._datasetteColumnFormField;
-  if (pluginControl && pluginControl.focus) {
-    try {
-      pluginControl.focus(fieldApi);
-      return true;
-    } catch (error) {
-      console.error("Error focusing column form control", error);
-    }
-  }
-  return false;
-}
-
-function focusFirstRowEditControl(state, options) {
-  options = options || {};
-  var fields = state.fields.querySelectorAll(".row-edit-field");
-  for (var i = 0; i < fields.length; i += 1) {
-    var field = fields[i];
-    var control = field.querySelector(".row-edit-input");
-    if (!control) {
-      continue;
-    }
-    if (options.skipReadonly && (control.readOnly || control.disabled)) {
-      continue;
-    }
-    if (focusRowEditPluginControl(field)) {
-      return true;
-    }
-    control.focus();
-    return true;
-  }
-  return false;
-}
-
-function destroyRowEditFields(state) {
-  if (!state || !state.fields) {
-    return;
-  }
-  state.fields
-    .querySelectorAll(".row-edit-plugin-control")
-    .forEach(function (pluginWrap) {
-      var pluginControl = pluginWrap._datasetteColumnField;
-      var fieldApi = pluginWrap._datasetteColumnFormField;
-      if (pluginControl && pluginControl.destroy) {
-        try {
-          pluginControl.destroy(fieldApi);
-        } catch (error) {
-          console.error("Error destroying column form control", error);
-        }
-      }
-    });
-  state.fields.innerHTML = "";
-}
-
-function createRowEditField(column, value, isPk, columnType, index, options) {
-  options = options || {};
-  var field = document.createElement("div");
-  field.className = "row-edit-field";
-  var defaultExpression = defaultExpressionForContext(options.defaultExpression);
-  var hasDefaultExpression = defaultExpression !== null;
-  var useSqliteDefault = hasDefaultExpression && options.useSqliteDefault;
-
-  var fieldId = "row-edit-field-" + index;
-  var metaId = "row-edit-field-meta-" + index;
-  var labelId = "row-edit-field-label-" + index;
-  var label = document.createElement("label");
-  label.className = "row-edit-label";
-  label.id = labelId;
-  label.setAttribute("for", fieldId);
-  label.textContent = column;
-
-  var controlWrap = document.createElement("div");
-  controlWrap.className = "row-edit-control-wrap";
-
-  var context = columnFormControlContext(
-    column,
-    isPk,
-    columnType,
-    options,
-  );
-  var pluginControl = makeColumnField(options.manager, context);
-  var useTextarea =
-    (pluginControl && pluginControl.useTextarea === true) ||
-    shouldUseTextarea(value, columnType);
-  var control = useTextarea
-    ? document.createElement("textarea")
-    : document.createElement("input");
-  control.className = "row-edit-input";
-  control.id = fieldId;
-  control.name = column;
-  control.value = valueToEditText(value);
-  control.setAttribute("aria-describedby", metaId);
-  control.dataset.initialValue = valueToEditText(value);
-  control.dataset.initialValueKind =
-    options.valueKind || rowEditValueKind(value);
-  control.dataset.primaryKey = isPk ? "1" : "0";
-  control.dataset.currentValueKind = control.dataset.initialValueKind;
-  if (hasDefaultExpression) {
-    control.dataset.useSqliteDefault = useSqliteDefault ? "1" : "0";
-  }
-  if (useSqliteDefault) {
-    control.disabled = true;
-  }
-  if (options.omitIfBlank) {
-    control.dataset.omitIfBlank = "1";
-  }
-
-  if (control.nodeName === "TEXTAREA") {
-    control.rows = Math.min(8, Math.max(3, control.value.split("\n").length));
-  } else {
-    control.type = "text";
-  }
-
-  if (isPk && options.primaryKeyReadonly !== false) {
-    control.readOnly = true;
-  }
-
-  var meta = document.createElement("span");
-  meta.id = metaId;
-  meta.className = "row-edit-field-meta";
-  if (options.autocompleteUrl) {
-    meta.classList.add("row-edit-field-meta-autocomplete");
-    meta.dataset.reserveSpace = "1";
-  }
-  var metaParts = [];
-  if (isPk) {
-    metaParts.push("Primary key");
-  }
-  if (options.notnull) {
-    metaParts.push("Required");
-  }
-  if (hasDefaultExpression && !useSqliteDefault) {
-    metaParts.push("SQLite default: " + defaultExpression);
-  }
-  if (value === null) {
-    metaParts.push("Current value: NULL");
-    control.placeholder = "NULL";
-  }
-  if (columnType && columnType.type) {
-    metaParts.push("Custom type: " + columnType.type);
-  }
-  meta.dataset.baseMeta = metaParts.join(" · ");
-  var baseMeta = document.createElement("span");
-  baseMeta.className = "row-edit-base-meta";
-  baseMeta.textContent = meta.dataset.baseMeta;
-  meta.appendChild(baseMeta);
-  if (options.autocompleteUrl) {
-    var foreignKeyLinkWrap = document.createElement("span");
-    foreignKeyLinkWrap.className = "row-edit-fk-link-wrap";
-    foreignKeyLinkWrap.hidden = true;
-    var foreignKeySeparator = document.createElement("span");
-    foreignKeySeparator.className = "row-edit-fk-separator";
-    foreignKeySeparator.textContent = meta.dataset.baseMeta ? " · " : "";
-    foreignKeySeparator.hidden = !meta.dataset.baseMeta;
-    foreignKeyLinkWrap.appendChild(foreignKeySeparator);
-    var foreignKeyPk = document.createElement("span");
-    foreignKeyPk.className = "row-edit-fk-pk";
-    foreignKeyLinkWrap.appendChild(foreignKeyPk);
-    foreignKeyLinkWrap.appendChild(document.createTextNode(" "));
-    var foreignKeyLink = document.createElement("a");
-    foreignKeyLink.className = "row-edit-fk-link";
-    foreignKeyLink.target = "_blank";
-    foreignKeyLink.rel = "noopener noreferrer";
-    foreignKeyLinkWrap.appendChild(foreignKeyLink);
-    meta.appendChild(foreignKeyLinkWrap);
-    updateRowEditFieldMetaHidden(meta);
-  }
-  var fieldApi = createColumnFieldApi({
-    id: fieldId,
-    labelId: labelId,
-    descriptionId: metaId,
-    control: control,
-    meta: meta,
-    input: control,
-    form: options.form || null,
-    dialog: options.dialog || null,
-    context: context,
-  });
-  field._datasetteColumnFormField = fieldApi;
-  var pluginControlElement = renderColumnField(pluginControl, fieldApi);
-  var controlElement =
-    pluginControlElement || rowEditControlElement(control, options.autocompleteUrl);
-  if (options.autocompleteUrl && !pluginControlElement) {
-    control.addEventListener("input", function () {
-      setForeignKeyMetaLink(meta, options.autocompleteUrl, null);
-    });
-    control.addEventListener("change", function () {
-      resolveForeignKeyMetaLink(control, options.autocompleteUrl, meta);
-    });
-    controlElement.addEventListener("datasette-autocomplete-select", function (ev) {
-      setForeignKeyMetaLink(
-        meta,
-        options.autocompleteUrl,
-        ev.detail && ev.detail.row,
-      );
-    });
-    resolveForeignKeyMetaLink(control, options.autocompleteUrl, meta);
-  }
-
-  if (hasDefaultExpression) {
-    var defaultBlock = document.createElement("div");
-    defaultBlock.className = "row-edit-default";
-    defaultBlock.setAttribute("aria-describedby", metaId);
-
-    var defaultText = document.createElement("span");
-    defaultText.className = "row-edit-default-text";
-    defaultText.appendChild(document.createTextNode("default "));
-    var defaultCode = document.createElement("code");
-    defaultCode.className = "row-edit-default-code";
-    defaultCode.textContent = defaultExpression;
-    defaultText.appendChild(defaultCode);
-
-    var setValueButton = document.createElement("button");
-    setValueButton.type = "button";
-    setValueButton.className =
-      "row-edit-default-button row-edit-default-set-value";
-    setValueButton.textContent = "Set value";
-    setValueButton.setAttribute("aria-label", "Set value for " + column);
-
-    var customWrap = document.createElement("div");
-    customWrap.className = "row-edit-custom-value";
-    customWrap.hidden = true;
-
-    var useSqliteDefaultButton = document.createElement("button");
-    useSqliteDefaultButton.type = "button";
-    useSqliteDefaultButton.className = "row-edit-default-button";
-    useSqliteDefaultButton.textContent = "Use default";
-    useSqliteDefaultButton.setAttribute(
-      "aria-label",
-      "Use SQLite default for " + column,
-    );
-
-    setValueButton.addEventListener("click", function () {
-      fieldApi.stopUsingSqliteDefault();
-      control.focus();
-    });
-
-    useSqliteDefaultButton.addEventListener("click", function () {
-      fieldApi.useSqliteDefault();
-      setValueButton.focus();
-    });
-
-    defaultBlock.appendChild(defaultText);
-    defaultBlock.appendChild(setValueButton);
-    customWrap.appendChild(controlElement);
-    customWrap.appendChild(useSqliteDefaultButton);
-    controlWrap.appendChild(defaultBlock);
-    controlWrap.appendChild(customWrap);
-    fieldApi.syncSqliteDefaultUi = function () {
-      var usingDefault = fieldApi.isUsingSqliteDefault();
-      defaultBlock.hidden = !usingDefault;
-      customWrap.hidden = usingDefault;
-    };
-    fieldApi.syncSqliteDefaultUi();
-  } else {
-    controlWrap.appendChild(controlElement);
-  }
-  if (meta.textContent || options.autocompleteUrl) {
-    controlWrap.appendChild(meta);
-  }
-  field.appendChild(label);
-  field.appendChild(controlWrap);
-  return field;
-}
-
-function clearRowEditDialogError(state) {
-  state.error.hidden = true;
-  state.error.textContent = "";
-}
-
-function showRowEditDialogError(state, message) {
-  state.error.hidden = false;
-  state.error.textContent = message;
-  state.error.focus();
-}
-
-function updateRowEditDialogButtons(state) {
-  state.saveButton.disabled = state.isLoading || state.isSaving || !state.hasLoaded;
-  state.cancelButton.disabled = state.isSaving;
-  var saveLabel = state.mode === "insert" ? "Insert row" : "Save";
-  state.saveButton.textContent = state.isSaving ? "Saving..." : saveLabel;
-  state.form.setAttribute(
-    "aria-busy",
-    state.isLoading || state.isSaving ? "true" : "false",
-  );
-}
-
-function setRowEditDialogLoading(state, isLoading) {
-  state.isLoading = isLoading;
-  state.loading.hidden = !isLoading;
-  updateRowEditDialogButtons(state);
-}
-
-function setRowEditDialogSaving(state, isSaving) {
-  state.isSaving = isSaving;
-  updateRowEditDialogButtons(state);
-}
-
-function valueFromRowEditControl(control) {
-  var value = control.value;
-  return valueFromRowEditText(
-    control.name,
-    value,
-    rowEditControlValueKind(control),
-  );
-}
-
-function valueFromRowEditText(name, value, initialValueKind) {
-  var trimmed = value.trim();
-
-  if (initialValueKind === "null" && value === "") {
-    return null;
-  }
-  if (initialValueKind === "number") {
-    if (trimmed === "") {
-      return null;
-    }
-    var numberValue = Number(trimmed);
-    if (Number.isNaN(numberValue)) {
-      throw new Error(name + " must be a number");
-    }
-    return numberValue;
-  }
-  if (initialValueKind === "boolean") {
-    if (/^(true|1|yes)$/i.test(trimmed)) {
-      return true;
-    }
-    if (/^(false|0|no)$/i.test(trimmed)) {
-      return false;
-    }
-    throw new Error(name + " must be true or false");
-  }
-  return value;
-}
-
-function initialValueFromRowEditControl(control) {
-  return valueFromRowEditText(
-    control.name,
-    control.dataset.initialValue || "",
-    control.dataset.initialValueKind || "string",
-  );
-}
-
-function rowEditControlValueKind(control) {
-  return (
-    control.dataset.currentValueKind ||
-    control.dataset.initialValueKind ||
-    "string"
-  );
-}
-
-function rowEditControlCleanValue(control) {
-  if (Object.prototype.hasOwnProperty.call(control.dataset, "cleanValue")) {
-    return control.dataset.cleanValue;
-  }
-  return control.dataset.initialValue || "";
-}
-
-function rowEditControlCleanValueKind(control) {
-  return (
-    control.dataset.cleanValueKind ||
-    control.dataset.initialValueKind ||
-    "string"
-  );
-}
-
-function rowEditControlCleanUsesSqliteDefault(control) {
-  if (
-    Object.prototype.hasOwnProperty.call(
-      control.dataset,
-      "cleanUseSqliteDefault",
-    )
-  ) {
-    return control.dataset.cleanUseSqliteDefault === "1";
-  }
-  return false;
-}
-
-function markRowEditControlClean(control) {
-  control.dataset.cleanValue = control.value;
-  control.dataset.cleanValueKind = rowEditControlValueKind(control);
-  control.dataset.cleanUseSqliteDefault =
-    control.dataset.useSqliteDefault === "1" ? "1" : "0";
-}
-
-function cleanValueFromRowEditControl(control) {
-  return valueFromRowEditText(
-    control.name,
-    rowEditControlCleanValue(control),
-    rowEditControlCleanValueKind(control),
-  );
-}
-
-function rowEditValuesMatch(left, right) {
-  if (left === right) {
-    return true;
-  }
-  if (
-    left &&
-    right &&
-    typeof left === "object" &&
-    typeof right === "object"
-  ) {
-    return JSON.stringify(left) === JSON.stringify(right);
-  }
-  return false;
-}
-
-function rowEditControlHasChanged(control) {
-  var usingSqliteDefault = control.dataset.useSqliteDefault === "1";
-  var cleanUsesSqliteDefault = rowEditControlCleanUsesSqliteDefault(control);
-  if (usingSqliteDefault || cleanUsesSqliteDefault) {
-    return usingSqliteDefault !== cleanUsesSqliteDefault;
-  }
-  if (
-    control.value === rowEditControlCleanValue(control) &&
-    rowEditControlValueKind(control) === rowEditControlCleanValueKind(control)
-  ) {
-    return false;
-  }
-  try {
-    return !rowEditValuesMatch(
-      valueFromRowEditControl(control),
-      cleanValueFromRowEditControl(control),
-    );
-  } catch (_error) {
-    return true;
-  }
-}
-
-function collectRowFormValues(state) {
-  var values = {};
-  state.fields.querySelectorAll(".row-edit-input").forEach(function (control) {
-    if (
-      state.mode === "edit" &&
-      (control.readOnly || control.dataset.primaryKey === "1")
-    ) {
-      return;
-    }
-    if (control.dataset.useSqliteDefault === "1") {
-      return;
-    }
-    if (control.dataset.omitIfBlank === "1" && control.value === "") {
-      return;
-    }
-    if (
-      state.mode === "edit" &&
-      control.value === (control.dataset.initialValue || "") &&
-      (control.dataset.currentValueKind ||
-        control.dataset.initialValueKind ||
-        "string") === (control.dataset.initialValueKind || "string")
-    ) {
-      return;
-    }
-    var value = valueFromRowEditControl(control);
-    if (state.mode === "edit") {
-      try {
-        if (rowEditValuesMatch(value, initialValueFromRowEditControl(control))) {
-          return;
-        }
-      } catch (_error) {
-        // If the original value cannot be parsed using the field's current
-        // type, treat the field as changed and submit the corrected value.
-      }
-    }
-    values[control.name] = value;
-  });
-  return values;
-}
-
-function rowEditDialogHasChanges(state) {
-  if (!state || !state.hasLoaded || state.isLoading) {
-    return false;
-  }
-  var fields = state.fields.querySelectorAll(".row-edit-field");
-  for (var i = 0; i < fields.length; i += 1) {
-    var fieldApi = fields[i]._datasetteColumnFormField;
-    if (fieldApi && fieldApi.hasChanged && fieldApi.hasChanged()) {
-      return true;
-    }
-  }
-  return false;
-}
-
-function confirmDiscardRowEditChanges(state) {
-  if (!rowEditDialogHasChanges(state)) {
-    return true;
-  }
-  var message =
-    state.mode === "insert"
-      ? "Discard this new row?"
-      : "Discard unsaved changes to this row?";
-  return window.confirm(message);
-}
-
-function closeRowEditDialogIfConfirmed(state) {
-  if (!state || state.isSaving) {
-    return false;
-  }
-  if (!confirmDiscardRowEditChanges(state)) {
-    return false;
-  }
-  state.shouldRestoreFocus = true;
-  state.dialog.close();
-  return true;
-}
-
-function findDataRowElement(root, rowId) {
-  var elements = root.querySelectorAll("[data-row]");
-  for (var i = 0; i < elements.length; i += 1) {
-    if (elements[i].getAttribute("data-row") === rowId) {
-      return elements[i];
-    }
-  }
-  return null;
-}
-
-async function fetchUpdatedRowElement(state) {
-  if (!state.currentFragmentUrl || !state.currentRowId) {
-    return null;
-  }
-  var response = await fetch(state.currentFragmentUrl, {
-    headers: {
-      Accept: "text/html",
-    },
-  });
-  var html = await response.text();
-  if (!response.ok) {
-    throw new Error("Could not refresh row: HTTP " + response.status);
-  }
-  var doc = new DOMParser().parseFromString(html, "text/html");
-  return findDataRowElement(doc, state.currentRowId);
-}
-
-function rowPathFromRowData(row, primaryKeys) {
-  if (!row) {
-    return null;
-  }
-  var keys = primaryKeys && primaryKeys.length ? primaryKeys : ["rowid"];
-  var bits = [];
-  for (var i = 0; i < keys.length; i += 1) {
-    var key = keys[i];
-    if (typeof row[key] === "undefined") {
-      return null;
-    }
-    bits.push(tildeEncode(row[key]));
-  }
-  return bits.join(",");
-}
-
-function addInsertedRowToPage(rowElement) {
-  var importedRow = document.importNode(rowElement, true);
-  var firstRow = document.querySelector("[data-row]");
-  if (firstRow && firstRow.parentNode) {
-    firstRow.parentNode.insertBefore(importedRow, firstRow);
-  } else {
-    var tbody = document.querySelector("table.rows-and-columns tbody");
-    if (!tbody) {
-      return null;
-    }
-    tbody.appendChild(importedRow);
-  }
-  var zeroResults = document.querySelector(".zero-results");
-  if (zeroResults) {
-    zeroResults.remove();
-  }
-  return importedRow;
-}
-
-async function saveRowEditDialog(state) {
-  if (state.isLoading || state.isSaving || !state.hasLoaded) {
-    return;
-  }
-  clearRowEditDialogError(state);
-  setRowEditDialogSaving(state, true);
-
-  try {
-    var url = state.mode === "insert" ? state.currentInsertUrl : state.currentUpdateUrl;
-    if (!url) {
-      throw new Error(
-        state.mode === "insert"
-          ? "Could not find the row insert URL"
-          : "Could not find the row update URL",
-      );
-    }
-    var formValues = collectRowFormValues(state);
-    if (state.mode === "edit" && !Object.keys(formValues).length) {
-      state.shouldRestoreFocus = true;
-      hideRowMutationStatus();
-      state.dialog.close();
-      return;
-    }
-    var payload =
-      state.mode === "insert"
-        ? { row: formValues, return: true }
-        : { update: formValues, return: true };
-    var response = await fetch(url, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Accept: "application/json",
-      },
-      body: JSON.stringify(payload),
-    });
-    var data = null;
-    try {
-      data = await response.json();
-    } catch (_error) {
-      data = null;
-    }
-    if (!response.ok || (data && data.ok === false)) {
-      throw rowMutationRequestError(response, data);
-    }
-
-    if (state.mode === "insert") {
-      var insertData = tableInsertData() || {};
-      var insertedRowData = data && data.rows && data.rows.length ? data.rows[0] : null;
-      var insertedRowId = rowPathFromRowData(
-        insertedRowData,
-        insertData.primaryKeys || [],
-      );
-      state.shouldRestoreFocus = false;
-      if (!insertedRowId) {
-        state.dialog.close();
-        var missingIdStatus = showRowMutationStatus(
-          state.manager,
-          "Inserted row. Refresh the page to see it.",
-          false,
-        );
-        missingIdStatus.focus();
-        return;
-      }
-
-      state.currentRowId = insertedRowId;
-      state.currentFragmentUrl = rowFragmentUrlById(insertedRowId);
-      var insertedRow = null;
-      try {
-        insertedRow = await fetchUpdatedRowElement(state);
-      } catch (_error) {
-        state.dialog.close();
-        var refreshFailedStatus = showRowMutationStatus(
-          state.manager,
-          "Inserted row, but could not refresh the table row. Refresh the page to see it.",
-          true,
-        );
-        refreshFailedStatus.focus();
-        return;
-      }
-      if (insertedRow) {
-        var insertedStatusMessage = insertedRowStatusMessage(
-          tildeDecode(insertedRowId),
-          rowTitleLabel(insertedRow),
-        );
-        var addedRow = addInsertedRowToPage(insertedRow);
-        state.dialog.close();
-        showRowMutationStatus(state.manager, insertedStatusMessage, false);
-        if (addedRow) {
-          var insertedFocusTarget =
-            addedRow.querySelector('button[data-row-action="edit"]') || addedRow;
-          insertedFocusTarget.focus();
-        }
-      } else {
-        state.dialog.close();
-        var filteredStatus = showRowMutationStatus(
-          state.manager,
-          "Inserted row. It does not match the current filters.",
-          false,
-        );
-        filteredStatus.focus();
-      }
-      return;
-    }
-
-    var updatedRow = await fetchUpdatedRowElement(state);
-    var focusTarget = null;
-    if (updatedRow && state.currentRow && document.contains(state.currentRow)) {
-      var importedRow = document.importNode(updatedRow, true);
-      state.currentRow.replaceWith(importedRow);
-      showRowMutationStatus(
-        state.manager,
-        state.currentPkPath
-          ? "Updated row " + state.currentPkPath + "."
-          : "Updated row.",
-        false,
-      );
-      focusTarget =
-        importedRow.querySelector('button[data-row-action="edit"]') || importedRow;
-    } else if (state.currentRow && document.contains(state.currentRow)) {
-      focusTarget =
-        nextRowActionFocusTarget(state.currentRow, "edit") ||
-        ensureRowMutationStatus(state.manager);
-      state.currentRow.remove();
-      showRowMutationStatus(
-        state.manager,
-        state.currentPkPath
-          ? "Updated row " +
-              state.currentPkPath +
-              ". It no longer matches the current filters."
-          : "Updated row. It no longer matches the current filters.",
-        false,
-      );
-    }
-
-    state.shouldRestoreFocus = false;
-    state.dialog.close();
-    if (focusTarget && document.contains(focusTarget)) {
-      focusTarget.focus();
-    }
-  } catch (error) {
-    setRowEditDialogSaving(state, false);
-    showRowEditDialogError(state, error.message || "Could not save row");
-  }
-}
-
-function renderRowEditFields(state, data) {
-  var row = data.rows && data.rows.length ? data.rows[0] : null;
-  var columns = data.columns || (row ? Object.keys(row) : []);
-  var primaryKeys = data.primary_keys || [];
-  var columnTypes = data.column_types || {};
-
-  destroyRowEditFields(state);
-  columns.forEach(function (column, index) {
-    state.fields.appendChild(
-      createRowEditField(
-        column,
-        row ? row[column] : null,
-        primaryKeys.indexOf(column) !== -1,
-        columnTypes[column],
-        index,
-        {
-          autocompleteUrl: foreignKeyAutocompleteUrl(column),
-          dialog: state.dialog,
-          form: state.form,
-          manager: state.manager,
-          mode: state.mode,
-          primaryKeyReadonly: true,
-        },
-      ),
-    );
-  });
-
-  state.hasLoaded = true;
-  updateRowEditDialogButtons(state);
-  if (!focusFirstRowEditControl(state, { skipReadonly: true })) {
-    focusFirstRowEditControl(state) || state.cancelButton.focus();
-  }
-}
-
-function renderRowInsertFields(state, data) {
-  var columns = data.columns || [];
-
-  destroyRowEditFields(state);
-  columns.forEach(function (column, index) {
-    state.fields.appendChild(
-      createRowEditField(
-        column.name,
-        "",
-        !!column.is_pk,
-        column.column_type,
-        index,
-        {
-          autocompleteUrl: foreignKeyAutocompleteUrl(column.name),
-          dialog: state.dialog,
-          form: state.form,
-          defaultExpression: column.default,
-          manager: state.manager,
-          mode: state.mode,
-          notnull: column.notnull,
-          primaryKeyReadonly: false,
-          sqliteType: column.sqlite_type,
-          useSqliteDefault: column.default !== null,
-          valueKind: column.value_kind,
-        },
-      ),
-    );
-  });
-
-  if (!columns.length) {
-    var emptyMessage = document.createElement("p");
-    emptyMessage.className = "row-edit-empty";
-    emptyMessage.textContent = "This row will use the table defaults.";
-    state.fields.appendChild(emptyMessage);
-  }
-
-  state.hasLoaded = true;
-  updateRowEditDialogButtons(state);
-  var firstDefaultButton = state.fields.querySelector(".row-edit-default-set-value");
-  if (firstDefaultButton) {
-    firstDefaultButton.focus();
-  } else {
-    focusFirstRowEditControl(state, { skipReadonly: true }) ||
-      state.saveButton.focus();
-  }
-}
-
-function setRowDialogTitle(title, text, codeText, labelText) {
-  title.textContent = "";
-  var action = document.createElement("span");
-  action.className = "row-dialog-action";
-  action.textContent = text;
-  title.appendChild(action);
-  if (!codeText) {
-    return;
-  }
-  title.appendChild(document.createTextNode(" "));
-  var code = document.createElement("code");
-  code.textContent = codeText;
-  title.appendChild(code);
-  if (labelText && labelText !== codeText) {
-    title.appendChild(document.createTextNode(" "));
-    var label = document.createElement("span");
-    label.className = "row-dialog-label";
-    label.textContent = labelText;
-    title.appendChild(label);
-  }
-}
-
-function ensureRowEditDialog(manager) {
-  if (rowEditDialogState) {
-    return rowEditDialogState;
-  }
-  if (!window.HTMLDialogElement) {
-    return null;
-  }
-
-  var dialog = document.createElement("dialog");
-  dialog.id = ROW_EDIT_DIALOG_ID;
-  dialog.className = "row-edit-dialog";
-  dialog.setAttribute("aria-labelledby", "row-edit-title");
-  dialog.innerHTML = `
-    <div class="modal-header">
-      <span class="modal-title" id="row-edit-title">Edit row</span>
-    </div>
-    <form class="row-edit-form" method="post">
-      <p class="row-edit-summary" id="row-edit-summary" hidden></p>
-      <p class="row-edit-loading" role="status" aria-live="polite">Loading row...</p>
-      <p class="row-edit-error" role="alert" tabindex="-1" hidden></p>
-      <div class="row-edit-fields"></div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-ghost row-edit-cancel">Cancel</button>
-        <button type="submit" class="btn btn-primary row-edit-save" disabled>Save</button>
-      </div>
-    </form>
-  `;
-  document.body.appendChild(dialog);
-
-  rowEditDialogState = {
-    dialog: dialog,
-    form: dialog.querySelector(".row-edit-form"),
-    title: dialog.querySelector(".modal-title"),
-    summary: dialog.querySelector(".row-edit-summary"),
-    loading: dialog.querySelector(".row-edit-loading"),
-    error: dialog.querySelector(".row-edit-error"),
-    fields: dialog.querySelector(".row-edit-fields"),
-    cancelButton: dialog.querySelector(".row-edit-cancel"),
-    saveButton: dialog.querySelector(".row-edit-save"),
-    currentButton: null,
-    currentRow: null,
-    currentRowId: null,
-    currentPkPath: null,
-    currentInsertUrl: null,
-    currentUpdateUrl: null,
-    currentFragmentUrl: null,
-    mode: "edit",
-    loadId: 0,
-    manager: manager,
-    isLoading: false,
-    isSaving: false,
-    hasLoaded: false,
-    shouldRestoreFocus: true,
-  };
-
-  rowEditDialogState.form.addEventListener("submit", function (ev) {
-    ev.preventDefault();
-    saveRowEditDialog(rowEditDialogState);
-  });
-
-  rowEditDialogState.cancelButton.addEventListener("click", function () {
-    if (!rowEditDialogState.isSaving) {
-      rowEditDialogState.shouldRestoreFocus = true;
-      dialog.close();
-    }
-  });
-
-  dialog.addEventListener("click", function (ev) {
-    if (ev.target === dialog) {
-      closeRowEditDialogIfConfirmed(rowEditDialogState);
-    }
-  });
-
-  dialog.addEventListener("keydown", function (ev) {
-    if (ev.key !== "Escape") {
-      return;
-    }
-    ev.preventDefault();
-    closeRowEditDialogIfConfirmed(rowEditDialogState);
-  });
-
-  dialog.addEventListener("cancel", function (ev) {
-    if (
-      rowEditDialogState.isSaving ||
-      !confirmDiscardRowEditChanges(rowEditDialogState)
-    ) {
-      ev.preventDefault();
-    } else {
-      rowEditDialogState.shouldRestoreFocus = true;
-    }
-  });
-
-  dialog.addEventListener("close", function () {
-    var state = rowEditDialogState;
-    state.loadId += 1;
-    clearRowEditDialogError(state);
-    state.hasLoaded = false;
-    destroyRowEditFields(state);
-    setRowEditDialogLoading(state, false);
-    setRowEditDialogSaving(state, false);
-    if (
-      state.shouldRestoreFocus &&
-      state.currentButton &&
-      document.contains(state.currentButton)
-    ) {
-      state.currentButton.focus();
-    }
-  });
-
-  return rowEditDialogState;
-}
-
-async function openRowEditDialog(button, manager) {
-  var row = button.closest("[data-row]");
-  if (!row || !row.getAttribute("data-row")) {
-    return;
-  }
-  var state = ensureRowEditDialog(manager);
-  if (!state) {
-    return;
-  }
-
-  state.manager = manager;
-  state.mode = "edit";
-  state.currentButton = button;
-  state.currentRow = row;
-  state.currentRowId = row.getAttribute("data-row") || "";
-  state.currentPkPath = rowDisplayLabel(row);
-  state.currentInsertUrl = null;
-  state.currentUpdateUrl = rowUpdateUrl(row);
-  state.currentFragmentUrl = rowFragmentUrl(row);
-  if (state.currentUpdateUrl) {
-    state.form.action = new URL(state.currentUpdateUrl, location.href).toString();
-  } else {
-    state.form.removeAttribute("action");
-  }
-  state.shouldRestoreFocus = true;
-  state.hasLoaded = false;
-  state.loadId += 1;
-  var loadId = state.loadId;
-
-  clearRowEditDialogError(state);
-  setRowEditDialogLoading(state, true);
-  destroyRowEditFields(state);
-  state.dialog.removeAttribute("aria-describedby");
-  setRowDialogTitle(
-    state.title,
-    "Edit row",
-    state.currentPkPath || "this row",
-    rowTitleLabel(row),
-  );
-  state.summary.hidden = true;
-  state.summary.textContent = "";
-
-  if (!state.dialog.open) {
-    state.dialog.showModal();
-  }
-  state.cancelButton.focus();
-
-  try {
-    var response = await fetch(rowJsonUrl(row), {
-      headers: {
-        Accept: "application/json",
-      },
-    });
-    var data = await response.json();
-    if (loadId !== state.loadId) {
-      return;
-    }
-    if (!response.ok || data.ok === false) {
-      throw rowMutationRequestError(response, data);
-    }
-    setRowEditDialogLoading(state, false);
-    renderRowEditFields(state, data);
-  } catch (error) {
-    if (loadId !== state.loadId) {
-      return;
-    }
-    setRowEditDialogLoading(state, false);
-    showRowEditDialogError(state, error.message || "Could not load row");
-    state.cancelButton.focus();
-  }
-}
-
-function openRowInsertDialog(button, manager) {
-  var insertData = tableInsertData();
-  if (!insertData) {
-    return;
-  }
-  var state = ensureRowEditDialog(manager);
-  if (!state) {
-    return;
-  }
-
-  state.manager = manager;
-  state.mode = "insert";
-  state.currentButton = button;
-  state.currentRow = null;
-  state.currentRowId = null;
-  state.currentPkPath = null;
-  state.currentInsertUrl = tableInsertUrl();
-  state.currentUpdateUrl = null;
-  state.currentFragmentUrl = null;
-  state.shouldRestoreFocus = true;
-  state.hasLoaded = false;
-  state.loadId += 1;
-
-  if (state.currentInsertUrl) {
-    state.form.action = new URL(state.currentInsertUrl, location.href).toString();
-  } else {
-    state.form.removeAttribute("action");
-  }
-
-  clearRowEditDialogError(state);
-  setRowEditDialogLoading(state, false);
-  destroyRowEditFields(state);
-  state.dialog.removeAttribute("aria-describedby");
-  setRowDialogTitle(
-    state.title,
-    insertData.tableName ? "Insert row into " + insertData.tableName : "Insert row",
-  );
-  state.summary.hidden = true;
-  state.summary.textContent = "";
-
-  if (!state.dialog.open) {
-    state.dialog.showModal();
-  }
-  renderRowInsertFields(state, insertData);
-}
-
-function initRowEditActions(manager) {
-  if (!window.fetch || !window.HTMLDialogElement) {
-    return;
-  }
-  document.addEventListener("click", function (ev) {
-    var button = ev.target.closest('button[data-row-action="edit"]');
-    if (!button) {
-      return;
-    }
-    ev.preventDefault();
-    openRowEditDialog(button, manager);
-  });
-}
-
-function initRowInsertActions(manager) {
-  if (!window.fetch || !window.HTMLDialogElement || !tableInsertData()) {
-    return;
-  }
-  document.addEventListener("click", function (ev) {
-    var button = ev.target.closest('button[data-table-action="insert-row"]');
-    if (!button) {
-      return;
-    }
-    ev.preventDefault();
-    openRowInsertDialog(button, manager);
-  });
-}
-
 function canChooseColumns() {
   return !!(
     document.querySelector("column-chooser") && window._columnChooserData
@@ -2679,14 +745,10 @@ function openColumnChooser() {
 document.addEventListener("datasette_init", function (evt) {
   const { detail: manager } = evt;
 
-  registerBuiltinColumnFieldPlugins(manager);
   initializeColumnActions(manager);
 
   // Main table
   initDatasetteTable(manager);
-  initRowInsertActions(manager);
-  initRowEditActions(manager);
-  initRowDeleteActions(manager);
 
   // Other UI functions with interactive JS needs
   addButtonsToFilterRows(manager);
diff --git a/datasette/templates/row.html b/datasette/templates/row.html
index db43e71a..5e483d34 100644
--- a/datasette/templates/row.html
+++ b/datasette/templates/row.html
@@ -4,6 +4,13 @@
 
 {% block extra_head %}
 {{- super() -}}
+{% if row_mutation_ui %}
+<script>window._datasetteTableData = {{ table_page_data|tojson }};</script>
+{% if table_page_data.foreignKeys %}
+<script src="{{ urls.static('autocomplete.js') }}" defer></script>
+{% endif %}
+<script src="{{ urls.static('edit-tools.js') }}?hash={{ edit_tools_js_hash }}" defer></script>
+{% endif %}
 <style>
 @media only screen and (max-width: 576px) {
 {% for column in columns %}
diff --git a/datasette/templates/table.html b/datasette/templates/table.html
index 81b51b28..86b6a6ed 100644
--- a/datasette/templates/table.html
+++ b/datasette/templates/table.html
@@ -9,6 +9,7 @@
 {% if table_page_data.foreignKeys %}
 <script src="{{ urls.static('autocomplete.js') }}" defer></script>
 {% endif %}
+<script src="{{ urls.static('edit-tools.js') }}?hash={{ edit_tools_js_hash }}" defer></script>
 <script src="{{ urls.static('table.js') }}?hash={{ table_js_hash }}" defer></script>
 <script src="{{ urls.static('mobile-column-actions.js') }}" defer></script>
 <script>DATASETTE_ALLOW_FACET = {{ datasette_allow_facet }};</script>
diff --git a/datasette/views/row.py b/datasette/views/row.py
index c300758b..e6eaa92b 100644
--- a/datasette/views/row.py
+++ b/datasette/views/row.py
@@ -7,6 +7,7 @@ from datasette.utils import (
     await_me_maybe,
     CustomRow,
     make_slot_function,
+    path_from_row_pks,
     to_css_class,
     escape_sqlite,
 )
@@ -15,7 +16,11 @@ import json
 import markupsafe
 import sqlite_utils
 from datasette.extras import extra_names_from_request
-from .table import display_columns_and_rows
+from .table import (
+    display_columns_and_rows,
+    _table_page_data,
+    row_label_from_label_column,
+)
 from .table_extras import RowExtraContext, resolve_row_extras, table_extra_registry
 
 
@@ -49,6 +54,7 @@ class RowView(DataView):
         pks = resolved.pks
 
         async def template_data():
+            is_table = await db.table_exists(table)
             # Reorder columns so primary keys come first
             pk_set = set(pks)
             pk_cols = [d for d in results.description if d[0] in pk_set]
@@ -117,7 +123,60 @@ class RowView(DataView):
                             "<strong>{}</strong>".format(cell["value"])
                         )
 
+            label_column = await db.label_column_for_table(table) if is_table else None
+            row_path = path_from_row_pks(rows[0], pks, False)
+            pk_path = path_from_row_pks(rows[0], pks, False, False)
+            row_label = row_label_from_label_column(expanded_rows[0], label_column)
+            for display_row in display_rows:
+                display_row.pk_path = pk_path
+                display_row.row_path = row_path
+                display_row.row_label = row_label
+
+            row_action_label = pk_path
+            if row_label and row_label != pk_path:
+                row_action_label = "{} {}".format(pk_path, row_label)
+
+            row_action_permissions = {}
+            if is_table and db.is_mutable:
+                row_action_permissions = await self.ds.allowed_many(
+                    actions=["update-row", "delete-row"],
+                    resource=TableResource(database=database, table=table),
+                    actor=request.actor,
+                )
+
             row_actions = []
+            if row_action_permissions.get("update-row"):
+                attrs = {
+                    "aria-label": "Edit row {}".format(row_action_label),
+                    "data-row": row_path,
+                    "data-row-action": "edit",
+                }
+                if row_label:
+                    attrs["data-row-label"] = row_label
+                row_actions.append(
+                    {
+                        "type": "button",
+                        "label": "Edit row",
+                        "description": "Open a dialog to edit this row.",
+                        "attrs": attrs,
+                    }
+                )
+            if row_action_permissions.get("delete-row"):
+                attrs = {
+                    "aria-label": "Delete row {}".format(row_action_label),
+                    "data-row": row_path,
+                    "data-row-action": "delete",
+                }
+                if row_label:
+                    attrs["data-row-label"] = row_label
+                row_actions.append(
+                    {
+                        "type": "button",
+                        "label": "Delete row",
+                        "description": "Open a confirmation dialog to delete this row.",
+                        "attrs": attrs,
+                    }
+                )
             for hook in pm.hook.row_actions(
                 datasette=self.ds,
                 actor=request.actor,
@@ -144,6 +203,16 @@ class RowView(DataView):
                     f"_table-row-{to_css_class(database)}-{to_css_class(table)}.html",
                     "_table.html",
                 ],
+                "row_mutation_ui": any(row_action_permissions.values()),
+                "table_page_data": await _table_page_data(
+                    self.ds,
+                    request,
+                    db,
+                    database,
+                    table,
+                    not is_table,
+                    None,
+                ),
                 "row_actions": row_actions,
                 "top_row": make_slot_function(
                     "top_row",
@@ -249,6 +318,27 @@ class RowError(Exception):
         self.error = error
 
 
+ROW_FLASH_LABEL_MAX_LENGTH = 80
+
+
+def _truncated_row_flash_label(label):
+    label = " ".join(str(label).split())
+    if len(label) <= ROW_FLASH_LABEL_MAX_LENGTH:
+        return label
+    return label[: ROW_FLASH_LABEL_MAX_LENGTH - 1] + "\u2026"
+
+
+async def _row_flash_message(db, action, resolved, row=None):
+    pk_label = ", ".join(resolved.pk_values)
+    label_column = await db.label_column_for_table(resolved.table)
+    label = row_label_from_label_column(row or resolved.row, label_column)
+    if label:
+        label = _truncated_row_flash_label(label)
+    if label and label != pk_label:
+        return "{} row {} ({})".format(action, pk_label, label)
+    return "{} row {}".format(action, pk_label)
+
+
 async def _resolve_row_and_check_permission(datasette, request, permission):
     from datasette.app import DatabaseNotFound, TableNotFound, RowNotFound
 
@@ -303,6 +393,15 @@ class RowDeleteView(BaseView):
             )
         )
 
+        if request.args.get("_redirect_to_table"):
+            table_url = self.ds.urls.table(resolved.db.name, resolved.table)
+            self.ds.add_message(
+                request,
+                await _row_flash_message(resolved.db, "Deleted", resolved),
+                self.ds.INFO,
+            )
+            return Response.json({"ok": True, "redirect": str(table_url)}, status=200)
+
         return Response.json({"ok": True}, status=200)
 
 
@@ -364,11 +463,13 @@ class RowUpdateView(BaseView):
             return _error([str(e)], 400)
 
         result = {"ok": True}
+        returned_row = None
         if data.get("return"):
             results = await resolved.db.execute(
                 resolved.sql, resolved.params, truncate=True
             )
-            result["row"] = results.dicts()[0]
+            returned_row = results.dicts()[0]
+            result["row"] = returned_row
 
         await self.ds.track_event(
             UpdateRowEvent(
@@ -379,4 +480,19 @@ class RowUpdateView(BaseView):
             )
         )
 
+        if request.args.get("_message"):
+            message_row = returned_row
+            if message_row is None:
+                results = await resolved.db.execute(
+                    resolved.sql, resolved.params, truncate=True
+                )
+                message_row = results.first()
+            self.ds.add_message(
+                request,
+                await _row_flash_message(
+                    resolved.db, "Updated", resolved, row=message_row
+                ),
+                self.ds.INFO,
+            )
+
         return Response.json(result, status=200)
diff --git a/tests/test_datasette_manager_js.py b/tests/test_datasette_manager_js.py
index f32f2de0..01b6bbac 100644
--- a/tests/test_datasette_manager_js.py
+++ b/tests/test_datasette_manager_js.py
@@ -80,7 +80,7 @@ def test_table_plugin_column_field_api():
     script = textwrap.dedent("""
         const fs = require("fs");
         const vm = require("vm");
-        const tableJs = __TABLE_JS__;
+        const editToolsJs = __EDIT_TOOLS_JS__;
 
         class FakeEvent {
           constructor(type, options) {
@@ -180,8 +180,8 @@ def test_table_plugin_column_field_api():
           },
         };
 
-        vm.runInThisContext(fs.readFileSync(tableJs, "utf8"), {
-          filename: "table.js",
+        vm.runInThisContext(fs.readFileSync(editToolsJs, "utf8"), {
+          filename: "edit-tools.js",
         });
 
         const context = columnFormControlContext(
@@ -452,7 +452,7 @@ def test_table_plugin_column_field_api():
         }
 
         process.stdout.write("ok");
-    """).replace("__TABLE_JS__", json.dumps(str(STATIC_DIR / "table.js")))
+    """).replace("__EDIT_TOOLS_JS__", json.dumps(str(STATIC_DIR / "edit-tools.js")))
     result = subprocess.run(
         ["node", "-e", script],
         text=True,
@@ -467,7 +467,7 @@ def test_builtin_json_column_field_validation():
     script = textwrap.dedent("""
         const fs = require("fs");
         const vm = require("vm");
-        const tableJs = __TABLE_JS__;
+        const editToolsJs = __EDIT_TOOLS_JS__;
 
         class FakeEvent {
           constructor(type, options) {
@@ -547,8 +547,8 @@ def test_builtin_json_column_field_validation():
           },
         };
 
-        vm.runInThisContext(fs.readFileSync(tableJs, "utf8"), {
-          filename: "table.js",
+        vm.runInThisContext(fs.readFileSync(editToolsJs, "utf8"), {
+          filename: "edit-tools.js",
         });
 
         const plugins = [];
@@ -648,7 +648,7 @@ def test_builtin_json_column_field_validation():
         }
 
         process.stdout.write("ok");
-    """).replace("__TABLE_JS__", json.dumps(str(STATIC_DIR / "table.js")))
+    """).replace("__EDIT_TOOLS_JS__", json.dumps(str(STATIC_DIR / "edit-tools.js")))
     result = subprocess.run(
         ["node", "-e", script],
         text=True,
diff --git a/tests/test_table_html.py b/tests/test_table_html.py
index b9936eab..aa67bb3f 100644
--- a/tests/test_table_html.py
+++ b/tests/test_table_html.py
@@ -1151,6 +1151,160 @@ async def test_table_fragment_row_parameter_replaces_pk_filters(ds_client):
     assert rows[0]["data-row-label"] == "hello"
 
 
+@pytest.mark.asyncio
+async def test_row_page_edit_delete_action_menu_buttons():
+    ds = Datasette(
+        [],
+        config={
+            "databases": {
+                "data": {
+                    "tables": {
+                        "items": {
+                            "permissions": {
+                                "update-row": {"id": "root"},
+                                "delete-row": {"id": "root"},
+                            },
+                        },
+                    },
+                },
+            },
+        },
+    )
+    try:
+        db = ds.add_database(
+            Database(ds, memory_name="test_row_page_edit_delete_actions"), name="data"
+        )
+        await db.execute_write_script("""
+            create table items (id integer primary key, name text, score integer);
+            insert into items (id, name, score) values (1, 'One', 5);
+            """)
+        response = await ds.client.get("/data/items/1", actor={"id": "root"})
+        assert response.status_code == 200
+        soup = Soup(response.text, "html.parser")
+        assert table_data_from_soup(soup) == {
+            "database": "data",
+            "table": "items",
+            "tableUrl": "/data/items",
+        }
+        script_srcs = [script.get("src") or "" for script in soup.find_all("script")]
+        assert any("edit-tools.js" in src for src in script_srcs)
+        assert not any("table.js" in src for src in script_srcs)
+
+        row = soup.select_one("table.rows-and-columns tbody tr")
+        assert row["data-row"] == "1"
+        assert row["data-row-label"] == "One"
+
+        edit_button = soup.select_one(
+            'details.actions-menu-links button.action-menu-button[data-row-action="edit"]'
+        )
+        assert edit_button is not None
+        assert edit_button["aria-label"] == "Edit row 1 One"
+        assert edit_button["data-row"] == "1"
+        assert edit_button["data-row-label"] == "One"
+        assert edit_button["role"] == "menuitem"
+        assert edit_button.find("span", class_="dropdown-description").text.strip() == (
+            "Open a dialog to edit this row."
+        )
+        edit_button.find("span").extract()
+        assert edit_button.text.strip() == "Edit row"
+
+        delete_button = soup.select_one(
+            'details.actions-menu-links button.action-menu-button[data-row-action="delete"]'
+        )
+        assert delete_button is not None
+        assert delete_button["aria-label"] == "Delete row 1 One"
+        assert delete_button["data-row"] == "1"
+        assert delete_button["data-row-label"] == "One"
+        assert delete_button["role"] == "menuitem"
+        assert delete_button.find(
+            "span", class_="dropdown-description"
+        ).text.strip() == ("Open a confirmation dialog to delete this row.")
+        delete_button.find("span").extract()
+        assert delete_button.text.strip() == "Delete row"
+    finally:
+        ds.close()
+
+
+@pytest.mark.asyncio
+async def test_row_delete_redirect_to_table_sets_message():
+    ds = Datasette(
+        [],
+        config={
+            "databases": {
+                "data": {
+                    "tables": {
+                        "items": {
+                            "permissions": {
+                                "delete-row": {"id": "root"},
+                            },
+                        },
+                    },
+                },
+            },
+        },
+    )
+    try:
+        db = ds.add_database(
+            Database(ds, memory_name="test_row_delete_redirect"), name="data"
+        )
+        await db.execute_write_script("""
+            create table items (id integer primary key, name text);
+            insert into items (id, name) values (1, 'One');
+            """)
+        response = await ds.client.post(
+            "/data/items/1/-/delete?_redirect_to_table=1", actor={"id": "root"}
+        )
+        assert response.status_code == 200
+        assert response.json() == {"ok": True, "redirect": "/data/items"}
+        assert ds.unsign(response.cookies["ds_messages"], "messages") == [
+            ["Deleted row 1 (One)", ds.INFO]
+        ]
+    finally:
+        ds.close()
+
+
+@pytest.mark.asyncio
+async def test_row_update_sets_message():
+    ds = Datasette(
+        [],
+        config={
+            "databases": {
+                "data": {
+                    "tables": {
+                        "items": {
+                            "permissions": {
+                                "update-row": {"id": "root"},
+                            },
+                        },
+                    },
+                },
+            },
+        },
+    )
+    try:
+        db = ds.add_database(
+            Database(ds, memory_name="test_row_update_message"), name="data"
+        )
+        await db.execute_write_script("""
+            create table items (id integer primary key, name text);
+            insert into items (id, name) values (1, 'One');
+            """)
+        long_name = "Two " + ("long label " * 12)
+        truncated_name = long_name[:79] + "\u2026"
+        response = await ds.client.post(
+            "/data/items/1/-/update?_message=1",
+            actor={"id": "root"},
+            json={"update": {"name": long_name}, "return": True},
+        )
+        assert response.status_code == 200
+        assert response.json()["row"]["name"] == long_name
+        assert ds.unsign(response.cookies["ds_messages"], "messages") == [
+            ["Updated row 1 ({})".format(truncated_name), ds.INFO]
+        ]
+    finally:
+        ds.close()
+
+
 def test_table_data_uses_base_url(app_client_base_url_prefix):
     response = app_client_base_url_prefix.get("/prefix/fixtures/simple_primary_key")
     assert response.status_code == 200

From f157df7f07279ad52153fa52ff68cc71eba5b406 Mon Sep 17 00:00:00 2001
From: Simon Willison <swillison@gmail.com>
Date: Sun, 14 Jun 2026 16:06:36 -0700
Subject: [PATCH 23/23] Ran prettier

---
 datasette/static/edit-tools.js | 181 +++++++++++++++++++--------------
 1 file changed, 102 insertions(+), 79 deletions(-)

diff --git a/datasette/static/edit-tools.js b/datasette/static/edit-tools.js
index 2af7b35b..b1928f1d 100644
--- a/datasette/static/edit-tools.js
+++ b/datasette/static/edit-tools.js
@@ -80,10 +80,7 @@ function tildeDecode(value) {
   var placeholder = "__datasette_percent_placeholder__";
   try {
     return decodeURIComponent(
-      value
-        .replace(/%/g, placeholder)
-        .replace(/~/g, "%")
-        .replace(/\+/g, " "),
+      value.replace(/%/g, placeholder).replace(/~/g, "%").replace(/\+/g, " "),
     ).replace(new RegExp(placeholder, "g"), "%");
   } catch (_error) {
     return value;
@@ -405,7 +402,9 @@ function nextRowActionFocusTarget(row, action) {
 }
 
 function nextRowDeleteFocusTarget(row, manager) {
-  return nextRowActionFocusTarget(row, "delete") || ensureRowMutationStatus(manager);
+  return (
+    nextRowActionFocusTarget(row, "delete") || ensureRowMutationStatus(manager)
+  );
 }
 
 function ensureRowDeleteDialog(manager) {
@@ -508,52 +507,58 @@ function ensureRowDeleteDialog(manager) {
     }
   });
 
-  rowDeleteDialogState.confirmButton.addEventListener("click", async function () {
-    var state = rowDeleteDialogState;
-    clearRowDeleteDialogError(state);
-    setRowDeleteDialogBusy(state, true);
+  rowDeleteDialogState.confirmButton.addEventListener(
+    "click",
+    async function () {
+      var state = rowDeleteDialogState;
+      clearRowDeleteDialogError(state);
+      setRowDeleteDialogBusy(state, true);
 
-    try {
-      var response = await fetch(state.currentDeleteUrl, {
-        method: "POST",
-        headers: {
-          Accept: "application/json",
-        },
-      });
-      var data = null;
       try {
-        data = await response.json();
-      } catch (_error) {
-        data = null;
-      }
-      if (!response.ok || (data && data.ok === false)) {
-        throw rowMutationRequestError(response, data);
-      }
-      if (data && data.redirect) {
+        var response = await fetch(state.currentDeleteUrl, {
+          method: "POST",
+          headers: {
+            Accept: "application/json",
+          },
+        });
+        var data = null;
+        try {
+          data = await response.json();
+        } catch (_error) {
+          data = null;
+        }
+        if (!response.ok || (data && data.ok === false)) {
+          throw rowMutationRequestError(response, data);
+        }
+        if (data && data.redirect) {
+          state.shouldRestoreFocus = false;
+          state.dialog.close();
+          location.href = data.redirect;
+          return;
+        }
+
+        var focusTarget = nextRowDeleteFocusTarget(
+          state.currentRow,
+          state.manager,
+        );
+        var statusMessage = state.currentPkPath
+          ? "Deleted row " + state.currentPkPath + "."
+          : "Deleted row.";
         state.shouldRestoreFocus = false;
         state.dialog.close();
-        location.href = data.redirect;
-        return;
+        state.currentRow.remove();
+        showRowMutationStatus(state.manager, statusMessage, false);
+        if (focusTarget && document.contains(focusTarget)) {
+          focusTarget.focus();
+        } else {
+          ensureRowMutationStatus(state.manager).focus();
+        }
+      } catch (error) {
+        setRowDeleteDialogBusy(state, false);
+        showRowDeleteDialogError(state, error.message || "Delete failed");
       }
-
-      var focusTarget = nextRowDeleteFocusTarget(state.currentRow, state.manager);
-      var statusMessage = state.currentPkPath
-        ? "Deleted row " + state.currentPkPath + "."
-        : "Deleted row.";
-      state.shouldRestoreFocus = false;
-      state.dialog.close();
-      state.currentRow.remove();
-      showRowMutationStatus(state.manager, statusMessage, false);
-      if (focusTarget && document.contains(focusTarget)) {
-        focusTarget.focus();
-      } else {
-        ensureRowMutationStatus(state.manager).focus();
-      }
-    } catch (error) {
-      setRowDeleteDialogBusy(state, false);
-      showRowDeleteDialogError(state, error.message || "Delete failed");
-    }
-  });
+    },
+  );
 
   return rowDeleteDialogState;
 }
@@ -669,11 +674,16 @@ function defaultExpressionForContext(expression) {
 
 function columnFormControlContext(column, isPk, columnType, options) {
   var pageData = tablePageData();
-  var defaultExpression = defaultExpressionForContext(options.defaultExpression);
+  var defaultExpression = defaultExpressionForContext(
+    options.defaultExpression,
+  );
   return {
     mode: options.mode || "edit",
     database: pageData.database || null,
-    table: pageData.table || (tableInsertData() && tableInsertData().tableName) || null,
+    table:
+      pageData.table ||
+      (tableInsertData() && tableInsertData().tableName) ||
+      null,
     tableUrl: pageData.tableUrl || null,
     column: column,
     columnType: columnTypeForContext(columnType),
@@ -938,7 +948,9 @@ function createRowEditField(column, value, isPk, columnType, index, options) {
   options = options || {};
   var field = document.createElement("div");
   field.className = "row-edit-field";
-  var defaultExpression = defaultExpressionForContext(options.defaultExpression);
+  var defaultExpression = defaultExpressionForContext(
+    options.defaultExpression,
+  );
   var hasDefaultExpression = defaultExpression !== null;
   var useSqliteDefault = hasDefaultExpression && options.useSqliteDefault;
 
@@ -954,12 +966,7 @@ function createRowEditField(column, value, isPk, columnType, index, options) {
   var controlWrap = document.createElement("div");
   controlWrap.className = "row-edit-control-wrap";
 
-  var context = columnFormControlContext(
-    column,
-    isPk,
-    columnType,
-    options,
-  );
+  var context = columnFormControlContext(column, isPk, columnType, options);
   var pluginControl = makeColumnField(options.manager, context);
   var useTextarea =
     (pluginControl && pluginControl.useTextarea === true) ||
@@ -1061,7 +1068,8 @@ function createRowEditField(column, value, isPk, columnType, index, options) {
   field._datasetteColumnFormField = fieldApi;
   var pluginControlElement = renderColumnField(pluginControl, fieldApi);
   var controlElement =
-    pluginControlElement || rowEditControlElement(control, options.autocompleteUrl);
+    pluginControlElement ||
+    rowEditControlElement(control, options.autocompleteUrl);
   if (options.autocompleteUrl && !pluginControlElement) {
     control.addEventListener("input", function () {
       setForeignKeyMetaLink(meta, options.autocompleteUrl, null);
@@ -1069,13 +1077,16 @@ function createRowEditField(column, value, isPk, columnType, index, options) {
     control.addEventListener("change", function () {
       resolveForeignKeyMetaLink(control, options.autocompleteUrl, meta);
     });
-    controlElement.addEventListener("datasette-autocomplete-select", function (ev) {
-      setForeignKeyMetaLink(
-        meta,
-        options.autocompleteUrl,
-        ev.detail && ev.detail.row,
-      );
-    });
+    controlElement.addEventListener(
+      "datasette-autocomplete-select",
+      function (ev) {
+        setForeignKeyMetaLink(
+          meta,
+          options.autocompleteUrl,
+          ev.detail && ev.detail.row,
+        );
+      },
+    );
     resolveForeignKeyMetaLink(control, options.autocompleteUrl, meta);
   }
 
@@ -1157,7 +1168,8 @@ function showRowEditDialogError(state, message) {
 }
 
 function updateRowEditDialogButtons(state) {
-  state.saveButton.disabled = state.isLoading || state.isSaving || !state.hasLoaded;
+  state.saveButton.disabled =
+    state.isLoading || state.isSaving || !state.hasLoaded;
   state.cancelButton.disabled = state.isSaving;
   var saveLabel = state.mode === "insert" ? "Insert row" : "Save";
   state.saveButton.textContent = state.isSaving ? "Saving..." : saveLabel;
@@ -1277,12 +1289,7 @@ function rowEditValuesMatch(left, right) {
   if (left === right) {
     return true;
   }
-  if (
-    left &&
-    right &&
-    typeof left === "object" &&
-    typeof right === "object"
-  ) {
+  if (left && right && typeof left === "object" && typeof right === "object") {
     return JSON.stringify(left) === JSON.stringify(right);
   }
   return false;
@@ -1337,7 +1344,9 @@ function collectRowFormValues(state) {
     var value = valueFromRowEditControl(control);
     if (state.mode === "edit") {
       try {
-        if (rowEditValuesMatch(value, initialValueFromRowEditControl(control))) {
+        if (
+          rowEditValuesMatch(value, initialValueFromRowEditControl(control))
+        ) {
           return;
         }
       } catch (_error) {
@@ -1457,7 +1466,8 @@ async function saveRowEditDialog(state) {
   setRowEditDialogSaving(state, true);
 
   try {
-    var url = state.mode === "insert" ? state.currentInsertUrl : state.currentUpdateUrl;
+    var url =
+      state.mode === "insert" ? state.currentInsertUrl : state.currentUpdateUrl;
     if (!url) {
       throw new Error(
         state.mode === "insert"
@@ -1496,7 +1506,8 @@ async function saveRowEditDialog(state) {
 
     if (state.mode === "insert") {
       var insertData = tableInsertData() || {};
-      var insertedRowData = data && data.rows && data.rows.length ? data.rows[0] : null;
+      var insertedRowData =
+        data && data.rows && data.rows.length ? data.rows[0] : null;
       var insertedRowId = rowPathFromRowData(
         insertedRowData,
         insertData.primaryKeys || [],
@@ -1538,7 +1549,8 @@ async function saveRowEditDialog(state) {
         showRowMutationStatus(state.manager, insertedStatusMessage, false);
         if (addedRow) {
           var insertedFocusTarget =
-            addedRow.querySelector('button[data-row-action="edit"]') || addedRow;
+            addedRow.querySelector('button[data-row-action="edit"]') ||
+            addedRow;
           insertedFocusTarget.focus();
         }
       } else {
@@ -1573,7 +1585,8 @@ async function saveRowEditDialog(state) {
         false,
       );
       focusTarget =
-        importedRow.querySelector('button[data-row-action="edit"]') || importedRow;
+        importedRow.querySelector('button[data-row-action="edit"]') ||
+        importedRow;
     } else if (state.currentRow && document.contains(state.currentRow)) {
       focusTarget =
         nextRowActionFocusTarget(state.currentRow, "edit") ||
@@ -1673,7 +1686,9 @@ function renderRowInsertFields(state, data) {
 
   state.hasLoaded = true;
   updateRowEditDialogButtons(state);
-  var firstDefaultButton = state.fields.querySelector(".row-edit-default-set-value");
+  var firstDefaultButton = state.fields.querySelector(
+    ".row-edit-default-set-value",
+  );
   if (firstDefaultButton) {
     firstDefaultButton.focus();
   } else {
@@ -1836,7 +1851,10 @@ async function openRowEditDialog(button, manager) {
   state.currentUpdateUrl = rowUpdateUrl(row);
   state.currentFragmentUrl = rowFragmentUrl(row);
   if (state.currentUpdateUrl) {
-    state.form.action = new URL(state.currentUpdateUrl, location.href).toString();
+    state.form.action = new URL(
+      state.currentUpdateUrl,
+      location.href,
+    ).toString();
   } else {
     state.form.removeAttribute("action");
   }
@@ -1912,7 +1930,10 @@ function openRowInsertDialog(button, manager) {
   state.loadId += 1;
 
   if (state.currentInsertUrl) {
-    state.form.action = new URL(state.currentInsertUrl, location.href).toString();
+    state.form.action = new URL(
+      state.currentInsertUrl,
+      location.href,
+    ).toString();
   } else {
     state.form.removeAttribute("action");
   }
@@ -1923,7 +1944,9 @@ function openRowInsertDialog(button, manager) {
   state.dialog.removeAttribute("aria-describedby");
   setRowDialogTitle(
     state.title,
-    insertData.tableName ? "Insert row into " + insertData.tableName : "Insert row",
+    insertData.tableName
+      ? "Insert row into " + insertData.tableName
+      : "Insert row",
   );
   state.summary.hidden = true;
   state.summary.textContent = "";