Skip to content

Instantly share code, notes, and snippets.

@pvh

pvh/index.html

Last active November 15, 2024 05:35
Show Gist options
  • Save pvh/75fbcf5a8968e4bf936c1b40de6243a0 to your computer and use it in GitHub Desktop.
Save pvh/75fbcf5a8968e4bf936c1b40de6243a0 to your computer and use it in GitHub Desktop.
Download ZIP
Automerge unbundled vanilla example
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Automerge (Vanilla JS, Unbundled) Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<script type="module">
// The ?bundle-deps here is very dodgy...
import * as AR from "https://esm.sh/@automerge/[email protected]/slim?bundle-deps"
import { BrowserWebSocketClientAdapter } from "https://esm.sh/@automerge/[email protected]?bundle-deps"
import { IndexedDBStorageAdapter } from "https://esm.sh/@automerge/[email protected]"
await AR.initializeWasm(
fetch("https://esm.sh/@automerge/[email protected]/dist/automerge.wasm")
)
const repo = new AR.Repo({
storage: new IndexedDBStorageAdapter(),
network: [new BrowserWebSocketClientAdapter("wss://sync.automerge.org")],
})
/* Check the location hash for a doc URL */
const rootDocUrl = `${document.location.hash.substring(1)}`
let handle
if (AR.isValidAutomergeUrl(rootDocUrl)) {
handle = repo.find(rootDocUrl)
} else {
handle = repo.create()
}
const docUrl = (document.location.hash = handle.url)
/* Put these on the window so we can use them conveniently from the console */
window.handle = handle
window.repo = repo
/* your code here */
handle.on("change", ({ handle, doc }) => {
var prettyJson = JSON.stringify(doc, null, 2)
document.getElementById("docId").textContent = handle.documentId
document.getElementById("docContent").textContent = prettyJson
})
</script>
<h1>Automerge Doc Viewer</h1>
<h2>DocID:<span id="docId"></span></h2>
<pre id="docContent"></pre>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment