---
title: "Highlight"
slug: "highlight"
description: "Enhance your interactive demos with the Highlight element to emphasize key areas, manage highlights, and improve viewer engagement effortlessly."
updated: 2026-06-02T03:28:02Z
published: 2026-06-02T03:28:02Z
---

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

# Highlight

The Highlight element allows you to mark important areas on a step image with a colored overlay, drawing the viewer's attention to a specific region without dimming the surrounding content. Use it to emphasize UI elements, annotate key areas, or visually differentiate important sections in your interactive demos, guides, and videos.

---

## Use cases

| Scenario | Recommended Configuration |
| --- | --- |
| Emphasizing a button the user needs to click | Rectangle shape, yellow or orange color |
| Marking an error field or warning area | Rectangle shape, red or custom color |
| Highlighting an icon or status indicator | Circle shape, contrasting color |
| Annotating multiple regions across a complex UI step | Multiple highlights with distinct colors and descriptive names |
| Drawing attention to a navigation item or menu option | Rectangle shape, sized to the menu entry |

---

## Adding highlight element

### How to add highlight to a step by step guide

1. Navigate to the step where you want to add a highlight.
2. In the right pane, go to **Add elements**.
3. Click **Highlight**. If a highlight already exists, click **Add new**.
4. Use the **eye icon** at the top-right to show or hide the highlight. Hidden highlights won't appear to the reader but aren't deleted.
5. Enable **Hide other elements** to hide every other element while you configure the highlight.
6. Enter a name in the **Name** field (e.g., `Highlight - Save Button`, `Highlight - Error Field`).
7. Under **Shape**, choose:
  - **Rectangle** - for buttons, input fields, and UI regions.
  - **Circle** - for icons, avatars, and circular components.
8. Under **Color**, pick from the preset swatches or click **+** to set a custom color.
9. Click **Apply**.

![Settings menu for adding highlights with options for shape and color selection.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Highlight-guide.png)

### How to add highlight to video / interactive demo

1. In the right pane, go to **Add elements**.
2. Click **Highlight**. If a highlight already exists, click **Add new**.
3. Use the **eye icon** at the top-right to show or hide the highlight. Hidden highlights won't appear to the reader but aren't deleted.
4. Enable **Hide other elements** to hide every other element while you configure the highlight.
5. Enter a name in the **Name** field (e.g., `Highlight - Save Button`, `Highlight - Error Field`).
6. Set the **Start time** and **End time** to define when the highlight appears. Use **Select exact frame** for precise placement.
7. Under **Shape**, choose:
  - **Rectangle** - for buttons, input fields, and UI regions.
  - **Circle** - for icons, avatars, and circular components.
8. Under **Color**, pick from the preset swatches or click **+** to set a custom color.
9. Click **Apply**.

 Note

Once applied, you can reposition and resize the highlight region directly on the canvas by dragging the edges.

![Interface for adding highlights with options for name, time, shape, and color.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Highlight-video-demo.png)

---

## Managing highlight elements

Once added, highlights appear in the **Highlight panel**, each showing the highlight's name and its configured time range or step number.

- **Add another highlight** - Click **Add new** at the top of the panel.
- **Edit a highlight** - Click any highlight in the list to edit it. Modify as needed, then click **Apply** to save or **Cancel** to go back. Use the **Delete icon** to remove it.
- **Delete a highlight** - Hover over a highlight, click the **three-dot menu**, and select **Delete**.

![Interface showing highlights with timestamps and options to add or delete highlights.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Manage-Highlight.png)

---

## Best practices

- **Use descriptive names** - Label each highlight clearly when multiple highlights are applied across steps, to make them easier to identify and manage.
- **Choose colors with intent** - Yellow and orange work well for general emphasis, while custom colors can align with your brand palette or signal specific meaning (e.g., red for errors, green for success).
- **Hide rather than delete** - Temporarily disable highlights that are not needed instead of deleting them. This preserves the configuration for future use.
- **Use Highlight alongside Spotlight** - Spotlight dims the background while Highlight adds a color overlay on the target area, creating a layered emphasis effect.
- **Resize and reposition on the canvas** - Use the drag handles for precise placement and the rotate or fit-to-screen controls for orientation adjustments.
- **Preview after applying** - Confirm that the color and size render clearly against the step content and do not obscure critical information.