import { useVeltClient, useEffect } from '@veltdev/react';

export default function YourDocument() {
  const { client } = useVeltClient();

  useEffect(()=>{
    if(client){
        const liveStateDataId = "uniqueId";
        const liveStateData = { "key": "value" }; // any type of data
        const liveStateSyncElement = client.getLiveStateSyncElement();

        //Set Live State Data
        liveStateSyncElement.setLiveStateData(liveStateDataId, liveStateData);


        //Subscribe to Live State Data
        liveStateSyncElement.getLiveStateData(liveStateDataId).subscribe((data) => {
        // your logic here...
        });
    }
  })


  return (
    <div>
      ...
    </div>
  );
}

These Features are currently in beta and may be subject to change.
  • React / Next.js

  • HTML

Live State Sync

With Live State Sync, you can create a shared data object that persists and syncs across all clients live on a given document.

1

Set or Update a shared live data object

Sets or updates a custom shared data object that will be synced across all clients live on the current document. Pass in a unique ID and the data object you want to sync. If the object already exists with that ID, then it will be updated.

Input params:

  • liveStateDataId: string;

  • liveStateData: any;

const liveStateDataId = 'uniqueId';
const liveStateData = { 'key': 'value' }; // any type of data
const liveStateSyncElement = client.getLiveStateSyncElement();
liveStateSyncElement.setLiveStateData(liveStateDataId, liveStateData);
2

Get a shared live data object

Subscribes to an existing shared live data object. Pass in the unique ID that you had used to set the data.

Input params:

  • liveStateDataId: string; (optional)
const liveStateDataId = 'uniqueId';
const liveStateSyncElement = client.getLiveStateSyncElement();
liveStateSyncElement.getLiveStateData(liveStateDataId).subscribe((data) => {
		// your logic here...
});