svelte-counter

Automerge Svelte Counter Demo

This example is an implementation of the vite demo app using Automerge Repo as a base, with the first party svelte store.

Quickstart

Start by cloning Automerge Repo to your local device:

git clone [email protected]:automerge/automerge-repo.git

cd automerge-repo

Important

All the commands listed here need to be run in the root directory of the monorepo and using pnpm as the package manager. The automerge-repo monorepo uses features which are specific to pnpm.

From the root directory, install dependencies and build the monorepo using pnpm:

pnpm install

pnpm build

Finally, again from the root directory, run the vite dev server to get the demo app running:

pnpm dev:svelte-demo

You can now visit the site on your favourite browser at http://localhost:5173/.

Next Steps

With the demo app running in your browser, copy the URL (which will now include a #hash) and open another window/tab. You will see that updating the counter in one tab updates any other tabs.

Refreshing the page will reload the document from local storage, using IndexedDB. Syncing between tabs/windows is being performed over BroadcastChannel by Automerge repo.

NB. If you open a new window without the #hash in the url, this will create a new Automerge document, with a new counter.

Sync Server

Keeping your demo vite server running, start a local automerge repo sync server with:

pnpm start:syncserver

If you now load the demo app in either a different browser, or an incognito mode window in your current browser, with the same URL and hash, you will see that the automerge document holding the counter will now be synced via the server between different browsers. If you observe the server process running in your terminal, you will see that each time you click the counter button, messages are being exchanged between the browser and the server, keeping the document in sync in all places.