diff --git a/datasette/templates/_codemirror_foot.html b/datasette/templates/_codemirror_foot.html
index 9aba61ab..4019d448 100644
--- a/datasette/templates/_codemirror_foot.html
+++ b/datasette/templates/_codemirror_foot.html
@@ -6,21 +6,32 @@ window.onload = () => {
     if (sqlFormat && !readOnly) {
         sqlFormat.hidden = false;
     }
-    var editor = CodeMirror.fromTextArea(sqlInput, {
-      lineNumbers: true,
-      mode: "text/x-sql",
-      lineWrapping: true,
-    });
-    editor.setOption("extraKeys", {
-      "Shift-Enter": function() {
-        document.getElementsByClassName("sql")[0].submit();
-      },
-      Tab: false
-    });
-    if (sqlInput && sqlFormat) {
-        sqlFormat.addEventListener("click", ev => {
-            editor.setValue(sqlFormatter.format(editor.getValue()));
-        })
+    if (sqlInput) {
+        var editor = CodeMirror.fromTextArea(sqlInput, {
+          lineNumbers: true,
+          mode: "text/x-sql",
+          lineWrapping: true,
+        });
+        editor.setOption("extraKeys", {
+          "Shift-Enter": function() {
+            document.getElementsByClassName("sql")[0].submit();
+          },
+          Tab: false
+        });
+        if (sqlFormat) {
+            sqlFormat.addEventListener("click", ev => {
+                editor.setValue(sqlFormatter.format(editor.getValue()));
+            })
+        }
+    }
+    if (sqlFormat && readOnly) {
+        const formatted = sqlFormatter.format(readOnly.innerHTML);
+        if (formatted != readOnly.innerHTML) {
+            sqlFormat.hidden = false;
+            sqlFormat.addEventListener("click", ev => {
+                readOnly.innerHTML = formatted;
+            })
+        }
     }
 }
 </script>