diff --git a/packages/components/src/components/SquigglePlayground.tsx b/packages/components/src/components/SquigglePlayground.tsx
index f67220f9..1c2bf81f 100644
--- a/packages/components/src/components/SquigglePlayground.tsx
+++ b/packages/components/src/components/SquigglePlayground.tsx
@@ -238,7 +238,7 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
 
   useEffect(() => {
     onSettingsChange?.(vars);
-  }, [vars]);
+  }, [vars, onSettingsChange]);
 
   const chartSettings = {
     start: Number(vars.diagramStart),
diff --git a/packages/website/src/pages/playground.js b/packages/website/src/pages/playground.js
index fa39977f..48a2c90d 100644
--- a/packages/website/src/pages/playground.js
+++ b/packages/website/src/pages/playground.js
@@ -4,13 +4,18 @@ import React from "react";
 import Layout from "@theme/Layout";
 import { SquigglePlayground } from "../components/SquigglePlayground";
 
+const HASH_PREFIX = "#code=";
 function getHashData() {
-  if (typeof window === "undefined" || !window.location.hash) {
+  if (typeof window === "undefined") {
+    return {};
+  }
+  const hash = window.location.hash;
+  if (!hash.startsWith(HASH_PREFIX)) {
     return {};
   }
   try {
     const compressed = toByteArray(
-      decodeURIComponent(window.location.hash.slice(1))
+      decodeURIComponent(hash.slice(HASH_PREFIX.length))
     );
     const text = inflate(compressed, { to: "string" });
     return JSON.parse(text);
@@ -26,7 +31,7 @@ function setHashData(data) {
   window.history.replaceState(
     undefined,
     "",
-    "#" + encodeURIComponent(fromByteArray(compressed))
+    HASH_PREFIX + encodeURIComponent(fromByteArray(compressed))
   );
 }