> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Customize Behavior

#### getAllActivities

Subscribe to the real-time activity log feed. Emits the full list of ActivityRecord objects whenever the feed changes.

* Params: `config?:` [`ActivitySubscribeConfig`](https://velt.dev/docs/api-reference/sdk/models/data-models#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>`](https://velt.dev/docs/api-reference/sdk/models/data-models#activityrecord)

> [tab] React / Next.js
>
> **Using Hook — org-wide feed:**
>
> ```jsx theme={null}
> 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:**
>
> ```jsx theme={null}
> 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:**
>
> ```jsx theme={null}
> 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]);
> }
> ```

> [tab] Other Frameworks
>
> ```javascript theme={null}
> const activityElement = Velt.getActivityElement();
>
> // Org-wide subscription
> const subscription = activityElement.getAllActivities().subscribe((activities) => {
>   if (activities === null) return;
>   console.log(activities.map((a) => a.displayMessage));
> });
>
> // Document-scoped subscription
> const docSubscription = activityElement.getAllActivities({
>   documentIds: ['my-document-id'],
>   featureTypes: ['comment'],
> }).subscribe((activities) => {
>   console.log(activities);
> });
>
> // To unsubscribe:
> // subscription?.unsubscribe();
> // docSubscription?.unsubscribe();
> ```

#### createActivity

Create a custom activity log record for non-Velt events. Use `displayMessageTemplate` with `{{variable}}` placeholders and supply values in `displayMessageTemplateData`.

* Params: [`CreateActivityData`](https://velt.dev/docs/api-reference/sdk/models/data-models#createactivitydata)
* Returns: `Promise<void>`

> [tab] React / Next.js
>
> **Using Hook:**
>
> ```jsx theme={null}
> 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:**
>
> ```jsx theme={null}
> 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' } },
>     });
>   };
> }
> ```

> [tab] Other Frameworks
>
> ```javascript theme={null}
> const activityElement = Velt.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.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltActivityLog useDummyData={true} />
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-activity-log use-dummy-data="true"></velt-activity-log>
> ```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.