\n \n\n\n",[129],"51eeafe8-0e2b-4d97-90f7-ce9713216996","client.tsx","707cb386-6981-11f1-93cb-1607ee4eb77e",["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();",[136],"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",[144],"pulls","branches","forks","envVars",{"_157":132,"_159":132},"connections",{"_157":132,"_158":132},"count","unfilledCount","emptyCount",{"_18":143,"_20":144,"_113":145,"_114":-5,"_115":68,"_116":146,"_118":38,"_22":174,"_65":132,"_121":96,"_123":148,"_125":26,"_126":-5,"_165":175,"_85":176},{"_18":135,"_20":136,"_113":137,"_114":-5,"_115":68,"_116":66,"_118":38,"_22":171,"_65":139,"_121":140,"_123":141,"_125":26,"_126":-5,"_165":172,"_85":173},{"_18":128,"_20":129,"_113":130,"_114":-5,"_115":68,"_116":120,"_118":38,"_22":168,"_65":132,"_121":96,"_123":133,"_125":26,"_126":-5,"_165":169,"_85":170},{"_18":111,"_20":112,"_113":36,"_114":-5,"_115":68,"_116":117,"_118":38,"_22":164,"_65":120,"_121":122,"_123":124,"_125":26,"_126":-5,"_165":166,"_85":167},["D",1781642628364],"children",[],[112],["D",1781613970695],[],[129],["D",1781647687210],[],[136],["D",1781614080900],[],[144],["D",1781613965341],{"_16":17,"_83":79},{"_16":17,"_77":-5,"_78":79,"_33":34,"_80":81,"_82":26},{"_65":66,"_20":67,"_18":68,"_69":19,"_70":-5,"_71":-5,"_72":-5,"_73":-5,"_74":-5,"_75":21,"_76":17},"ctx",{"_58":-5,"_104":214,"_215":216,"_217":218,"_219":26,"_220":26,"_221":26,"_222":38,"_223":-5,"_224":-7,"_225":-7,"_226":132,"_227":26,"_228":26,"_229":-5,"_230":26,"_231":26,"_232":26,"_233":-5},"ENV",{"_185":186,"_187":188,"_189":67,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211,"_212":213},"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"]

Search