---
title: "StateMachine viewer"
slug: "statemachine-viewer"
abstract: "How to add a state flows viewer component (also called the StateMachine viewer)."
---
# StateMachine viewer

The **StateMachine viewer** or **State flows viewer component** displays the entity status, which is retrieved from the associated [state flows](https://doc.sitecore.com/ch/en/users/content-hub/state-flows.html "State flows"). It can only be added to details pages and the **Annotations** page.

In this example, the content details page, which is associated with the [Ideation state flow](https://doc.sitecore.com/ch/en/users/content-hub/ideation-flow.html "Ideation flow"), includes a **StateMachine viewer** in the **SIDEBAR ZONE** that displays the current state of the item.

![StateMachine viewer example](https://doc.sitecore.com/api/markdown-image/ch/en/users/content-hub/images/state-machine-viewer-on-content-detail-page.png)

To see the full workflow and its details, click the **Info** :mdiInformationOutline: button.

![View full workflow info button to display state flow details](https://doc.sitecore.com/api/markdown-image/ch/en/users/content-hub/images/complex-state-flow-info.png)

> [!note]
> To ensure configuration settings are applied as expected, the **StateMachine viewer** component must be rendered in React.

To add a **StateMachine viewer** component:

1. On the menu bar, click **Manage** :mdiCogOutline:.
2. On the **Manage** page, click **Pages**.
3. On the **Pages** page, select the page you want to modify.
4. On the **Layout** tab, [add the page component](https://doc.sitecore.com/ch/en/users/content-hub/add,-modify,-or-delete-page-components.md "Add, modify, or delete page components").
5. Click the component to open its details page.
6. In the **SELECTION OPTIONS** section, select one of the following options:

    | Option | Description |
    | --- | --- |
    | **All state flows** | Every state flow associated with the page’s definition is shown. |
    | **Select a state flow** | Only one of the state flows associated with the page definition is shown. Use the field provided to select the desired state flow. |

7. In the **DISPLAY OPTIONS** section, select one of the following options:

    | Option | Description |
    | --- | --- |
    | **Current state only** | Only the current step in the state flow is displayed (for example, *In review*). |
    | **Horizontal steps** | The steps of the state flow are displayed horizontally in a horizontal sequence, with the current status highlighted. |
    | **Vertical steps** | The steps of the state flow are displayed in a vertical sequence, with the current status highlighted. |

8. Configure the following switches:
    - **Show description** - turn on to show the description of the respective state flow without having to hover over it.
    - **Show assignee** - turn on to show the assignees of the respective state flow without having to hover over it.
    - **Show gate configuration** - turn on to show the **Add reviewers** or **Review details** button for users who have the permission to configure parallel and sequential approvals. To [configure parallel and sequential approvals](https://doc.sitecore.com/ch/en/users/content-hub/configure-parallel-and-sequential-approvals.html "Configure parallel and sequential approvals"), this must be turned on.
9. Click **Save and close**.

> [!note]
> The **Horizontal steps** and **Vertical steps** display options can show a maximum of five steps. If more than five steps are available, only the current step is shown. [Complex state flows](https://doc.sitecore.com/ch/en/users/content-hub/state-flows.html "State flows") cannot be displayed as horizontal and vertical steps; instead the current state is displayed alongside an **Info** :mdiInformationOutline: button.