diff --git a/website/src/repl/Repl.jsx b/website/src/repl/Repl.jsx
index 75ef0278..384e78d3 100644
--- a/website/src/repl/Repl.jsx
+++ b/website/src/repl/Repl.jsx
@@ -157,9 +157,9 @@ export function Repl({ embedded = false }) {
 
   const handleTogglePlay = async () => editorRef.current?.toggle();
 
-  // payload = {reset?: boolean, code?: string, evaluate?: boolean, patternID?: string }
+  // payload = {reset?: boolean, code?: string, evaluate?: boolean, pattern?: string }
   const handleUpdate = async (payload) => {
-    const { reset = false, code = null, evaluate = true, patternID = null } = payload;
+    const { reset = false, code = null, evaluate = true, pattern = null } = payload;
 
     if (reset) {
       clearCanvas();
@@ -167,9 +167,9 @@ export function Repl({ embedded = false }) {
       editorRef.current.repl.setCps(1);
       await prebake(); // declare default samples
     }
-    if (code != null) {
+    if (code != null && pattern != null) {
       editorRef.current.setCode(code);
-      setViewingPattern(patternID);
+      setViewingPattern(pattern);
     }
     if (evaluate) {
       editorRef.current.evaluate();
diff --git a/website/src/repl/panel/PatternsTab.jsx b/website/src/repl/panel/PatternsTab.jsx
index a5ded1f0..b5439220 100644
--- a/website/src/repl/panel/PatternsTab.jsx
+++ b/website/src/repl/panel/PatternsTab.jsx
@@ -1,13 +1,13 @@
 import { DocumentDuplicateIcon, PencilSquareIcon, TrashIcon } from '@heroicons/react/20/solid';
-import { useMemo } from 'react';
+
 import {
   clearUserPatterns,
   deletePattern,
-  duplicatePattern,
+  createDuplicatePattern,
   exportPatterns,
-  getUserPattern,
+  addUserPattern,
   importPatterns,
-  newUserPattern,
+  createNewUserPattern,
   renamePattern,
   useActivePattern,
   useViewingPattern,
@@ -55,9 +55,14 @@ export function PatternsTab({ context }) {
   const activePattern = useActivePattern();
   const viewingPattern = useViewingPattern();
   // const isExample = useMemo(() => activePattern && !!tunes[activePattern], [activePattern]);
-  const onPatternClick = (key, data) => {
+  const onPatternClick = (pattern, data) => {
     // display selected pattern code in the window
-    context.handleUpdate({ patternID: key, code: data.code, evaluate: false });
+    context.handleUpdate({ pattern, code: data.code, evaluate: false });
+  };
+
+  const addPattern = ({ pattern, code }) => {
+    addUserPattern(pattern, { code });
+    context.handleUpdate({ code, pattern, evaluate: false });
   };
 
   const examplePatterns = {};
@@ -76,7 +81,11 @@ export function PatternsTab({ context }) {
                   {/* <PencilIcon className="w-5 h-5" /> */}
                 </button>
               )}
-              <button className="hover:opacity-50" onClick={() => duplicatePattern(viewingPattern)} title="Duplicate">
+              <button
+                className="hover:opacity-50"
+                onClick={() => addPattern(createDuplicatePattern(viewingPattern))}
+                title="Duplicate"
+              >
                 <DocumentDuplicateIcon className="w-5 h-5" />
               </button>
               {!isExample && (
@@ -97,9 +106,7 @@ export function PatternsTab({ context }) {
           <button
             className="hover:opacity-50"
             onClick={() => {
-              const name = newUserPattern();
-              const { code } = getUserPattern(name);
-              context.handleUpdate({ code, evaluate: false });
+              addPattern(createNewUserPattern());
             }}
           >
             new
diff --git a/website/src/settings.mjs b/website/src/settings.mjs
index 0d38d6b8..da9d4b12 100644
--- a/website/src/settings.mjs
+++ b/website/src/settings.mjs
@@ -120,15 +120,14 @@ export function addUserPattern(name, config) {
   setUserPatterns({ ...userPatterns, [name]: config });
 }
 
-export function newUserPattern() {
+export function createNewUserPattern() {
   const userPatterns = getUserPatterns();
   const date = new Date().toISOString().split('T')[0];
   const todays = Object.entries(userPatterns).filter(([name]) => name.startsWith(date));
   const num = String(todays.length + 1).padStart(3, '0');
-  const name = date + '_' + num;
+  const pattern = date + '_' + num;
   const code = 's("hh")';
-  setUserPatterns({ ...userPatterns, [name]: { code } });
-  setViewingPattern(name);
+  return {pattern, code}
 }
 
 export function clearUserPatterns() {
@@ -194,16 +193,14 @@ export function deletePattern(pattern) {
   setViewingPattern('');
 }
 
-export function duplicatePattern(pattern) {
+export function createDuplicatePattern(pattern) {
   let latestCode = getSetting('latestCode');
   if (!pattern) {
     console.warn('cannot duplicate: no pattern selected');
     return;
   }
-  const userPatterns = getUserPatterns();
   const newPattern  = getNextCloneName(pattern);
-  setUserPatterns({ ...userPatterns, [newPattern]: { code: latestCode } });
-  setViewingPattern(newPattern);
+  return {pattern: newPattern, code: latestCode}
 }
 
 export async function importPatterns(fileList) {