[{"_1":2,"_183":-5,"_184":-5},"loaderData",{"_3":4,"_91":92,"_170":171,"_182":-5},"root",{"_5":6,"_32":33,"_58":59,"_89":90},"ctx",{"_7":8,"_18":19,"_20":-5,"_21":22,"_23":24,"_25":26,"_27":26,"_28":29,"_30":31},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5},"sessionClaims","sessionId","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","environmentVariableKeys",[],"user","preferences_keybindings","default","preferences_theme","light","preferences_fixers",false,"preferences_copilot","preferences_model","claude-3-5-haiku-20241022","notification_count",0,"ENV",{"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","fa80b67e1f763bfb4b247c3f5ca4f0b0730f3f5c","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","API_URL","https://api.val.town","WORKER_FINGERPRINT","799d99f2805306c2714a7cfefbeae178","clerkState",{"_60":61},"__internal_clerk_state",{"_62":63,"_64":43,"_65":66,"_67":66,"_68":26,"_69":66,"_70":66,"_71":66,"_72":66,"_73":66,"_74":66,"_75":66,"_76":66,"_77":78,"_87":26,"_88":26},"__clerk_ssr_state",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__signInForceRedirectUrl","__signUpForceRedirectUrl","__signInFallbackRedirectUrl","__signUpFallbackRedirectUrl","__clerk_debug",{"_79":26,"_80":66,"_81":82,"_83":66,"_84":43,"_85":26,"_86":66},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","remixVersion",2,"routes/_app.v.$handle.$name",{"_93":94,"_95":96,"_94":97,"_156":-5,"_157":-5,"_158":159,"_130":131,"_143":144,"_100":101,"_98":99,"_119":-7,"_50":51,"_169":26},"type","val","author","ade6ff6e-2082-407d-ac14-f95835477319",{"_98":99,"_95":96,"_100":101,"_102":103,"_104":-5,"_105":106,"_107":108,"_109":110,"_111":112,"_113":26,"_114":112,"_115":116,"_117":118,"_119":90,"_120":26,"_121":122,"_123":31,"_124":31,"_125":31,"_126":122,"_127":31,"_128":-5,"_20":129,"_134":135,"_140":-7,"_141":142,"_143":144,"_145":146},"name","excaliMe2","valNameId","34de9b80-7c9f-11ef-98bd-de64eea55b61","parentFolderId","70d4213a-6761-11ef-8eb9-de64eea55b61","isOwned","privacy","unlisted","readme"," \"viewBackgroundColor\": \"#ffffff\"\n \"viewBackgroundColor\": \"#tan\"\n","valType","http","currentVersion","5ad1d3c6-7e97-11ef-847c-de64eea55b61","legacyPrivate","id","code","/** @jsxImportSource https://esm.sh/react */\nimport React, { useCallback, useEffect, useState } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\n\nfunction ExcalidrawCanvas({ name, url, onRemove, onRename, onUrlChange, onJsonChange }) {\n const [json, setJson] = useState(\"\");\n\n useEffect(() => {\n const fetchJson = async () => {\n try {\n const response = await fetch(`${url}/json`);\n const jsonData = await response.json();\n setJson(JSON.stringify(jsonData, null, 2));\n } catch (error) {\n console.error(\"Error fetching JSON:\", error);\n }\n };\n\n fetchJson();\n }, [url]);\n\n return (\n

\n onRename(e.target.value)}\n className=\"canvas-name\"\n />\n onUrlChange(e.target.value)}\n className=\"canvas-url\"\n />\n

\n \n

\n \n \n

\n );\n}\n\nfunction Card({ title, url, svgUrl }) {\n const [svg, setSvg] = useState(\"\");\n\n useEffect(() => {\n const fetchSvg = async () => {\n try {\n const response = await fetch(svgUrl);\n const svgContent = await response.text();\n setSvg(svgContent);\n } catch (error) {\n console.error(\"Error fetching SVG:\", error);\n }\n };\n\n fetchSvg();\n }, [svgUrl]);\n\n return (\n

{title}

{url}

\n );\n}\n\nfunction Console({ canvases }) {\n return (\n

Configuration Console

{JSON.stringify(canvases, null, 2)}

\n );\n}\n\nfunction SideNav({ activeCanvas, canvases, onJsonChange }) {\n const [json, setJson] = useState(\"\");\n\n useEffect(() => {\n const canvas = canvases.find(c => c.id === activeCanvas);\n if (canvas) {\n const fetchJson = async () => {\n try {\n const response = await fetch(`${canvas.url}/json`);\n const jsonData = await response.json();\n setJson(JSON.stringify(jsonData, null, 2));\n } catch (error) {\n console.error(\"Error fetching JSON:\", error);\n }\n };\n fetchJson();\n }\n }, [activeCanvas, canvases]);\n\n const handleJsonChange = (e) => {\n setJson(e.target.value);\n onJsonChange(activeCanvas, e.target.value);\n };\n\n return (\n

Excalidraw JSON

\n \n

\n );\n}\n\nfunction App() {\n const [canvases, setCanvases] = useState([\n {\n \"id\": 1,\n \"name\": \"excali-\",\n \"url\": \"https://pomdtr-excalidraw.web.val.run\",\n },\n {\n \"id\": 2,\n \"name\": \"val-\",\n \"url\": \"https://pomdtr-excalidraw.web.val.run\",\n },\n {\n \"id\": 3,\n \"name\": \"town-\",\n \"url\": \"https://pomdtr-excalidraw.web.val.run\",\n },\n {\n \"id\": 4,\n \"name\": \"go!\",\n \"url\": \"https://all-religiousivoryworm.web.val.run\",\n },\n ]);\n const [activeCanvas, setActiveCanvas] = useState(canvases[0].id);\n\n const addCanvas = useCallback(() => {\n const newId = Math.max(0, ...canvases.map(c => c.id)) + 1;\n setCanvases(prev => [...prev, {\n id: newId,\n name: `Canvas ${newId}`,\n url: \"https://pomdtr-excalidraw.web.val.run\",\n }]);\n setActiveCanvas(newId);\n }, [canvases]);\n\n const removeCanvas = useCallback((id) => {\n setCanvases(prev => prev.filter(canvas => canvas.id !== id));\n if (activeCanvas === id) {\n setActiveCanvas(canvases[0]?.id || null);\n }\n }, [activeCanvas, canvases]);\n\n const renameCanvas = useCallback((id, newName) => {\n setCanvases(prev => prev.map(canvas => canvas.id === id ? { ...canvas, name: newName } : canvas));\n }, []);\n\n const changeCanvasUrl = useCallback((id, newUrl) => {\n setCanvases(prev => prev.map(canvas => canvas.id === id ? { ...canvas, url: newUrl } : canvas));\n }, []);\n\n const handleJsonChange = useCallback((id, newJson) => {\n // Here you would typically send the updated JSON to the server\n console.log(`Updated JSON for canvas ${id}:`, newJson);\n }, []);\n\n return (\n

Multiple Excalidraw Canvases

\n {canvases.map(canvas => (\n setActiveCanvas(canvas.id)}\n className={`canvas-button ${activeCanvas === canvas.id ? \"active\" : \"\"}`}\n >\n {canvas.name}\n \n ))}\n \n

\n {canvases.map(canvas => (\n canvas.id === activeCanvas && (\n removeCanvas(canvas.id)}\n onRename={(newName) => renameCanvas(canvas.id, newName)}\n onUrlChange={(newUrl) => changeCanvasUrl(canvas.id, newUrl)}\n onJsonChange={(newJson) => handleJsonChange(canvas.id, newJson)}\n />\n )\n ))}\n

\n \n

Canvas Cards

\n {canvases.map((canvas) => (\n \n ))}\n

\n \n

\n View source on Val Town\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n \n \n \n Multiple Excalidraw Canvases\n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}\n\nconst css = `\n body {\n font-family: Arial, sans-serif;\n line-height: 1.6;\n color: #333;\n margin: 0;\n padding: 0;\n background-color: #f4f4f4;\n }\n .container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 20px;\n }\n h1, h2, h3 {\n color: #2c3e50;\n }\n .main-content {\n display: flex;\n gap: 20px;\n }\n .canvas-container {\n flex: 1;\n }\n .canvas-list {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n margin-bottom: 20px;\n }\n .canvas-button, .add-button {\n padding: 5px 10px;\n background-color: #3498db;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n }\n .canvas-button:hover, .add-button:hover {\n background-color: #2980b9;\n }\n .canvas-button.active {\n background-color: #2c3e50;\n }\n .excalidraw-canvas {\n border: 1px solid #ddd;\n border-radius: 4px;\n overflow: hidden;\n margin-bottom: 20px;\n }\n .canvas-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px;\n background-color: #f8f8f8;\n border-bottom: 1px solid #ddd;\n }\n .canvas-name, .canvas-url {\n font-size: 1em;\n padding: 5px;\n border: 1px solid #ddd;\n border-radius: 4px;\n margin-bottom: 5px;\n width: 100%;\n }\n .card-url {\n font-size: 0.8em;\n color: #666;\n word-break: break-all;\n }\n .remove-button {\n padding: 5px 10px;\n background-color: #e74c3c;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n }\n .remove-button:hover {\n background-color: #c0392b;\n }\n .card-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n gap: 20px;\n margin-top: 20px;\n }\n .card {\n background-color: white;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n padding: 20px;\n transition: transform 0.3s ease;\n }\n .card:hover {\n transform: translateY(-5px);\n }\n .card h3 {\n margin-top: 0;\n color: #2c3e50;\n margin-bottom: 5px;\n }\n .card-svg {\n width: 100%;\n height: 200px;\n overflow: hidden;\n margin-top: 10px;\n }\n .card-svg svg {\n width: 100%;\n height: 100%;\n object-fit: contain;\n }\n .console {\n background-color: #f0f0f0;\n border: 1px solid #d0d0d0;\n border-radius: 4px;\n padding: 15px;\n margin-top: 30px;\n overflow-x: auto;\n color: #555;\n }\n .console h3 {\n margin-top: 0;\n margin-bottom: 10px;\n color: #444;\n }\n .console pre {\n margin: 0;\n white-space: pre-wrap;\n word-wrap: break-word;\n font-size: 0.9em;\n }\n .footer {\n margin-top: 20px;\n font-size: 0.9em;\n color: #666;\n }\n a {\n color: #3498db;\n text-decoration: none;\n }\n a:hover {\n text-decoration: underline;\n }\n .side-nav {\n width: 300px;\n background-color: #f8f8f8;\n padding: 20px;\n border-radius: 4px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n }\n .json-editor {\n width: 100%;\n height: 500px;\n font-family: monospace;\n font-size: 14px;\n padding: 10px;\n border: 1px solid #ddd;\n border-radius: 4px;\n resize: vertical;\n }\n`;","createdAt",["D",1727637400060],"version","currentUserHasLiked","likeCount",1,"forkCount","referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_130":131,"_132":133},"handle","all","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJvbE1ScGJrMUNLT2dTVzRrVFVid0U5UUpTeCJ9","forkedVal",{"_114":136,"_130":131,"_98":137,"_119":138,"_139":-5},"79391b34-7bdc-11ef-ba09-de64eea55b61","excaliGrid",16,"prDisabledHint","interval","slug","all/excaliMe2","description","\"viewBackgroundColor\": \"#ffffff\"\n\"viewBackgroundColor\": \"#tan\"","versions",[147,150,153],{"_119":90,"_148":-5,"_117":149,"_114":112},"prId",["D",1727637400060],{"_119":122,"_148":-5,"_117":151,"_114":152},["D",1727420922354],"540d221a-7c9f-11ef-b65f-de64eea55b61",{"_119":31,"_148":-5,"_117":154,"_114":155},["D",1727420870058],"34e15b86-7c9f-11ef-98bd-de64eea55b61","recentThread","breadcrumbs","comments",[160],{"_114":161,"_162":163,"_117":164,"_165":-5,"_166":26,"_167":26,"_20":168},"ff86766c-7e95-11ef-beeb-de64eea55b61","body","would be cool to update drawing from json\n",["D",1727636817399],"updatedAt","canDelete","canEdit",{"_130":131,"_132":133},"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_93":172,"_173":174,"_94":175},"single","redirect","/v/all/excaliMe2/versions",{"_114":152,"_115":176,"_119":122,"_117":177,"_178":99,"_100":101,"_109":110,"_130":131,"_11":96,"_179":-5,"_180":-5,"_181":-5,"_169":26,"_141":142},"/** @jsxImportSource https://esm.sh/react */\nimport React, { useCallback, useEffect, useState } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\n\nfunction ExcalidrawCanvas({ name, url, onRemove, onRename, onUrlChange, onJsonChange }) {\n const [json, setJson] = useState('');\n\n useEffect(() => {\n const fetchJson = async () => {\n try {\n const response = await fetch(`${url}/json`);\n const jsonData = await response.json();\n setJson(JSON.stringify(jsonData, null, 2));\n } catch (error) {\n console.error(\"Error fetching JSON:\", error);\n }\n };\n\n fetchJson();\n }, [url]);\n\n return (\n

\n onRename(e.target.value)}\n className=\"canvas-name\"\n />\n onUrlChange(e.target.value)}\n className=\"canvas-url\"\n />\n

\n \n

\n \n \n

{title}

{url}

\n );\n}\n\nfunction Console({ canvases }) {\n return (\n

Configuration Console

{JSON.stringify(canvases, null, 2)}

\n );\n}\n\nfunction SideNav({ activeCanvas, canvases, onJsonChange }) {\n const [json, setJson] = useState('');\n\n useEffect(() => {\n const canvas = canvases.find(c => c.id === activeCanvas);\n if (canvas) {\n const fetchJson = async () => {\n try {\n const response = await fetch(`${canvas.url}/json`);\n const jsonData = await response.json();\n setJson(JSON.stringify(jsonData, null, 2));\n } catch (error) {\n console.error(\"Error fetching JSON:\", error);\n }\n };\n fetchJson();\n }\n }, [activeCanvas, canvases]);\n\n const handleJsonChange = (e) => {\n setJson(e.target.value);\n onJsonChange(activeCanvas, e.target.value);\n };\n\n return (\n

Excalidraw JSON

\n \n

\n );\n}\n\nfunction App() {\n const [canvases, setCanvases] = useState([\n {\n \"id\": 1,\n \"name\": \"excali-\",\n \"url\": \"https://pomdtr-excalidraw.web.val.run\",\n },\n {\n \"id\": 2,\n \"name\": \"val-\",\n \"url\": \"https://pomdtr-excalidraw.web.val.run\",\n },\n {\n \"id\": 3,\n \"name\": \"town-\",\n \"url\": \"https://pomdtr-excalidraw.web.val.run\",\n },\n {\n \"id\": 4,\n \"name\": \"go!\",\n \"url\": \"https://pomdtr-excalidraw.web.val.run\",\n },\n ]);\n const [activeCanvas, setActiveCanvas] = useState(canvases[0].id);\n\n const addCanvas = useCallback(() => {\n const newId = Math.max(0, ...canvases.map(c => c.id)) + 1;\n setCanvases(prev => [...prev, {\n id: newId,\n name: `Canvas ${newId}`,\n url: \"https://pomdtr-excalidraw.web.val.run\",\n }]);\n setActiveCanvas(newId);\n }, [canvases]);\n\n const removeCanvas = useCallback((id) => {\n setCanvases(prev => prev.filter(canvas => canvas.id !== id));\n if (activeCanvas === id) {\n setActiveCanvas(canvases[0]?.id || null);\n }\n }, [activeCanvas, canvases]);\n\n const renameCanvas = useCallback((id, newName) => {\n setCanvases(prev => prev.map(canvas => canvas.id === id ? { ...canvas, name: newName } : canvas));\n }, []);\n\n const changeCanvasUrl = useCallback((id, newUrl) => {\n setCanvases(prev => prev.map(canvas => canvas.id === id ? { ...canvas, url: newUrl } : canvas));\n }, []);\n\n const handleJsonChange = useCallback((id, newJson) => {\n // Here you would typically send the updated JSON to the server\n console.log(`Updated JSON for canvas ${id}:`, newJson);\n }, []);\n\n return (\n

Multiple Excalidraw Canvases

\n {canvases.map(canvas => (\n setActiveCanvas(canvas.id)}\n className={`canvas-button ${activeCanvas === canvas.id ? \"active\" : \"\"}`}\n >\n {canvas.name}\n \n ))}\n \n

\n \n

Canvas Cards

\n {canvases.map((canvas) => (\n \n ))}\n

\n \n

\n View source on Val Town\n

excaliMe2

Version 1