[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_205":206,"_207":208},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_154":-5,"_20":155,"_22":156,"_157":158,"_159":160,"_25":161,"_24":-5,"_162":-5,"_163":-5,"_164":56,"_165":166,"_167":47,"_168":-5,"_169":-5,"_170":171},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","reesericci","name","automerge-editor","branchName","main","version","path","","project",{"_36":99,"_13":14,"_48":100,"_101":-5,"_102":56,"_103":104,"_105":104,"_106":107,"_108":-5,"_109":110,"_111":40,"_112":47,"_113":-5,"_114":-5,"_115":116,"_117":118,"_119":-5,"_120":-5,"_121":-5,"_122":-5,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":124,"_132":133,"_134":135,"_136":137,"_138":56},"tree",[82,83,84,85],"file","contents",[32,33,34,35],"upstream","pull","ahead","behind","envVars",{"_36":75,"_13":76,"_39":77,"_41":-5,"_42":43,"_44":78,"_46":47,"_48":79,"_17":63,"_51":24,"_53":80,"_55":56,"_57":-5,"_18":81},{"_36":66,"_13":67,"_39":68,"_41":-5,"_42":43,"_44":69,"_46":47,"_48":70,"_17":71,"_51":72,"_53":73,"_55":56,"_57":-5,"_18":74},{"_36":59,"_13":60,"_39":61,"_41":-5,"_42":43,"_44":50,"_46":47,"_48":62,"_17":63,"_51":24,"_53":64,"_55":56,"_57":-5,"_18":65},{"_36":37,"_13":38,"_39":40,"_41":-5,"_42":43,"_44":45,"_46":47,"_48":49,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_18":58},"id","bcf44154-d6de-43f2-8c8a-6c0e21e730db","server.ts","fileId","56d55474-6981-11f1-8744-1607ee4eb77e","parentId","branchId","e77da79c-d75e-4692-8037-caaae8301891","branchVersion",9,"latest",true,"createdAt",["D",1781642628364],2,"fileType","http","content","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport default async function (req: Request): Promise {\n const url = new URL(req.url);\n console.log(\"hi\");\n\n // Redirect to source for \"view source\" link\n if (url.pathname === \"/source\") {\n return new Response(null, {\n status: 302,\n headers: { Location: parseVal().links.self.val },\n });\n }\n\n // Serve the browser entry point, transpiled from TSX to JS\n if (url.pathname === \"/client.js\") {\n return serveFile(\"./client.tsx\", import.meta.url);\n }\n\n // Everything else serves the HTML shell (SPA)\n return serveFile(\"./index.html\", import.meta.url);\n}","deleted",false,"label",[38],"01620afc-2bba-4ed4-b084-1f2febc253fd","index.html","5a02ca46-6981-11f1-9416-1607ee4eb77e",["D",1781613970695],0,"\n\n\n \n \n Automerge Editor\n \n \n\n\n

\n \n\n\n",[60],"51eeafe8-0e2b-4d97-90f7-ce9713216996","client.tsx","707cb386-6981-11f1-93cb-1607ee4eb77e",28,["D",1781647687210],22,"script","/** @jsxImportSource https://esm.sh/react@18.2.0 */\n/// \nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0\";\nimport * as AutomergeRepo from \"https://esm.sh/@automerge/automerge-repo@2.5.6/X-YUBhdXRvbWVyZ2UvYXV0b21lcmdlL3NsaW06QGF1dG9tZXJnZS9hdXRvbWVyZ2VAMy4yLjYvc2xpbQ/es2022/slim.bundle.mjs\";\nimport { automergeWasmBase64 } from \"https://esm.sh/@automerge/automerge@3.2.6/es2022/dist/mjs/wasm_bindgen_output/web/automerge_wasm_bg_base64.mjs\";\nimport * as AutomergeWebSocket from \"https://esm.sh/@automerge/automerge-repo-network-websocket@2.5.6/X-YUBhdXRvbWVyZ2UvYXV0b21lcmdlLXJlcG8vc2xpbTpAYXV0b21lcmdlL2F1dG9tZXJnZS1yZXBvQDIuNS42L3NsaW0sQGF1dG9tZXJnZS9hdXRvbWVyZ2Uvc2xpbTpAYXV0b21lcmdlL2F1dG9tZXJnZUAzLjIuNi9zbGlt/es2022/automerge-repo-network-websocket.bundle.mjs\";\n\nconst { initializeBase64Wasm, isValidAutomergeUrl, Repo } = AutomergeRepo;\nconst { WebSocketClientAdapter } = AutomergeWebSocket;\n\ntype Status = \"idle\" | \"connecting\" | \"ready\" | \"error\";\ntype JsonDoc = Record;\n\nconst LS_KEY = \"automerge-editor:last\";\n\nlet wasmReady: Promise | null = null;\nfunction ensureWasm(): Promise {\n if (!wasmReady) {\n wasmReady = initializeBase64Wasm(automergeWasmBase64).then(() => {});\n }\n return wasmReady;\n}\n\nfunction App() {\n const [serverUrl, setServerUrl] = useState(\"wss://sync.automerge.org\");\n const [docUrl, setDocUrl] = useState(\"\");\n const [status, setStatus] = useState(\"idle\");\n const [error, setError] = useState(null);\n const [text, setText] = useState(\"\");\n const [dirty, setDirty] = useState(false);\n const [activeDocUrl, setActiveDocUrl] = useState(null);\n\n const repoRef = useRef(null);\n const handleRef = useRef(null);\n const detachRef = useRef<(() => void) | null>(null);\n\n useEffect(() => {\n try {\n const saved = JSON.parse(localStorage.getItem(LS_KEY) || \"{}\");\n if (saved.serverUrl) setServerUrl(saved.serverUrl);\n if (saved.docUrl) setDocUrl(saved.docUrl);\n } catch {\n // Ignore corrupt local state.\n }\n }, []);\n\n useEffect(() => {\n return () => detachRef.current?.();\n }, []);\n\n function buildRepo() {\n if (repoRef.current) return repoRef.current;\n\n const repo = new Repo({\n network: [new WebSocketClientAdapter(serverUrl)] as any,\n } as any);\n\n repoRef.current = repo;\n return repo;\n }\n\n function attach(handle: any) {\n detachRef.current?.();\n handleRef.current = handle;\n\n let disposed = false;\n\n const render = (doc = handle.doc()) => {\n if (disposed) return;\n setText(JSON.stringify(doc ?? {}, null, 2));\n setDirty(false);\n setActiveDocUrl(handle.url);\n setStatus(\"ready\");\n };\n\n const onChange = ({ doc }: { doc: JsonDoc }) => render(doc);\n handle.on(\"change\", onChange);\n\n detachRef.current = () => {\n disposed = true;\n handle.off(\"change\", onChange);\n };\n\n handle.whenReady().then(() => render()).catch((e: unknown) => {\n if (disposed) return;\n setError(e instanceof Error ? e.message : String(e));\n setStatus(\"error\");\n });\n\n if (handle.isReady()) render();\n\n localStorage.setItem(\n LS_KEY,\n JSON.stringify({ serverUrl, docUrl: handle.url }),\n );\n }\n\n async function connect() {\n setError(null);\n setStatus(\"connecting\");\n\n try {\n await ensureWasm();\n const repo = buildRepo();\n const trimmed = docUrl.trim();\n\n if (!trimmed) {\n throw new Error(\"Enter a document URL, or click 'New document'.\");\n }\n\n if (!isValidAutomergeUrl(trimmed)) {\n throw new Error(\n \"That is not a valid Automerge URL (should start with 'automerge:').\",\n );\n }\n\n const handle = await (repo as any).find(trimmed);\n attach(handle);\n } catch (e: unknown) {\n setError(e instanceof Error ? e.message : String(e));\n setStatus(\"error\");\n }\n }\n\n async function createDoc() {\n setError(null);\n setStatus(\"connecting\");\n\n try {\n await ensureWasm();\n const repo = buildRepo();\n const handle = (repo as any).create({\n message: \"hello from val.town\",\n count: 0,\n });\n\n setDocUrl(handle.url);\n attach(handle);\n } catch (e: unknown) {\n setError(e instanceof Error ? e.message : String(e));\n setStatus(\"error\");\n }\n }\n\n function save() {\n setError(null);\n\n const handle = handleRef.current;\n if (!handle) return;\n\n let next: unknown;\n try {\n next = JSON.parse(text);\n } catch (e: unknown) {\n setError(\"Invalid JSON: \" + (e instanceof Error ? e.message : String(e)));\n return;\n }\n\n if (!next || typeof next !== \"object\" || Array.isArray(next)) {\n setError(\"Document contents must be a JSON object.\");\n return;\n }\n\n const nextDoc = next as JsonDoc;\n\n handle.change((doc: JsonDoc) => {\n for (const key of Object.keys(doc)) {\n if (!(key in nextDoc)) delete doc[key];\n }\n\n for (const [key, value] of Object.entries(nextDoc)) {\n doc[key] = value;\n }\n });\n\n setDirty(false);\n }\n\n const connected = status === \"ready\";\n\n return (\n

Automerge Editor

\n Connect to an Automerge sync server, then edit a document's contents\n live.\n

\n\n

\n \n Sync server (WebSocket URL)\n \n setServerUrl(e.currentTarget.value)}\n placeholder=\"wss://sync.automerge.org\"\n disabled={!!repoRef.current}\n />\n\n Document URL\n setDocUrl(e.currentTarget.value)}\n placeholder=\"automerge:...\"\n />\n\n

\n \n {status === \"connecting\" ? \"Connecting...\" : \"Open document\"}\n \n \n New document\n \n

\n\n \n {error &&

{error}

}\n

\n\n {connected && (\n

\n \n Document contents (JSON)\n \n {activeDocUrl && (\n \n {activeDocUrl}\n \n )}\n

\n {\n setText(e.currentTarget.value);\n setDirty(true);\n }}\n spellCheck={false}\n />\n

\n \n Save changes\n \n {dirty\n ? Unsaved edits\n : Synced}\n

\n Changes you save are merged into the document and pushed to the sync\n server. Edits from other clients appear here automatically.\n

\n )}\n\n \n

\n );\n}\n\nfunction StatusBadge({ status }: { status: Status }) {\n const map: Record = {\n idle: { label: \"Not connected\", cls: \"bg-gray-100 text-gray-600\" },\n connecting: { label: \"Connecting...\", cls: \"bg-amber-100 text-amber-700\" },\n ready: { label: \"Connected\", cls: \"bg-green-100 text-green-700\" },\n error: { label: \"Error\", cls: \"bg-red-100 text-red-700\" },\n };\n const { label, cls } = map[status];\n return (\n \n {label}\n \n );\n}\n\ncreateRoot(document.getElementById(\"root\")!).render();",[67],"4cb68a61-ba32-424b-b2c9-a16991582e72","README.md","9bb2ed90-6981-11f1-89d7-1607ee4eb77e",8,["D",1781614080900],"# Automerge Editor\n\nA tiny web app that connects to an [Automerge](https://automerge.org) sync server\nover WebSocket and lets you view and edit a document's contents as JSON.\n\n## How it works\n\nVal Town can't accept **incoming** WebSocket connections, and the Automerge sync\nprotocol runs over WebSocket. The trick: Val Town only serves a static client, and\nthe **browser** opens the WebSocket directly to your sync server. This sidesteps the\nplatform's WebSocket limitation entirely.\n\n```mermaid\nflowchart LR\n A[Browser
Automerge Repo] -- \"wss://\" --> B[Automerge
sync server]\n C[Val Town
server.ts] -- \"serves HTML + JS\" --> A\n```\n\n- `server.ts` — HTTP handler. Serves `index.html` and transpiles `client.tsx` → `/client.js`.\n- `index.html` — page shell (Twind for styling, mounts the React app).\n- `client.tsx` — the whole app: WASM init, repo connection, JSON editor.\n\n## Usage\n\n1. Open the app.\n2. Enter your sync server's WebSocket URL (defaults to the public\n `wss://sync.automerge.org`). Point it at your own server, e.g.\n `wss://your-server.example.com`.\n3. Either paste an existing document URL (`automerge:...`) and click **Open document**,\n or click **New document** to create one. Share the generated URL with another client\n to collaborate.\n4. Edit the JSON and click **Save changes** — edits merge into the document and sync to\n the server. Changes from other clients appear live.\n\n## Notes\n\n- Automerge's core is WebAssembly. Browsers can't import WASM as an ES module, so the\n app loads it manually via `initializeBase64Wasm` (the base64 blob variant) before\n touching the repo — no bundler required.\n- This editor treats documents as plain JSON objects. For text/rich-text CRDT features\n you'd use Automerge's text APIs instead.\n",[76],{"_36":75,"_13":76,"_39":77,"_41":-5,"_42":43,"_44":78,"_46":47,"_48":96,"_17":63,"_51":24,"_53":80,"_55":56,"_57":-5,"_87":97,"_18":98},{"_36":66,"_13":67,"_39":68,"_41":-5,"_42":43,"_44":69,"_46":47,"_48":93,"_17":71,"_51":72,"_53":73,"_55":56,"_57":-5,"_87":94,"_18":95},{"_36":59,"_13":60,"_39":61,"_41":-5,"_42":43,"_44":50,"_46":47,"_48":90,"_17":63,"_51":24,"_53":64,"_55":56,"_57":-5,"_87":91,"_18":92},{"_36":37,"_13":38,"_39":40,"_41":-5,"_42":43,"_44":45,"_46":47,"_48":86,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_87":88,"_18":89},["D",1781642628364],"children",[],[38],["D",1781613970695],[],[60],["D",1781647687210],[],[67],["D",1781614080900],[],[76],"b14f01ef-1681-4a41-ad87-715a397105c7",["D",1781613965341],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Connect to an Automerge sync server and edit a document","imageUrl","userId","ec5501b0-5038-11f0-af69-ad2d81fb9912","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",1,"orgId","efd874d8-1bfb-4a66-b1f4-d288244cf62e","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_153":149},"org",{"_11":12,"_147":-5,"_148":149,"_109":110,"_150":151,"_152":56},"branch",{"_17":69,"_13":16,"_36":43,"_139":99,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":14,"_146":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yeXVabWlmUlh5dExGbHU4UndqT2RGRWxaREUifQ","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":99,"_13":14,"_48":201,"_101":-5,"_102":56,"_103":104,"_105":104,"_106":107,"_108":-5,"_109":110,"_111":40,"_112":47,"_113":-5,"_114":-5,"_115":116,"_117":118,"_119":-5,"_120":-5,"_121":-5,"_122":-5,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":124,"_132":202,"_134":203,"_136":204,"_138":56},[189,190,191,192],"files",[189,190,191,192],"counts",{"_180":63,"_181":116,"_182":63,"_31":183,"_184":185},[172,173,174,175],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_36":75,"_13":76,"_39":77,"_41":-5,"_42":43,"_44":78,"_46":47,"_48":79,"_17":63,"_51":24,"_53":80,"_55":56,"_57":-5,"_18":179},{"_36":66,"_13":67,"_39":68,"_41":-5,"_42":43,"_44":69,"_46":47,"_48":70,"_17":71,"_51":72,"_53":73,"_55":56,"_57":-5,"_18":178},{"_36":59,"_13":60,"_39":61,"_41":-5,"_42":43,"_44":50,"_46":47,"_48":62,"_17":63,"_51":24,"_53":64,"_55":56,"_57":-5,"_18":177},{"_36":37,"_13":38,"_39":40,"_41":-5,"_42":43,"_44":45,"_46":47,"_48":49,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_18":176},[38],[60],[67],[76],"pulls","branches","forks",{"_186":63,"_188":63},"connections",{"_186":63,"_187":63},"count","unfilledCount","emptyCount",{"_36":75,"_13":76,"_39":77,"_41":-5,"_42":43,"_44":78,"_46":47,"_48":96,"_17":63,"_51":24,"_53":80,"_55":56,"_57":-5,"_87":199,"_18":200},{"_36":66,"_13":67,"_39":68,"_41":-5,"_42":43,"_44":69,"_46":47,"_48":93,"_17":71,"_51":72,"_53":73,"_55":56,"_57":-5,"_87":197,"_18":198},{"_36":59,"_13":60,"_39":61,"_41":-5,"_42":43,"_44":50,"_46":47,"_48":90,"_17":63,"_51":24,"_53":64,"_55":56,"_57":-5,"_87":195,"_18":196},{"_36":37,"_13":38,"_39":40,"_41":-5,"_42":43,"_44":45,"_46":47,"_48":86,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_87":193,"_18":194},[],[38],[],[60],[],[67],[],[76],["D",1781613965341],{"_11":12,"_153":149},{"_11":12,"_147":-5,"_148":149,"_109":110,"_150":151,"_152":56},{"_17":69,"_13":16,"_36":43,"_139":99,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":14,"_146":12},"ctx",{"_132":-5,"_169":238,"_239":240,"_241":242,"_243":56,"_244":56,"_245":56,"_246":47,"_247":-5,"_248":-7,"_249":-7,"_250":63,"_251":56,"_252":56,"_253":-5,"_254":56,"_255":56,"_256":56,"_257":-5},"ENV",{"_209":210,"_211":212,"_213":16,"_214":215,"_216":217,"_218":219,"_220":221,"_222":223,"_224":225,"_226":227,"_228":229,"_230":231,"_232":233,"_234":235,"_236":237},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","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","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Code