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();","createdAt",["D",1781647130726],"branchVersion","branchId","e77da79c-d75e-4692-8037-caaae8301891","id","b14f01ef-1681-4a41-ad87-715a397105c7","automerge-editor",["D",1781613965341],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Connect to an Automerge sync server and edit a document","imageUrl","ec5501b0-5038-11f0-af69-ad2d81fb9912","pinnedFileId","56d55474-6981-11f1-8744-1607ee4eb77e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",1,"orgId","efd874d8-1bfb-4a66-b1f4-d288244cf62e","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_96":95,"_103":99},"org",{"_96":95,"_97":-5,"_98":99,"_18":54,"_100":101,"_102":25},"branch",{"_13":85,"_32":86,"_42":41,"_87":43,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":44,"_94":95},"isOwned",28,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","reesericci","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yeXVabWlmUlh5dExGbHU4UndqT2RGRWxaREUifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_32":44,"_37":186,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":187,"_80":188,"_82":189,"_84":25},"tree",[169,170,171,172],"files",[169,170,171,172],"counts",{"_159":145,"_160":62,"_161":145,"_162":163,"_164":165},"contents",[126,127,128,129],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_42":152,"_32":153,"_30":154,"_132":-5,"_40":41,"_39":155,"_134":58,"_37":156,"_13":145,"_33":20,"_35":157,"_24":25,"_139":-5,"_27":158},{"_42":148,"_32":28,"_30":31,"_132":-5,"_40":41,"_39":14,"_134":25,"_37":149,"_13":150,"_33":34,"_35":36,"_24":25,"_139":-5,"_27":151},{"_42":141,"_32":142,"_30":143,"_132":-5,"_40":41,"_39":136,"_134":58,"_37":144,"_13":145,"_33":20,"_35":146,"_24":25,"_139":-5,"_27":147},{"_42":130,"_32":131,"_30":56,"_132":-5,"_40":41,"_39":133,"_134":58,"_37":135,"_13":136,"_33":137,"_35":138,"_24":25,"_139":-5,"_27":140},"bcf44154-d6de-43f2-8c8a-6c0e21e730db","server.ts","parentId",9,"latest",["D",1781642628364],2,"http","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}","label",[131],"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",[142],"e946d24b-e12a-43df-9401-27c5382ff7ea",["D",1781647130726],18,[28],"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",[153],"pulls","branches","forks","envVars",{"_166":145,"_168":145},"connections",{"_166":145,"_167":145},"count","unfilledCount","emptyCount",{"_42":152,"_32":153,"_30":154,"_132":-5,"_40":41,"_39":155,"_134":58,"_37":183,"_13":145,"_33":20,"_35":157,"_24":25,"_139":-5,"_174":184,"_27":185},{"_42":148,"_32":28,"_30":31,"_132":-5,"_40":41,"_39":14,"_134":25,"_37":180,"_13":150,"_33":34,"_35":36,"_24":25,"_139":-5,"_174":181,"_27":182},{"_42":141,"_32":142,"_30":143,"_132":-5,"_40":41,"_39":136,"_134":58,"_37":177,"_13":145,"_33":20,"_35":146,"_24":25,"_139":-5,"_174":178,"_27":179},{"_42":130,"_32":131,"_30":56,"_132":-5,"_40":41,"_39":133,"_134":58,"_37":173,"_13":136,"_33":137,"_35":138,"_24":25,"_139":-5,"_174":175,"_27":176},["D",1781642628364],"children",[],[131],["D",1781613970695],[],[142],["D",1781647130726],[],[28],["D",1781614080900],[],[153],["D",1781613965341],{"_96":95,"_103":99},{"_96":95,"_97":-5,"_98":99,"_18":54,"_100":101,"_102":25},{"_13":85,"_32":86,"_42":41,"_87":43,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":44,"_94":95},"ctx",{"_78":-5,"_123":223,"_224":225,"_226":227,"_228":25,"_229":25,"_230":25,"_231":58,"_232":-5,"_233":-7,"_234":-7,"_235":145,"_236":25,"_237":25,"_238":-5,"_239":25,"_240":25,"_241":25,"_242":-5},"ENV",{"_194":195,"_196":197,"_198":86,"_199":200,"_201":202,"_203":204,"_205":206,"_207":208,"_209":210,"_211":212,"_213":214,"_215":216,"_217":218,"_219":220,"_221":222},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","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"]

Diff · v24