Browser Synchronization
- 🔁 Automatic browser refresh as you edit text
- ✅ Actions synced across browsers (input, click, scroll, etc.) optional
PowerSync.mp4
Make sure Docker is installed, then run:
docker run -d --name powersync -p 8080:80 ghcr.io/explodinglabs/powersyncInsert the following snippet (generally before the </body> closing tag, in certain cases it only works in <head>):
<scriptid="powersync" type="text/javascript" data-events-uri=":8080/.well-known/mercure" data-events-topic="powersync" src="https://explodinglabs.com/powersync/powersync-0.1.1.js" ></script>Tip
Since 0.1.1, add ?sync=true to the src url to sync DOM events like input, scroll, and clicks across browsers.
Alternative method, excluding the production domain:
<script>if(location.hostname!=="myapp.com"){consts=document.createElement("script");s.id="powersync";s.type="text/javascript";s.async=true;s.src="https://explodinglabs.com/powersync/powersync-0.1.1.js";s.dataset.eventsUri=":8080/.well-known/mercure";s.dataset.eventsTopic="powersync";document.head.appendChild(s);}</script>After building your site, notify browsers with an HTTP request:
curl -X POST http://localhost:8080/.well-known/mercure \ -H 'Authorization: Bearer eyJhbGciOiJIUzI1NiJ9.eyJtZXJjdXJlIjp7InB1Ymxpc2giOlsiKiJdfX0.PXwpfIGng6KObfZlcOXvcnWCJOWTFLtswGI5DZuWSK4' \ --data-urlencode topic=powersync \ --data-urlencode data='{"type": "refresh"}'| Type | Description |
|---|---|
| refresh | Reloads the entire page |
| css | Reloads all external stylesheets |
| js | Reloads all external JavaScript files |