diff --git a/src/App.tsx b/src/App.tsx
index 527f3d0..369214d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,6 @@
 import { Excalidraw } from "@excalidraw/excalidraw";
 import type { ExcalidrawElement } from "@excalidraw/excalidraw/element/types";
+import { useEffect, useRef } from "react";
 
 type AppProps = {
   initialElements?: ExcalidrawElement[];
@@ -7,6 +8,29 @@ type AppProps = {
 };
 
 function App({ initialElements = [], isReadonly = false }: AppProps) {
+  const elementsRef = useRef<readonly ExcalidrawElement[]>(initialElements);
+
+  useEffect(() => {
+    elementsRef.current = initialElements;
+  }, [initialElements]);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "s") {
+        event.preventDefault();
+        window.parent.postMessage({
+          type: "not3/draw/save",
+          payload: elementsRef.current,
+        }, "*");
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+
   return (
     <>
       <div style={{ height: "100%", width: "100%" }}>
@@ -31,6 +55,7 @@ function App({ initialElements = [], isReadonly = false }: AppProps) {
           viewModeEnabled={isReadonly}
           // eslint-disable-next-line @typescript-eslint/no-unused-vars
           onChange={(excalidrawElements, _appState, _files) => {
+            elementsRef.current = excalidrawElements;
             window.parent.postMessage({
               type: "not3/draw/change",
               payload: excalidrawElements,
diff --git a/vite.config.ts b/vite.config.ts
index 1b630a0..ca8cae2 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -8,4 +8,7 @@ export default defineConfig({
   define: {
     "process.env.IS_PREACT": JSON.stringify("true"),
   },
+  server: {
+    allowedHosts: true,
+  },
 })