diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index c2ec3fe..949582c 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -246,6 +246,7 @@ function App() {
                 <CodeMirror
                   code={generatedCode}
                   editorTheme={settings.editorTheme}
+                  onCodeChange={setGeneratedCode}
                 />
               </TabsContent>
             </Tabs>
diff --git a/frontend/src/components/CodeMirror.tsx b/frontend/src/components/CodeMirror.tsx
index 21008bc..0c268a5 100644
--- a/frontend/src/components/CodeMirror.tsx
+++ b/frontend/src/components/CodeMirror.tsx
@@ -15,9 +15,10 @@ import { html } from "@codemirror/lang-html";
 interface Props {
   code: string;
   editorTheme: string;
+  onCodeChange: (code: string) => void;
 }
 
-function CodeMirror({ code, editorTheme }: Props) {
+function CodeMirror({ code, editorTheme, onCodeChange }: Props) {
   const ref = useRef<HTMLDivElement>(null);
   const view = useRef<EditorView | null>(null);
 
@@ -42,6 +43,11 @@ function CodeMirror({ code, editorTheme }: Props) {
           html(),
           selectedTheme,
           EditorView.lineWrapping,
+          EditorView.updateListener.of(update => {
+            if (update.changes) {
+              onCodeChange(view.current?.state.doc.toString() || "");
+            }
+          }),
         ],
       }),
       parent: ref.current as Element,
@@ -69,3 +75,4 @@ function CodeMirror({ code, editorTheme }: Props) {
 }
 
 export default CodeMirror;
+