aidenybai · Rot4tion · Jan 5, 2026
diff --git a/packages/scan/src/web/components/copy-to-clipboard/index.tsx b/packages/scan/src/web/components/copy-to-clipboard/index.tsx
@@ -1,5 +1,6 @@
 import { memo } from 'preact/compat';
 import { useCallback, useEffect, useState } from 'preact/hooks';
+import { copyText } from '~web/utils/clipboard';
 import { cn } from '~web/utils/helpers';
 import { Icon } from '../icon';
 
@@ -38,15 +39,25 @@ export const CopyToClipboard = /* @__PURE__ */ memo(
         e.preventDefault();
         e.stopPropagation();
 
-        navigator.clipboard.writeText(text).then(
-          () => {
+        try {
+          const result = copyText(text);
+          if (result instanceof Promise) {
+            result.then(
+              () => {
+                setIsCopied(true);
+                onCopy?.(true, text);
+              },
+              () => {
+                onCopy?.(false, text);
+              },
+            );
+          } else {
             setIsCopied(true);
             onCopy?.(true, text);
-          },
-          () => {
-            onCopy?.(false, text);
-          },
-        );
+          }
+        } catch {
+          onCopy?.(false, text);
+        }
       },
       [text, onCopy],
     );

diff --git a/packages/scan/src/web/utils/clipboard.ts b/packages/scan/src/web/utils/clipboard.ts
@@ -0,0 +1,21 @@
+/**
+ * Copies text to clipboard with fallback for HTTP / IP LAN environments
+ * where navigator.clipboard is not available.
+ */
+export function copyText(text: string): Promise<void> | void {
+  if (navigator.clipboard?.writeText && window.isSecureContext) {
+    return navigator.clipboard.writeText(text);
+  }
+
+  // Fallback for HTTP / IP LAN
+  const ta = document.createElement("textarea");
+  ta.value = text;
+  ta.style.position = "fixed";
+  ta.style.left = "-9999px";
+  document.body.appendChild(ta);
+  ta.focus();
+  ta.select();
+
+  document.execCommand("copy");
+  document.body.removeChild(ta);
+}
diff --git a/packages/scan/src/web/views/notifications/optimize.tsx b/packages/scan/src/web/views/notifications/optimize.tsx
@@ -1,12 +1,13 @@
 import { useState } from 'preact/hooks';
+import { iife } from '~core/notifications/performance-utils';
+import { copyText } from '~web/utils/clipboard';
 import { cn } from '~web/utils/helpers';
 import {
   GroupedFiberRender,
   NotificationEvent,
   getComponentName,
   getTotalTime,
 } from './data';
-import { iife } from '~core/notifications/performance-utils';
 
 const formatReactData = (groupedFiberRenders: Array<GroupedFiberRender>) => {
   let text = '';
@@ -506,7 +507,7 @@ export const Optimize = ({
         onClick={async () => {
           const text = getLLMPrompt(activeTab, selectedEvent);
 
-          await navigator.clipboard.writeText(text);
+          await copyText(text);
           setCopying(true);
           setTimeout(() => setCopying(false), 1000);
         }}

diff --git a/packages/scan/src/web/views/notifications/other-visualization.tsx b/packages/scan/src/web/views/notifications/other-visualization.tsx
@@ -2,6 +2,7 @@ import { ReactNode } from 'preact/compat';
 import { useContext, useEffect, useState } from 'preact/hooks';
 import { getIsProduction } from '~core/index';
 import { iife } from '~core/notifications/performance-utils';
+import { copyText } from '~web/utils/clipboard';
 import { cn } from '~web/utils/helpers';
 import {
   InteractionEvent,
@@ -394,7 +395,7 @@ const CopyPromptButton = () => {
           return;
         }
 
-        await navigator.clipboard.writeText(
+        await copyText(
           getLLMPrompt('explanation', notificationState.selectedEvent),
         );
         setCopying(true);

diff --git a/packages/website/components/cli.tsx b/packages/website/components/cli.tsx
@@ -1,6 +1,7 @@
-'use client';
+"use client";
 
-import React, { useState } from 'react';
+import { copyText } from "@/utils/clipboard";
+import React, { useState } from "react";
 
 const ClipboardIcon = ({ className }: { className: string }) => (
   <svg
@@ -38,7 +39,7 @@ export default function CLI({ command }: { command: string }) {
   const [copied, setCopied] = useState(false);
 
   const copyToClipboard = async () => {
-    await navigator.clipboard.writeText(command);
+    await copyText(command);
     setCopied(true);
     setTimeout(() => setCopied(false), 2000);
   };
@@ -67,7 +68,7 @@ export default function CLI({ command }: { command: string }) {
             {copied ? (
               <CheckIcon className="size-4 text-green-500" />
             ) : (
-                <ClipboardIcon className="size-4 text-white" />
+              <ClipboardIcon className="size-4 text-white" />
             )}
           </button>
         </pre>

diff --git a/packages/website/components/install-guide.tsx b/packages/website/components/install-guide.tsx
@@ -1,9 +1,10 @@
-'use client';
+"use client";
 
-import React, { useState, useEffect } from 'react';
+import { copyText } from "@/utils/clipboard";
+import hljs from "highlight.js";
+import "highlight.js/styles/github-dark.css";
 import Image from "next/image";
-import hljs from 'highlight.js';
-import 'highlight.js/styles/github-dark.css';
+import React, { useEffect, useState } from "react";
 
 const ClipboardIcon = ({ className }: { className: string }) => (
   <svg
@@ -37,13 +38,13 @@ const CheckIcon = ({ className }: { className: string }) => (
   </svg>
 );
 
-const Tabs = ['script', 'nextjs-app', 'nextjs-pages', 'vite', 'remix'] as const;
+const Tabs = ["script", "nextjs-app", "nextjs-pages", "vite", "remix"] as const;
 type Tab = (typeof Tabs)[number];
 
 export default function InstallGuide() {
   const [copied, setCopied] = useState(false);
-  const [activeTab, setActiveTab] = useState<Tab>('script');
-  const [height, setHeight] = useState('auto');
+  const [activeTab, setActiveTab] = useState<Tab>("script");
+  const [height, setHeight] = useState("auto");
   const contentRef = React.useRef<HTMLPreElement>(null);
 
   useEffect(() => {
@@ -61,21 +62,21 @@ export default function InstallGuide() {
   };
 
   const copyToClipboard = async () => {
-    await navigator.clipboard.writeText(getCodeForTab(activeTab));
+    await copyText(getCodeForTab(activeTab));
     setCopied(true);
     setTimeout(() => setCopied(false), 2000);
   };
 
   const getCodeForTab = (tab: Tab) => {
     switch (tab) {
-      case 'script':
+      case "script":
         return `<!-- paste this BEFORE any scripts -->
 <script
   crossOrigin="anonymous"
   src="//unpkg.com/react-scan/dist/auto.global.js"
 ></script>
 `;
-      case 'nextjs-app':
+      case "nextjs-app":
         return `export default function RootLayout({
   children,
 }: {
@@ -94,7 +95,7 @@ export default function InstallGuide() {
     </html>
   )
 }`;
-      case 'nextjs-pages':
+      case "nextjs-pages":
         return `import { Html, Head, Main, NextScript } from 'next/document';
 
 export default function Document() {
@@ -114,7 +115,7 @@ export default function Document() {
     </Html>
   );
 }`;
-      case 'vite':
+      case "vite":
         return `<!doctype html>
 <html lang="en">
   <head>
@@ -128,7 +129,7 @@ export default function Document() {
     <!-- ... -->
   </body>
 </html>`;
-      case 'remix':
+      case "remix":
         return `import { Links, Meta, Outlet, Scripts } from "@remix-run/react";
 
 export default function App() {
@@ -157,7 +158,9 @@ export default function App() {
     }
   };
 
-  const highlightedCode = hljs.highlight(getCodeForTab(activeTab), { language: 'javascript' }).value;
+  const highlightedCode = hljs.highlight(getCodeForTab(activeTab), {
+    language: "javascript",
+  }).value;
 
   return (
     <div className="mt-4">
@@ -171,7 +174,12 @@ export default function App() {
             <span className="size-2.5 rounded-full bg-[#28c840]/60"></span>
           </div>
           <div className="flex items-center gap-2">
-            <Image src="/logo.svg" alt="react-scan-logo" width={16} height={16} />
+            <Image
+              src="/logo.svg"
+              alt="react-scan-logo"
+              width={16}
+              height={16}
+            />
             <span className="text-[#858585] text-sm">React Scan</span>
           </div>
         </div>
@@ -182,40 +190,49 @@ export default function App() {
               <button
                 key={tab}
                 onClick={() => handleTabChange(tab)}
-                className={`relative px-4 py-2 text-[15px] transition-colors ${activeTab === tab
-                  ? 'bg-[#1e1e1e] text-white before:absolute before:left-0 before:top-0 before:h-[1px] before:w-full before:bg-[#7a68e7]'
-                  : 'text-[#969696] hover:text-white'
-                  }`}
+                className={`relative px-4 py-2 text-[15px] transition-colors ${
+                  activeTab === tab
+                    ? "bg-[#1e1e1e] text-white before:absolute before:left-0 before:top-0 before:h-[1px] before:w-full before:bg-[#7a68e7]"
+                    : "text-[#969696] hover:text-white"
+                }`}
               >
-                {tab === 'script' ? 'Script Tag' :
-                  tab === 'nextjs-app' ? 'Next.js (App)' :
-                    tab === 'nextjs-pages' ? 'Next.js (Pages)' :
-                      tab === 'vite' ? 'Vite' :
-                        tab === 'remix' ? 'Remix' :
-                          ''}
+                {tab === "script"
+                  ? "Script Tag"
+                  : tab === "nextjs-app"
+                  ? "Next.js (App)"
+                  : tab === "nextjs-pages"
+                  ? "Next.js (Pages)"
+                  : tab === "vite"
+                  ? "Vite"
+                  : tab === "remix"
+                  ? "Remix"
+                  : ""}
               </button>
             ))}
           </div>
 
           <div className="grid grid-rows-[auto_1fr_auto] bg-[#1e1e1e]">
             <div className="flex items-center gap-2 shadow-xl px-3 py-1.5">
               <span className="text-xs text-neutral-300/50">
-                {activeTab === 'script' ? 'index.html' :
-                  activeTab === 'nextjs-app' ? 'app/layout.tsx' :
-                    activeTab === 'nextjs-pages' ? 'pages/_document.tsx' :
-                      activeTab === 'vite' ? 'index.html' :
-                        activeTab === 'remix' ? 'app/root.tsx' :
-                          ''}
+                {activeTab === "script"
+                  ? "index.html"
+                  : activeTab === "nextjs-app"
+                  ? "app/layout.tsx"
+                  : activeTab === "nextjs-pages"
+                  ? "pages/_document.tsx"
+                  : activeTab === "vite"
+                  ? "index.html"
+                  : activeTab === "remix"
+                  ? "app/root.tsx"
+                  : ""}
               </span>
             </div>
 
             <div
               className="overflow-hidden transition-[height] duration-150 ease-in-out"
               style={{ height }}
             >
-              <div
-                className="transform transition-all duration-500"
-              >
+              <div className="transform transition-all duration-500">
                 <pre
                   ref={contentRef}
                   className="text-neutral-300 group relative whitespace-pre font-mono text-xs py-4 px-3"
@@ -224,10 +241,12 @@ export default function App() {
                     className="language-javascript relative flex"
                     dangerouslySetInnerHTML={{
                       __html: `
-                        <div class="select-none min-w-8 max-w-8 pr-2.5 inline-block text-right text-[#858585] opacity-50">${highlightedCode.split('\n').map((_, i) => i + 1).join('\n')
-                        }</div>
+                        <div class="select-none min-w-8 max-w-8 pr-2.5 inline-block text-right text-[#858585] opacity-50">${highlightedCode
+                          .split("\n")
+                          .map((_, i) => i + 1)
+                          .join("\n")}</div>
                         <div class="flex-1">${highlightedCode}</div>
-                      `
+                      `,
                     }}
                   />
                   <button

diff --git a/packages/website/utils/clipboard.ts b/packages/website/utils/clipboard.ts
@@ -0,0 +1,21 @@
+/**
+ * Copies text to clipboard with fallback for HTTP / IP LAN environments
+ * where navigator.clipboard is not available.
+ */
+export function copyText(text: string): Promise<void> | void {
+  if (navigator.clipboard?.writeText && window.isSecureContext) {
+    return navigator.clipboard.writeText(text);
+  }
+
+  // Fallback for HTTP / IP LAN
+  const ta = document.createElement("textarea");
+  ta.value = text;
+  ta.style.position = "fixed";
+  ta.style.left = "-9999px";
+  document.body.appendChild(ta);
+  ta.focus();
+  ta.select();
+
+  document.execCommand("copy");
+  document.body.removeChild(ta);
+}