/** @jsxImportSource https://esm.sh/react */ import React, { useCallback, useEffect, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function ExcalidrawCanvas({ name, url, onRemove, onRename, onUrlChange }) { return (

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

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

{title}

{url}

); } function Console({ canvases }) { return (

Configuration Console

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

); } function App() { const [canvases, setCanvases] = useState([ { "id": 1, "name": "excali-", "url": "https://pomdtr-excalidraw.web.val.run", }, { "id": 2, "name": "val-", "url": "https://pomdtr-excalidraw.web.val.run", }, { "id": 3, "name": "town-", "url": "https://pomdtr-excalidraw.web.val.run", }, { "id": 4, "name": "go!", "url": "https://pomdtr-excalidraw.web.val.run", }, ]); const [activeCanvas, setActiveCanvas] = useState(canvases[0].id); const addCanvas = useCallback(() => { const newId = Math.max(0, ...canvases.map(c => c.id)) + 1; setCanvases(prev => [...prev, { id: newId, name: `Canvas ${newId}`, url: "https://pomdtr-excalidraw.web.val.run", }]); setActiveCanvas(newId); }, [canvases]); const removeCanvas = useCallback((id) => { setCanvases(prev => prev.filter(canvas => canvas.id !== id)); if (activeCanvas === id) { setActiveCanvas(canvases[0]?.id || null); } }, [activeCanvas, canvases]); const renameCanvas = useCallback((id, newName) => { setCanvases(prev => prev.map(canvas => canvas.id === id ? { ...canvas, name: newName } : canvas)); }, []); const changeCanvasUrl = useCallback((id, newUrl) => { setCanvases(prev => prev.map(canvas => canvas.id === id ? { ...canvas, url: newUrl } : canvas)); }, []); return (

Multiple Excalidraw Canvases

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

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

Canvas Cards

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

View source on Val Town

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

`, { headers: { "content-type": "text/html", }, }, ); } const css = ` body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; margin: 0; padding: 0; background-color: #f4f4f4; } .container { max-width: 1200px; margin: 0 auto; padding: 20px; } h1, h2, h3 { color: #2c3e50; } .canvas-list { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; } .canvas-button, .add-button { padding: 5px 10px; background-color: #3498db; color: white; border: none; border-radius: 4px; cursor: pointer; } .canvas-button:hover, .add-button:hover { background-color: #2980b9; } .canvas-button.active { background-color: #2c3e50; } .excalidraw-canvas { border: 1px solid #ddd; border-radius: 4px; overflow: hidden; margin-bottom: 20px; } .canvas-header { display: flex; justify-content: space-between; align-items: center; padding: 10px; background-color: #f8f8f8; border-bottom: 1px solid #ddd; } .canvas-name, .canvas-url { font-size: 1em; padding: 5px; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 5px; width: 100%; } .card-url { font-size: 0.8em; color: #666; word-break: break-all; } .remove-button { padding: 5px 10px; background-color: #e74c3c; color: white; border: none; border-radius: 4px; cursor: pointer; } .remove-button:hover { background-color: #c0392b; } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; margin-top: 20px; } .card { background-color: white; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); padding: 20px; transition: transform 0.3s ease; } .card:hover { transform: translateY(-5px); } .card h3 { margin-top: 0; color: #2c3e50; margin-bottom: 5px; } .card-svg { width: 100%; height: 200px; overflow: hidden; margin-top: 10px; } .card-svg svg { width: 100%; height: 100%; object-fit: contain; } .console { background-color: #f0f0f0; border: 1px solid #d0d0d0; border-radius: 4px; padding: 15px; margin-top: 30px; overflow-x: auto; color: #555; } .console h3 { margin-top: 0; margin-bottom: 10px; color: #444; } .console pre { margin: 0; white-space: pre-wrap; word-wrap: break-word; font-size: 0.9em; } .footer { margin-top: 20px; font-size: 0.9em; color: #666; } a { color: #3498db; text-decoration: none; } a:hover { text-decoration: underline; } `;

excaliEmbed