Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.velt.dev/docs/llms.txt

Use this file to discover all available pages before exploring further.

​
getAllActivities

Subscribe to the real-time activity log feed. Emits the full list of ActivityRecord objects whenever the feed changes.
  • Params: config?: ActivitySubscribeConfig
    • documentIds (string[]) — Filter activity logs to specific document IDs.
    • featureTypes (ActivityFeatureType[]) — Filter by feature type: 'comment', 'reaction', 'recorder', 'crdt', 'custom'.
    • actionTypes (string[]) — Filter by action type; use exported action type constants for type-safe values.
  • Returns: Observable<ActivityRecord[] | null>
Using Hook — org-wide feed:
import { useAllActivities } from '@veltdev/react';

function ActivityFeed() {
  const activities = useAllActivities();

  if (activities === null) return <p>Loading...</p>;
  if (activities.length === 0) return <p>No activities yet.</p>;

  return (
    <ul>
      {activities.map((activity) => (
        <li key={activity.id}>{activity.displayMessage}</li>
      ))}
    </ul>
  );
}
Using Hook — document-scoped feed:
import { useAllActivities } from '@veltdev/react';

function DocumentActivityFeed({ documentId }: { documentId: string }) {
  const activities = useAllActivities({
    documentIds: [documentId],
    featureTypes: ['comment', 'reaction'],
  });

  if (activities === null) return <p>Loading...</p>;
  return (
    <ul>
      {activities?.map((activity) => (
        <li key={activity.id}>{activity.displayMessage}</li>
      ))}
    </ul>
  );
}
Using API:
import { useVeltClient } from '@veltdev/react';
import { useEffect } from 'react';

function YourComponent() {
  const { client } = useVeltClient();

  useEffect(() => {
    if (!client) return;
    const activityElement = client.getActivityElement();

    // Org-wide subscription
    const subscription = activityElement.getAllActivities().subscribe((activities) => {
      if (activities === null) return;
      console.log(activities);
    });

    // Document-scoped subscription
    const docSubscription = activityElement.getAllActivities({
      documentIds: ['my-document-id'],
      featureTypes: ['comment'],
    }).subscribe((activities) => {
      console.log(activities);
    });

    return () => {
      subscription?.unsubscribe();
      docSubscription?.unsubscribe();
    };
  }, [client]);
}

​
createActivity

Create a custom activity log record for non-Velt events. Use displayMessageTemplate with {{variable}} placeholders and supply values in displayMessageTemplateData.
Using Hook:
import { useActivityUtils } from '@veltdev/react';

function CustomActivityButton() {
  const activityElement = useActivityUtils();

  const handleClick = async () => {
    await activityElement?.createActivity({
      featureType: 'custom',
      actionType: 'custom',
      targetEntityId: 'my-entity-id',
      displayMessageTemplate: '{{actionUser.name}} deployed version {{version}}',
      displayMessageTemplateData: { version: 'v2.3.1' },
    });
  };

  return <button onClick={handleClick}>Create Activity</button>;
}
Using API:
import { useVeltClient } from '@veltdev/react';

function YourComponent() {
  const { client } = useVeltClient();

  const createCustomActivity = async () => {
    if (!client) return;
    const activityElement = client.getActivityElement();
    await activityElement.createActivity({
      featureType: 'custom',
      actionType: 'custom',
      targetEntityId: 'annotation-id',
      displayMessageTemplate: '{{actionUser.name}} escalated this to {{assignee.name}}',
      displayMessageTemplateData: { assignee: { name: 'Alice' } },
    });
  };
}

​
useDummyData

Load placeholder activity data for testing and prototyping. When enabled, the VeltActivityLog component renders sample activities without requiring a backend connection. 
<VeltActivityLog useDummyData={true} />