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

# Setup

## 1. Enable Activity Logs in the Velt Console

* Go to the [Activity Logs section](https://console.velt.dev/dashboard/config/activity) in the Configurations section of the Velt Console and enable Activity Logs.

<Warning> Activity Logs will not work if you do not enable this first.</Warning>

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

<Tabs>
  <Tab title="React / Next.js">
    ```tsx theme={null}
    import { VeltActivityLog } from '@veltdev/react';

    <VeltActivityLog darkMode={false} useDummyData={true} />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-activity-log use-dummy-data="true"></velt-activity-log>
    ```
  </Tab>
</Tabs>

## 3. 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`](/api-reference/sdk/models/data-models#createactivitydata)
  * Returns: `Promise<void>`
* **Backend REST API**: You can also use [Add Activities API](/api-reference/rest-apis/v2/activities/add-activities) to create activities.

<Tabs>
  <Tab title="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>

  <Tab title="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' } },
    });
    ```
  </Tab>
</Tabs>

## 4. Subscribe to Activities

<Info>
  If you are using the prebuilt components, you can skip this step.
</Info>

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

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

<Tabs>
  <Tab title="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>

  <Tab title="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);
    });
    ```
  </Tab>
</Tabs>

## REST APIs

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

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