> ## 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.

# Setup

## 1. Add the Activity Log Component

Add `VeltActivityLog` to render a pre-built, filterable timeline of all Velt and your custom app activities (comments, reactions, recorder, CRDT) grouped by calendar date.

> [tab] React / Next.js
>
> ```tsx theme={null}
> import { VeltActivityLog } from '@veltdev/react';
>
> <VeltActivityLog darkMode={false} useDummyData={true} />
> ```

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

## 2. Create a Custom Activity

* **Frontend API**: Use `createActivity()` to push your own events into the activity feed. Supply a `displayMessageTemplate` with `{{variable}}` placeholders and provide values in `displayMessageTemplateData`.
  * Params: [`CreateActivityData`](https://velt.dev/docs/api-reference/sdk/models/data-models#createactivitydata)
  * Returns: `Promise<void>`
* **Backend REST API**: You can also use [Add Activities API](https://velt.dev/docs/api-reference/rest-apis/v2/activities/add-activities.md) to create activities.

> [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}
> 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' } },
> });
> ```

## 3. Subscribe to Activities

> [!NOTE]
>
> If you are using the prebuilt components, you can skip this step.

Call `getAllActivities()` to receive a real-time stream of activity records. The observable emits the full list whenever the feed changes.

* Params: [`ActivitySubscribeConfig`](https://velt.dev/docs/api-reference/sdk/models/data-models#activitysubscribeconfig) (optional)
* Returns: [`Observable<ActivityRecord[]>`](https://velt.dev/docs/api-reference/sdk/models/data-models#activityrecord)

> [tab] React / Next.js
>
> **Using Hook:**
>
> ```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>
>   );
> }
> ```
>
> **With filters:**
>
> ```jsx theme={null}
> import { useAllActivities } from '@veltdev/react';
>
> function DocumentActivityFeed({ documentId }: { documentId: string }) {
>   const activities = useAllActivities({
>     documentIds: [documentId],
>     featureTypes: ['comment', 'reaction'],
>   });
>   // ...
> }
> ```
>
> **Using API:**
>
> ```jsx theme={null}
> const activityElement = client.getActivityElement();
> const subscription = activityElement.getAllActivities().subscribe((activities) => {
>   if (activities === null) return;
>   console.log(activities);
> });
>
> // Clean up when done
> subscription?.unsubscribe();
> ```

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

## REST APIs

You can also manage activities server-side using the REST API:

* [Get Activities](https://velt.dev/docs/api-reference/rest-apis/v2/activities/get-activities.md) — Retrieve activity records filtered by document, feature type, action type, or user.
* [Add Activities](https://velt.dev/docs/api-reference/rest-apis/v2/activities/add-activities.md) — Create new activity records for custom or application-level events.
* [Update Activities](https://velt.dev/docs/api-reference/rest-apis/v2/activities/update-activities.md) — Update existing activity records by ID.
* [Delete Activities](https://velt.dev/docs/api-reference/rest-apis/v2/activities/delete-activities.md) — Delete activity records by document, target entity, or specific IDs.


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