diff --git a/src/App.svelte b/src/App.svelte
index 0ab75628..6d3d5058 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -19,6 +19,8 @@
   import SuggestName from "./content-modules/context-free-tools/SuggestName.svelte";
   import GetColorsFromString from "./content-modules/context-free-tools/GetColorsFromString.svelte";
 
+  import ContentEditable from "./components/ContentEditable.svelte";
+
   const tabs = ["examples", "compare", "eval"] as const;
 </script>
 
@@ -63,17 +65,10 @@
                 <span class="italic">Current Pal:</span>
                 <div class="flex">
                   <span>✎</span>
-                  <!-- svelte-ignore a11y-no-static-element-interactions -->
-                  <div
-                    class=""
-                    on:keyup={(e) => {
-                      // @ts-ignore
-                      colorStore.setCurrentPalName(e.target.textContent);
-                    }}
-                    contenteditable="true"
-                  >
-                    {$colorStore.currentPal.name}
-                  </div>
+                  <ContentEditable
+                    onChange={(x) => colorStore.setCurrentPalName(x)}
+                    value={$colorStore.currentPal.name}
+                  />
                 </div>
               </div>
               <SuggestName />
diff --git a/src/components/ContentEditable.svelte b/src/components/ContentEditable.svelte
new file mode 100644
index 00000000..c20afb82
--- /dev/null
+++ b/src/components/ContentEditable.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  export let onChange: (str: string) => void;
+  export let value: string;
+
+  let focused = false;
+</script>
+
+{#if focused}
+  <input
+    type="text"
+    bind:value
+    on:blur={() => {
+      onChange(value);
+      focused = false;
+    }}
+    on:keyup={(e) => {
+      if (e.key === "Enter") {
+        focused = false;
+        onChange(value);
+      }
+    }}
+  />
+{:else}
+  <button on:click={() => (focused = true)}>
+    {value}
+  </button>
+{/if}