TLDraw with Saving

/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import { Tldraw } from "https://esm.sh/@tldraw/tldraw@2.3.0"; function App() { const [savedDrawings, setSavedDrawings] = useState([]); useEffect(() => { fetchSavedDrawings(); }, []); const fetchSavedDrawings = async () => { const response = await fetch('/list-drawings'); const drawings = await response.json(); setSavedDrawings(drawings); }; const handleSave = async () => { const response = await fetch('/save-drawing', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ drawing: 'example_drawing_data' }), }); if (response.ok) { fetchSavedDrawings(); } }; return (

Saved Drawings:

{drawing}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export const server = (req) => handleRequest(req); async function handleRequest(req: Request): Promise { const { blob } = await import("https://esm.town/v/std/blob"); const url = new URL(req.url); if (url.pathname === '/save-drawing') { if (req.method === 'POST') { const { drawing } = await req.json(); const key = `drawing_${Date.now()}`; await blob.set(key, drawing); return new Response('Drawing saved successfully', { status: 200 }); } } else if (url.pathname === '/list-drawings') { const drawings = await blob.list('drawing_'); const drawingKeys = drawings.map(d => d.key); return new Response(JSON.stringify(drawingKeys), { headers: { 'Content-Type': 'application/json' } }); } return new Response( ` TLDraw with Saving

`, { headers: { "Content-Type": "text/html" } } ); }

server

Version 0