slidev-addon-sync

Sync component for Slidev.

This is compatible with the slidev-sync-server for the SSE or WebSocket server

See below for more examples.

Installation

npm i slidev-addon-sync

Slidev Configuration

Define this package into your slidev addons.

In your slides metadata (using Front Matter):

---
addons:
  - slidev-addon-sync
---

Or in your package.json:

{
  "slidev": {
    "addons": ["slidev-addon-sync"]
  }
}

Server configuration

You can use a Server Sent Events server or a WebSocket server to allow communication with multiple clients.

You can use slidev-sync-server or create your own implementation.

In that case you need to use the syncSettings config in your markdown file Front Matter to set the server URL (Update the value of server using your own URL).

For HTTP Server Sent Events server:

---
syncSettings:
  server: http://localhost:8080
---

Or for WebSocket server:

---
syncSettings:
  server: ws://localhost:8080
---

Then, in the presentation, click on the connect icon.

Type in a hash that you can share with other peoples and press enter. (you can use the proposed hash: everybody that are on the same presentation will have the same)

You are connected!

You can also use the autoConnect settings to automatically connect to the server:

---
syncSettings:
  server: http://localhost:8080
  autoConnect: true
---

Or provide a number of seconds. In that case you will need to connect the first time, and then if you refresh the page it will automatically reconnect you if the number of seconds since the last connection has not been elapsed:

---
syncSettings:
  server: http://localhost:8080
  autoConnect: 86400 # one day
---