diff --git a/app/src/AbiApp.tsx b/app/src/AbiApp.tsx
index f65bea1..877138a 100644
--- a/app/src/AbiApp.tsx
+++ b/app/src/AbiApp.tsx
@@ -1,6 +1,6 @@
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import LogView from "./features/editor/components/LogView";
-import { loadAbi, saveSwayCode } from "./utils/localStorage";
+import { loadAbi, saveAbi, saveSwayCode } from "./utils/localStorage";
 import InteractionDrawer from "./features/interact/components/InteractionDrawer";
 import { useLog } from "./features/editor/hooks/useLog";
 import { Analytics } from "@vercel/analytics/react";
@@ -26,6 +26,11 @@ function AbiApp() {
   // The theme color for the app.
   const { themeColor } = useTheme();
 
+  // Update the ABI in localstorage when the editor changes.
+  useEffect(() => {
+    saveAbi(abiCode);
+  }, [abiCode]);
+
   const onSwayCodeChange = useCallback(
     (code: string) => {
       saveSwayCode(code);