diff --git a/website/src/repl/Header.jsx b/website/src/repl/Header.jsx
index 5e991f8a..b6f13060 100644
--- a/website/src/repl/Header.jsx
+++ b/website/src/repl/Header.jsx
@@ -87,7 +87,7 @@ export function Header({ context }) {
             )}
           </button>
           <button
-            onClick={handleUpdate}
+            onClick={() => handleUpdate()}
             title="update"
             className={cx(
               'flex items-center space-x-1',
diff --git a/website/src/repl/panel/PatternsTab.jsx b/website/src/repl/panel/PatternsTab.jsx
index 37cac6f7..175ed887 100644
--- a/website/src/repl/panel/PatternsTab.jsx
+++ b/website/src/repl/panel/PatternsTab.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { useMemo } from 'react';
 import * as tunes from '../tunes.mjs';
 import {
   useSettings,
@@ -8,10 +8,13 @@ import {
   deleteActivePattern,
   duplicateActivePattern,
   getUserPattern,
+  getUserPatterns,
   renameActivePattern,
   addUserPattern,
+  setUserPatterns,
 } from '../../settings.mjs';
 import { logger } from '@strudel.cycles/core';
+import { DocumentDuplicateIcon, PencilSquareIcon, TrashIcon } from '@heroicons/react/20/solid';
 
 function classNames(...classes) {
   return classes.filter(Boolean).join(' ');
@@ -19,54 +22,31 @@ function classNames(...classes) {
 
 export function PatternsTab({ context }) {
   const { userPatterns, activePattern } = useSettings();
+  const isExample = useMemo(() => activePattern && !!tunes[activePattern], [activePattern]);
   return (
     <div className="px-4 w-full dark:text-white text-stone-900 space-y-4 pb-4">
       <section>
-        <div className="px-4 space-x-4 border-b border-foreground mb-2 h-8">
-          <button
-            className="hover:opacity-50"
-            onClick={() => {
-              const name = newUserPattern();
-              const { code } = getUserPattern(name);
-              context.handleUpdate(code, true);
-            }}
-          >
-            new
-          </button>
-          <button className="hover:opacity-50" onClick={() => duplicateActivePattern()}>
-            duplicate
-          </button>
-          <button className="hover:opacity-50" onClick={() => renameActivePattern()}>
-            rename
-          </button>
-          <button className="hover:opacity-50" onClick={() => deleteActivePattern()}>
-            delete
-          </button>
-          <button className="hover:opacity-50" onClick={() => clearUserPatterns()}>
-            clear
-          </button>
-          <label className="hover:opacity-50 cursor-pointer">
-            <input
-              style={{ display: 'none' }}
-              type="file"
-              multiple
-              accept="text/plain"
-              onChange={async (e) => {
-                const files = Array.from(e.target.files);
-                await Promise.all(
-                  files.map(async (file, i) => {
-                    const code = await file.text();
-                    const name = file.name.replace(/\.[^/.]+$/, '');
-                    console.log(i, name, code);
-                    addUserPattern(name, { code });
-                  }),
-                );
-                logger(`import done!`);
-              }}
-            />
-            import
-          </label>
-        </div>
+        {activePattern && (
+          <div className="flex items-center mb-2 space-x-2 overflow-auto">
+            <h1 className="text-xl">{activePattern}</h1>
+            <div className="space-x-4 flex w-min">
+              {!isExample && (
+                <button className="hover:opacity-50" onClick={() => renameActivePattern()} title="Rename">
+                  <PencilSquareIcon className="w-5 h-5" />
+                  {/* <PencilIcon className="w-5 h-5" /> */}
+                </button>
+              )}
+              <button className="hover:opacity-50" onClick={() => duplicateActivePattern()} title="Duplicate">
+                <DocumentDuplicateIcon className="w-5 h-5" />
+              </button>
+              {!isExample && (
+                <button className="hover:opacity-50" onClick={() => deleteActivePattern()} title="Delete">
+                  <TrashIcon className="w-5 h-5" />
+                </button>
+              )}
+            </div>
+          </div>
+        )}
         <div className="font-mono text-sm">
           {Object.entries(userPatterns).map(([key, up]) => (
             <a
@@ -85,6 +65,61 @@ export function PatternsTab({ context }) {
             </a>
           ))}
         </div>
+        <div className="pr-4 space-x-4 border-b border-foreground mb-2 h-8 flex overflow-auto max-w-full items-center">
+          <button
+            className="hover:opacity-50"
+            onClick={() => {
+              const name = newUserPattern();
+              const { code } = getUserPattern(name);
+              context.handleUpdate(code, true);
+            }}
+          >
+            new
+          </button>
+          <button className="hover:opacity-50" onClick={() => clearUserPatterns()}>
+            clear
+          </button>
+          <label className="hover:opacity-50 cursor-pointer">
+            <input
+              style={{ display: 'none' }}
+              type="file"
+              multiple
+              accept="text/plain,application/json"
+              onChange={async (e) => {
+                const files = Array.from(e.target.files);
+                await Promise.all(
+                  files.map(async (file, i) => {
+                    const content = await file.text();
+                    if (file.type === 'application/json') {
+                      const userPatterns = getUserPatterns() || {};
+                      setUserPatterns({ ...userPatterns, ...JSON.parse(content) });
+                    } else if (file.type === 'text/plain') {
+                      const name = file.name.replace(/\.[^/.]+$/, '');
+                      addUserPattern(name, { code: content });
+                    }
+                  }),
+                );
+                logger(`import done!`);
+              }}
+            />
+            import
+          </label>
+          <button
+            className="hover:opacity-50"
+            onClick={() => {
+              const blob = new Blob([JSON.stringify(userPatterns)], { type: 'application/json' });
+              const downloadLink = document.createElement('a');
+              downloadLink.href = window.URL.createObjectURL(blob);
+              const date = new Date().toISOString().split('T')[0];
+              downloadLink.download = `strudel_patterns_${date}.json`;
+              document.body.appendChild(downloadLink);
+              downloadLink.click();
+              document.body.removeChild(downloadLink);
+            }}
+          >
+            export
+          </button>
+        </div>
       </section>
       <section>
         <h2 className="text-xl mb-2">Examples</h2>
diff --git a/website/src/settings.mjs b/website/src/settings.mjs
index eaed555b..cf8a7cee 100644
--- a/website/src/settings.mjs
+++ b/website/src/settings.mjs
@@ -62,14 +62,14 @@ export const fontSize = patternSetting('fontSize');
 
 export const settingPatterns = { theme, fontFamily, fontSize };
 
-function getUserPatterns() {
+export function getUserPatterns() {
   return JSON.parse(settingsMap.get().userPatterns);
 }
 function getSetting(key) {
   return settingsMap.get()[key];
 }
 
-function setUserPatterns(obj) {
+export function setUserPatterns(obj) {
   settingsMap.setKey('userPatterns', JSON.stringify(obj));
 }
 
@@ -81,7 +81,7 @@ export function addUserPattern(name, config) {
     throw new Error('addUserPattern expected code as property of second param');
   }
   const userPatterns = getUserPatterns();
-  setUserPatterns({ ...userPatterns, [name]: config });
+  setUserPatterns({ [name]: config, ...userPatterns });
 }
 
 export function newUserPattern() {
@@ -123,6 +123,10 @@ export function renameActivePattern() {
     return;
   }
   const newName = prompt('Enter new name', activePattern);
+  if (newName === null) {
+    // canceled
+    return;
+  }
   if (userPatterns[newName]) {
     alert('Name already taken!');
     return;
@@ -152,7 +156,7 @@ export function updateUserCode(code) {
     activePattern = getNextCloneName(activePattern);
     setActivePattern(activePattern);
   }
-  setUserPatterns({ ...userPatterns, [activePattern]: { code } });
+  setUserPatterns({ [activePattern]: { code }, ...userPatterns });
 }
 
 export function deleteActivePattern() {
@@ -182,10 +186,12 @@ export function duplicateActivePattern() {
   }
   const userPatterns = getUserPatterns();
   activePattern = getNextCloneName(activePattern);
-  setUserPatterns({ ...userPatterns, [activePattern]: { code: latestCode } });
+  setUserPatterns({ [activePattern]: { code: latestCode }, ...userPatterns });
   setActivePattern(activePattern);
 }
 
 export function setActivePattern(key) {
   settingsMap.setKey('activePattern', key);
 }
+
+export function importUserPatternJSON(jsonString) {}