From 4e9391ca29da6c7c3137b0d99181d0e62f09f2ea Mon Sep 17 00:00:00 2001
From: taweechok <tplajai@gmail.com>
Date: Sat, 16 May 2026 22:52:38 +0700
Subject: [PATCH] fix: add Load Example button and fix example download link
 (#11)

- Add 'Load Example' button that fetches the example circuit JSON
  from the raw GitHub URL and loads it directly into the viewer
- Change footer link from GitHub blob URL to raw GitHub URL with
  download attribute so the file actually downloads
- Fixes https://github.com/tscircuit/circuitjson.com/issues/11

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 src/App.tsx | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index f0c27ea..2c0346e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -96,6 +96,19 @@ export const App = () => {
     [loadJsonString],
   )
 
+  const loadExample = useCallback(async () => {
+    try {
+      const response = await fetch(
+        "https://raw.githubusercontent.com/tscircuit/circuitjson.com/main/assets/usb-c-flashlight.json",
+      )
+      if (!response.ok) throw new Error(`HTTP ${response.status}`)
+      const text = await response.text()
+      loadJsonString(text)
+    } catch (err) {
+      setErrorMsg("Failed to load example file. Please try again.")
+    }
+  }, [loadJsonString])
+
   return (
     <div
       className="h-screen flex flex-col items-center justify-center bg-gray-900 text-white p-4"
@@ -121,6 +134,13 @@ export const App = () => {
                 Choose File
               </span>
             </label>
+            <button
+              onClick={loadExample}
+              className="mt-4 ml-3 bg-blue-700 px-4 py-2 rounded-md hover:bg-blue-600 focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-blue-400 transition-colors"
+              type="button"
+            >
+              Load Example
+            </button>
           </div>
 
           <div className="text-left bg-gray-800/80 p-6 rounded-lg border border-gray-700 shadow-xl">
@@ -215,9 +235,10 @@ export const App = () => {
         </div>
       )}
       <p className="text-gray-400 mt-4">
-        View{" "}
+        Download{" "}
         <a
-          href="https://github.com/tscircuit/circuitjson.com/blob/main/assets/usb-c-flashlight.json"
+          href="https://raw.githubusercontent.com/tscircuit/circuitjson.com/main/assets/usb-c-flashlight.json"
+          download="usb-c-flashlight.json"
           className="text-blue-400 hover:text-blue-300"
         >
           example circuit json file