diff --git a/packages/web/src/query/useEditorData.ts b/packages/web/src/query/useEditorData.ts
index 5f480ab37..fdb0245ba 100644
--- a/packages/web/src/query/useEditorData.ts
+++ b/packages/web/src/query/useEditorData.ts
@@ -133,14 +133,14 @@ export default function useEditorData({ tabid, reloadToken = 0, loadFromArgs = n
   };
 
   const clearEditorData = async () => {
+    await localforage.removeItem(localStorageKey);
+    localStorage.removeItem(localStorageKey);
     editorState.update(x => ({
       ...x,
       value: null,
       errorMessage: null,
       isLoading: false,
     }));
-    await localforage.removeItem(localStorageKey);
-    localStorage.removeItem(localStorageKey);
   };
 
   onMount(() => {
diff --git a/packages/web/src/tableeditor/ColumnsConstraintEditorModal.svelte b/packages/web/src/tableeditor/ColumnsConstraintEditorModal.svelte
index 23a9ca54a..0ae284d96 100644
--- a/packages/web/src/tableeditor/ColumnsConstraintEditorModal.svelte
+++ b/packages/web/src/tableeditor/ColumnsConstraintEditorModal.svelte
@@ -37,114 +37,115 @@
       constraintType,
     };
   }
-
 </script>
 
-<ModalBase {...$$restProps}>
-  <svelte:fragment slot="header"
-    >{constraintInfo ? `Edit ${constraintLabel}` : `Add ${constraintLabel}`}</svelte:fragment
-  >
+<FormProvider>
+  <ModalBase {...$$restProps}>
+    <svelte:fragment slot="header"
+      >{constraintInfo ? `Edit ${constraintLabel}` : `Add ${constraintLabel}`}</svelte:fragment
+    >
 
-  <div class="largeFormMarker">
-    <div class="row">
-      <div class="label col-3">Constraint name</div>
-      <div class="col-9">
-        <TextField value={constraintName} on:input={e => (constraintName = e.target['value'])} focused />
-      </div>
-    </div>
-
-    {#each columns as column, index}
+    <div class="largeFormMarker">
       <div class="row">
-        <div class="label col-3">Column {index + 1}</div>
-        <div class="col-6">
-          {#key column.columnName}
-            <SelectField
-              value={column.columnName}
-              isNative
-              options={tableInfo.columns.map(col => ({
-                label: col.columnName,
-                value: col.columnName,
-              }))}
-              on:change={e => {
-                if (e.detail) {
-                  columns = columns.map((col, i) => (i == index ? { columnName: e.detail } : col));
-                }
+        <div class="label col-3">Constraint name</div>
+        <div class="col-9">
+          <TextField value={constraintName} on:input={e => (constraintName = e.target['value'])} focused />
+        </div>
+      </div>
+
+      {#each columns as column, index}
+        <div class="row">
+          <div class="label col-3">Column {index + 1}</div>
+          <div class="col-6">
+            {#key column.columnName}
+              <SelectField
+                value={column.columnName}
+                isNative
+                options={tableInfo.columns.map(col => ({
+                  label: col.columnName,
+                  value: col.columnName,
+                }))}
+                on:change={e => {
+                  if (e.detail) {
+                    columns = columns.map((col, i) => (i == index ? { columnName: e.detail } : col));
+                  }
+                }}
+              />
+            {/key}
+          </div>
+          <div class="col-3 button">
+            <FormStyledButton
+              value="Delete"
+              on:click={e => {
+                const x = [...columns];
+                x.splice(index, 1);
+                columns = x;
               }}
             />
+          </div>
+        </div>
+      {/each}
+
+      <div class="row">
+        <div class="label col-3">Add new column</div>
+        <div class="col-9">
+          {#key columns.length}
+            <SelectField
+              placeholder="Select column"
+              value={''}
+              on:change={e => {
+                if (e.detail)
+                  columns = [
+                    ...columns,
+                    {
+                      columnName: e.detail,
+                    },
+                  ];
+              }}
+              isNative
+              options={[
+                {
+                  label: 'Choose column',
+                  value: '',
+                },
+                ...tableInfo.columns.map(col => ({
+                  label: col.columnName,
+                  value: col.columnName,
+                })),
+              ]}
+            />
           {/key}
         </div>
-        <div class="col-3 button">
-          <FormStyledButton
-            value="Delete"
-            on:click={e => {
-              const x = [...columns];
-              x.splice(index, 1);
-              columns = x;
-            }}
-          />
-        </div>
-      </div>
-    {/each}
-
-    <div class="row">
-      <div class="label col-3">Add new column</div>
-      <div class="col-9">
-        {#key columns.length}
-          <SelectField
-            placeholder="Select column"
-            value={''}
-            on:change={e => {
-              if (e.detail)
-                columns = [
-                  ...columns,
-                  {
-                    columnName: e.detail,
-                  },
-                ];
-            }}
-            isNative
-            options={[
-              {
-                label: 'Choose column',
-                value: '',
-              },
-              ...tableInfo.columns.map(col => ({
-                label: col.columnName,
-                value: col.columnName,
-              })),
-            ]}
-          />
-        {/key}
       </div>
     </div>
-  </div>
 
-  <svelte:fragment slot="footer">
-    <FormStyledButton
-      value={'Save'}
-      on:click={() => {
-        closeCurrentModal();
-        if (constraintInfo) {
-          setTableInfo(tbl => editorModifyConstraint(tbl, getConstraint()));
-        } else {
-          setTableInfo(tbl => editorAddConstraint(tbl, getConstraint()));
-        }
-      }}
-    />
-
-    <FormStyledButton type="button" value="Close" on:click={closeCurrentModal} />
-    {#if constraintInfo}
-      <FormStyledButton
-        type="button"
-        value="Remove"
+    <svelte:fragment slot="footer">
+      <FormSubmit
+        value={'Save'}
         on:click={() => {
           closeCurrentModal();
-          setTableInfo(tbl => editorDeleteConstraint(tbl, constraintInfo));
+          if (constraintInfo) {
+            setTableInfo(tbl => editorModifyConstraint(tbl, getConstraint()));
+          } else {
+            setTableInfo(tbl => editorAddConstraint(tbl, getConstraint()));
+          }
         }}
       />
-    {/if}
-  </svelte:fragment>
-</ModalBase>
+
+      <FormStyledButton type="button" value="Close" on:click={closeCurrentModal} />
+      {#if constraintInfo}
+        <FormStyledButton
+          type="button"
+          value="Remove"
+          on:click={() => {
+            closeCurrentModal();
+            setTableInfo(tbl => editorDeleteConstraint(tbl, constraintInfo));
+          }}
+        />
+      {/if}
+    </svelte:fragment>
+  </ModalBase>
+</FormProvider>
 
 <style>
   .row {
@@ -161,5 +162,4 @@
     align-self: center;
     text-align: right;
   }
-
 </style>
diff --git a/packages/web/src/tableeditor/ForeignKeyEditorModal.svelte b/packages/web/src/tableeditor/ForeignKeyEditorModal.svelte
index ce3428d8a..c13fb04c9 100644
--- a/packages/web/src/tableeditor/ForeignKeyEditorModal.svelte
+++ b/packages/web/src/tableeditor/ForeignKeyEditorModal.svelte
@@ -62,164 +62,166 @@
   }
 </script>
 
-<ModalBase {...$$restProps}>
-  <svelte:fragment slot="header">{constraintInfo ? `Edit foreign key` : `Add foreign key`}</svelte:fragment>
+<FormProvider>
+  <ModalBase {...$$restProps}>
+    <svelte:fragment slot="header">{constraintInfo ? `Edit foreign key` : `Add foreign key`}</svelte:fragment>
 
-  <div class="largeFormMarker">
-    <div class="row">
-      <div class="label col-3">Constraint name</div>
-      <div class="col-9">
-        <TextField value={constraintName} on:input={e => (constraintName = e.target['value'])} focused />
-      </div>
-    </div>
-
-    <div class="row">
-      <div class="label col-3">Referenced table</div>
-      <div class="col-9">
-        <SelectField
-          value={fullNameToString({ pureName: refTableName, schemaName: refSchemaName })}
-          isNative
-          notSelected
-          options={(dbInfo?.tables || []).map(tbl => ({
-            label: fullNameToLabel(tbl),
-            value: fullNameToString(tbl),
-          }))}
-          on:change={e => {
-            if (e.detail) {
-              const name = fullNameFromString(e.detail);
-              refTableName = name.pureName;
-              refSchemaName = name.schemaName;
-            }
-          }}
-        />
-      </div>
-    </div>
-
-    <div class="row">
-      <div class="label col-3">On update action</div>
-      <div class="col-9">
-        <SelectField
-          value={updateAction}
-          isNative
-          notSelected
-          options={foreignKeyActionsOptions}
-          on:change={e => {
-            updateAction = e.detail || null;
-          }}
-        />
-      </div>
-    </div>
-
-    <div class="row">
-      <div class="label col-3">On delete action</div>
-      <div class="col-9">
-        <SelectField
-          value={deleteAction}
-          isNative
-          notSelected
-          options={foreignKeyActionsOptions}
-          on:change={e => {
-            deleteAction = e.detail || null;
-          }}
-        />
-      </div>
-    </div>
-
-    <div class="row">
-      <div class="col-5 mr-1">
-        Base column - {tableInfo.pureName}
-      </div>
-      <div class="col-5 ml-1">
-        Ref column - {refTableName || '(table not set)'}
-      </div>
-    </div>
-
-    {#each columns as column, index}
+    <div class="largeFormMarker">
       <div class="row">
-        <div class="col-5 mr-1">
-          {#key column.columnName}
-            <SelectField
-              value={column.columnName}
-              isNative
-              notSelected
-              options={tableInfo.columns.map(col => ({
-                label: col.columnName,
-                value: col.columnName,
-              }))}
-              on:change={e => {
-                if (e.detail) {
-                  columns = columns.map((col, i) => (i == index ? { ...col, columnName: e.detail } : col));
-                }
-              }}
-            />
-          {/key}
+        <div class="label col-3">Constraint name</div>
+        <div class="col-9">
+          <TextField value={constraintName} on:input={e => (constraintName = e.target['value'])} focused />
         </div>
-        <div class="col-5 ml-1">
-          {#key column.refColumnName}
-            <SelectField
-              value={column.refColumnName}
-              isNative
-              notSelected
-              options={(refTableInfo?.columns || []).map(col => ({
-                label: col.columnName,
-                value: col.columnName,
-              }))}
-              on:change={e => {
-                if (e.detail) {
-                  columns = columns.map((col, i) => (i == index ? { ...col, refColumnName: e.detail } : col));
-                }
-              }}
-            />
-          {/key}
-        </div>
-        <div class="col-2 button">
-          <FormStyledButton
-            value="Delete"
-            on:click={e => {
-              const x = [...columns];
-              x.splice(index, 1);
-              columns = x;
+      </div>
+
+      <div class="row">
+        <div class="label col-3">Referenced table</div>
+        <div class="col-9">
+          <SelectField
+            value={fullNameToString({ pureName: refTableName, schemaName: refSchemaName })}
+            isNative
+            notSelected
+            options={(dbInfo?.tables || []).map(tbl => ({
+              label: fullNameToLabel(tbl),
+              value: fullNameToString(tbl),
+            }))}
+            on:change={e => {
+              if (e.detail) {
+                const name = fullNameFromString(e.detail);
+                refTableName = name.pureName;
+                refSchemaName = name.schemaName;
+              }
             }}
           />
         </div>
       </div>
-    {/each}
 
-    <FormStyledButton
-      type="button"
-      value="Add column"
-      on:click={() => {
-        columns = [...columns, {}];
-      }}
-    />
-  </div>
+      <div class="row">
+        <div class="label col-3">On update action</div>
+        <div class="col-9">
+          <SelectField
+            value={updateAction}
+            isNative
+            notSelected
+            options={foreignKeyActionsOptions}
+            on:change={e => {
+              updateAction = e.detail || null;
+            }}
+          />
+        </div>
+      </div>
 
-  <svelte:fragment slot="footer">
-    <FormStyledButton
-      value={'Save'}
-      on:click={() => {
-        closeCurrentModal();
-        if (constraintInfo) {
-          setTableInfo(tbl => editorModifyConstraint(tbl, getConstraint()));
-        } else {
-          setTableInfo(tbl => editorAddConstraint(tbl, getConstraint()));
-        }
-      }}
-    />
+      <div class="row">
+        <div class="label col-3">On delete action</div>
+        <div class="col-9">
+          <SelectField
+            value={deleteAction}
+            isNative
+            notSelected
+            options={foreignKeyActionsOptions}
+            on:change={e => {
+              deleteAction = e.detail || null;
+            }}
+          />
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col-5 mr-1">
+          Base column - {tableInfo.pureName}
+        </div>
+        <div class="col-5 ml-1">
+          Ref column - {refTableName || '(table not set)'}
+        </div>
+      </div>
+
+      {#each columns as column, index}
+        <div class="row">
+          <div class="col-5 mr-1">
+            {#key column.columnName}
+              <SelectField
+                value={column.columnName}
+                isNative
+                notSelected
+                options={tableInfo.columns.map(col => ({
+                  label: col.columnName,
+                  value: col.columnName,
+                }))}
+                on:change={e => {
+                  if (e.detail) {
+                    columns = columns.map((col, i) => (i == index ? { ...col, columnName: e.detail } : col));
+                  }
+                }}
+              />
+            {/key}
+          </div>
+          <div class="col-5 ml-1">
+            {#key column.refColumnName}
+              <SelectField
+                value={column.refColumnName}
+                isNative
+                notSelected
+                options={(refTableInfo?.columns || []).map(col => ({
+                  label: col.columnName,
+                  value: col.columnName,
+                }))}
+                on:change={e => {
+                  if (e.detail) {
+                    columns = columns.map((col, i) => (i == index ? { ...col, refColumnName: e.detail } : col));
+                  }
+                }}
+              />
+            {/key}
+          </div>
+          <div class="col-2 button">
+            <FormStyledButton
+              value="Delete"
+              on:click={e => {
+                const x = [...columns];
+                x.splice(index, 1);
+                columns = x;
+              }}
+            />
+          </div>
+        </div>
+      {/each}
 
-    <FormStyledButton type="button" value="Close" on:click={closeCurrentModal} />
-    {#if constraintInfo}
       <FormStyledButton
         type="button"
-        value="Remove"
+        value="Add column"
         on:click={() => {
-          closeCurrentModal();
-          setTableInfo(tbl => editorDeleteConstraint(tbl, constraintInfo));
+          columns = [...columns, {}];
         }}
       />
-    {/if}
-  </svelte:fragment>
-</ModalBase>
+    </div>
+
+    <svelte:fragment slot="footer">
+      <FormSubmit
+        value={'Save'}
+        on:click={() => {
+          closeCurrentModal();
+          if (constraintInfo) {
+            setTableInfo(tbl => editorModifyConstraint(tbl, getConstraint()));
+          } else {
+            setTableInfo(tbl => editorAddConstraint(tbl, getConstraint()));
+          }
+        }}
+      />
+
+      <FormStyledButton type="button" value="Close" on:click={closeCurrentModal} />
+      {#if constraintInfo}
+        <FormStyledButton
+          type="button"
+          value="Remove"
+          on:click={() => {
+            closeCurrentModal();
+            setTableInfo(tbl => editorDeleteConstraint(tbl, constraintInfo));
+          }}
+        />
+      {/if}
+    </svelte:fragment>
+  </ModalBase>
+</FormProvider>
 
 <style>
   .row {
diff --git a/packages/web/src/tabs/TableStructureTab.svelte b/packages/web/src/tabs/TableStructureTab.svelte
index a9d9584cf..8f267a6c7 100644
--- a/packages/web/src/tabs/TableStructureTab.svelte
+++ b/packages/web/src/tabs/TableStructureTab.svelte
@@ -66,7 +66,7 @@
 
   const { editorState, editorValue, setEditorData, clearEditorData } = useEditorData({ tabid });
 
-  $: showTable = $editorValue || tableInfoWithPairingId;
+  $: showTable = $editorValue ? $editorValue.current : tableInfoWithPairingId;
 
   export function canSave() {
     return objectTypeField == 'tables' && !!$editorValue;
@@ -74,7 +74,7 @@
 
   export function save() {
     const driver = findEngineDriver($connection, $extensions);
-    const sql = getAlterTableScript(tableInfoWithPairingId, $editorValue, {}, $dbInfo, driver);
+    const sql = getAlterTableScript($editorValue.base, $editorValue.current, {}, $dbInfo, driver);
 
     showModal(ConfirmSqlModal, {
       sql,
@@ -114,9 +114,16 @@
   dbInfo={$dbInfo}
   setTableInfo={objectTypeField == 'tables'
     ? tableInfoUpdater =>
-        setEditorData(tbl => {
-          if (tbl) return tableInfoUpdater(tbl);
-          return tableInfoUpdater(tableInfoWithPairingId);
-        })
+        setEditorData(tbl =>
+          tbl
+            ? {
+                base: tbl.base,
+                current: tableInfoUpdater(tbl.current),
+              }
+            : {
+                base: tableInfoWithPairingId,
+                current: tableInfoUpdater(tableInfoWithPairingId),
+              }
+        )
     : null}
 />