1. Slots

  • React

  • Next.js

  • HTML

1) Add a custom icon for the cursor

You can provide any HTML inside the cursor element.

Just provide the correct slot attribute and the cursor icon that we use will be replaced.

import { VeltCursor } from '@veltdev/react';

export default function App() {

  return (
    <>
      <VeltCursor>
        <img src="..." slot="cursor" />
      </VeltCursor>

      {/* ... */}
    </>
  );
}

2. Parts

1) Select the part you want to modify

We offer several parts which can be used like classes. Full list below.

The component is encapsulated in Shadow DOM, which is isolated from the normal DOM.

2) Apply your CSS rules

Set whatever CSS rules you want.

The part lets you target a specific element within a Shadow DOM.

3) Check out the table below

Reference the table below to see what parts we expose.

Alternatively, you can directly inspect the component HTML to see what parts are available.

velt-cursor::part(label-container) {
  border-radius: 0;
}

Part NameWhat does it do?
containerTargets the root cursor container.
svgTargets the cursor svg icon.
huddle-avatar-containerTargets the cursor avatar specific to huddle mode. You can learn more about this in the Huddle Feature.
avatar-containerTargets the avatar container specific to avatar mode.
label-containerTargets the label container.
labelTargets the label text.

3. Variables

1) Select the Cursor component

You can select the Cursor component.

Our CSS variables are set at the component level.

2) Modify a CSS variable

Set the variable to anything you want.

We expose a set of variables so you can customize the component to better match your UI.

3) Check out the table below

Reference the table below to see what variables we expose.

Alternatively, you can directly inspect the component CSS to see what variables are available.

DefaultDefaultWhat does it do?
--velt-cursor-avatar-size2remSets the Cursor avatar size in avatar mode.
--velt-cursor-video-size4.2remSets the Cursor video bubble size in Huddle mode. You can learn more about this in the Huddle Feature.
velt-cursor {
  --velt-cursor-avatar-size: 1.5rem;
}

4. Build your own UI

1) Get the Velt client

Import the useVeltClient React hook.

You can use this hook within your component to fetch the Velt client.

2) Create a useEffect hook

Create an effect with the client as a dependency.

Make sure to check if the client is null or undefined before you use it.

3) Subscribe to live cursors

Subscribe to the realtime Cursor users data on the current document and location.

We will send you a new list of cursors everytime there is a change so you can build out your own cursor UI.

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

export default function App() {

  const { client } = useVeltClient();

  useEffect(() => {
    if (client) {

      const cursorElement = client.getCursorElement();

      cursorElement.getOnlineUsersOnCurrentDocument().subscribe((_cursorUsers) => {
        // Do something with Cursor Users list
      });

    }
  }, [client]);

  return (
    <>
    </>
  );
}

2. Parts

1) Select the part you want to modify

We offer several parts which can be used like classes. Full list below.

The component is encapsulated in Shadow DOM, which is isolated from the normal DOM.

2) Apply your CSS rules

Set whatever CSS rules you want.

The part lets you target a specific element within a Shadow DOM.

3) Check out the table below

Reference the table below to see what parts we expose.

Alternatively, you can directly inspect the component HTML to see what parts are available.

Part NameWhat does it do?
containerTargets the root cursor container.
svgTargets the cursor svg icon.
huddle-avatar-containerTargets the cursor avatar specific to huddle mode. You can learn more about this in the Huddle Feature.
avatar-containerTargets the avatar container specific to avatar mode.
label-containerTargets the label container.
labelTargets the label text.
velt-cursor::part(label-container) { border-radius: 0; }

3. Variables

1) Select the Cursor component

You can select the Cursor component.

Our CSS variables are set at the component level.

2 )Modify a CSS variable

Set the variable to anything you want.

We expose a set of variables so you can customize the component to better match your UI.

3) Check out the table below

Reference the table below to see what variables we expose.

Alternatively, you can directly inspect the component CSS to see what variables are available.

Variable NameDefaultWhat does it do?
—velt-cursor-avatar-size2remSets the Cursor avatar size in avatar mode.
—velt-cursor-video-size4.2remSets the Cursor video bubble size in Huddle mode. You can learn more about this in the Huddle Feature.
velt-cursor { --velt-cursor-avatar-size: 1.5rem; }

4. Build your own UI

1) Get an instance of the cursor element

Fetch the cursor element from the Velt client.

At this point, the Velt instance should be loaded and available to you on the window object.

2) Subscribe to live cursors

Subscribe to constant cursor changes.

We will send you a new list of cursors everytime there is a change so you can build out your own cursor UI and logic.

<!doctype html>
<html lang="en">
  <head>
    <title>Cursors documentation</title>
  </head>
  <body>

    <velt-cursor></velt-cursor>

    <script>

      if (window.Velt) {

        const cursorElement = window.Velt.getCursorElement();

        cursorElement.getLiveCursorsOnDocument().subscribe((cursors) => {
          // Do something with cursors list
        });

      }

    </script>

  </body>
</html>

Was this page helpful?