diff --git a/website/src/repl/panel/PatternsTab.jsx b/website/src/repl/panel/PatternsTab.jsx
index 61488d53..59c1f421 100644
--- a/website/src/repl/panel/PatternsTab.jsx
+++ b/website/src/repl/panel/PatternsTab.jsx
@@ -2,13 +2,13 @@ import { DocumentDuplicateIcon, PencilSquareIcon, TrashIcon } from '@heroicons/r
 import { useMemo } from 'react';
 import {
   clearUserPatterns,
-  deleteActivePattern,
-  duplicateActivePattern,
+  deletePattern,
+  duplicatePattern,
   exportPatterns,
   getUserPattern,
   importPatterns,
   newUserPattern,
-  renameActivePattern,
+  renamePattern,
   useActivePattern,
   useViewingPattern,
   useSettings,
@@ -66,21 +66,21 @@ export function PatternsTab({ context }) {
   return (
     <div className="px-4 w-full dark:text-white text-stone-900 space-y-4 pb-4">
       <section>
-        {activePattern && (
+        {viewingPattern && (
           <div className="flex items-center mb-2 space-x-2 overflow-auto">
-            <h1 className="text-xl">{activePattern}</h1>
+            <h1 className="text-xl">{viewingPattern}</h1>
             <div className="space-x-4 flex w-min">
               {!isExample && (
-                <button className="hover:opacity-50" onClick={() => renameActivePattern()} title="Rename">
+                <button className="hover:opacity-50" onClick={() => renamePattern(viewingPattern)} title="Rename">
                   <PencilSquareIcon className="w-5 h-5" />
                   {/* <PencilIcon className="w-5 h-5" /> */}
                 </button>
               )}
-              <button className="hover:opacity-50" onClick={() => duplicateActivePattern()} title="Duplicate">
+              <button className="hover:opacity-50" onClick={() => duplicatePattern(viewingPattern)} title="Duplicate">
                 <DocumentDuplicateIcon className="w-5 h-5" />
               </button>
               {!isExample && (
-                <button className="hover:opacity-50" onClick={() => deleteActivePattern()} title="Delete">
+                <button className="hover:opacity-50" onClick={() => deletePattern(viewingPattern)} title="Delete">
                   <TrashIcon className="w-5 h-5" />
                 </button>
               )}
diff --git a/website/src/settings.mjs b/website/src/settings.mjs
index 61ad08d5..8872bdc7 100644
--- a/website/src/settings.mjs
+++ b/website/src/settings.mjs
@@ -152,14 +152,13 @@ export function getUserPattern(key) {
   return userPatterns[key];
 }
 
-export function renameActivePattern() {
-  let activePattern = getActivePattern();
+export function renamePattern(pattern) {
   let userPatterns = getUserPatterns();
-  if (!userPatterns[activePattern]) {
+  if (!userPatterns[pattern]) {
     alert('Cannot rename examples');
     return;
   }
-  const newName = prompt('Enter new name', activePattern);
+  const newName = prompt('Enter new name', pattern);
   if (newName === null) {
     // canceled
     return;
@@ -168,10 +167,10 @@ export function renameActivePattern() {
     alert('Name already taken!');
     return;
   }
-  userPatterns[newName] = userPatterns[activePattern]; // copy code
-  delete userPatterns[activePattern];
+  userPatterns[newName] = userPatterns[pattern]; // copy code
+  delete userPatterns[pattern];
   setUserPatterns({ ...userPatterns });
-  setActivePattern(newName);
+  setViewingPattern(newName);
 }
 
 export function updateUserCode(code) {
@@ -196,35 +195,34 @@ export function updateUserCode(code) {
   setUserPatterns({ ...userPatterns, [activePattern]: { code } });
 }
 
-export function deleteActivePattern() {
-  let activePattern = getActivePattern();
-  if (!activePattern) {
+export function deletePattern(pattern) {
+
+  if (!pattern) {
     console.warn('cannot delete: no pattern selected');
     return;
   }
   const userPatterns = getUserPatterns();
-  if (!userPatterns[activePattern]) {
+  if (!userPatterns[pattern]) {
     alert('Cannot delete examples');
     return;
   }
-  if (!confirm(`Really delete the selected pattern "${activePattern}"?`)) {
+  if (!confirm(`Really delete the selected pattern "${pattern}"?`)) {
     return;
   }
-  setUserPatterns(Object.fromEntries(Object.entries(userPatterns).filter(([key]) => key !== activePattern)));
-  setActivePattern('');
+  setUserPatterns(Object.fromEntries(Object.entries(userPatterns).filter(([key]) => key !== pattern)));
+  setViewingPattern('');
 }
 
-export function duplicateActivePattern() {
-  let activePattern = getActivePattern();
+export function duplicatePattern(pattern) {
   let latestCode = getSetting('latestCode');
-  if (!activePattern) {
+  if (!pattern) {
     console.warn('cannot duplicate: no pattern selected');
     return;
   }
   const userPatterns = getUserPatterns();
-  activePattern = getNextCloneName(activePattern);
-  setUserPatterns({ ...userPatterns, [activePattern]: { code: latestCode } });
-  setActivePattern(activePattern);
+  const newPattern  = getNextCloneName(pattern);
+  setUserPatterns({ ...userPatterns, [newPattern]: { code: latestCode } });
+  setViewingPattern(newPattern);
 }
 
 export async function importPatterns(fileList) {