---
title: "Text"
slug: "text"
description: "Overlay customizable text annotations on interactive demos, guides, and videos to enhance context and instructions without re-recording."
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.

# Text

The Text element allows you to overlay custom text annotations to interactive demos, guides, and videos. Use it to add context, instructions, labels, or callouts directly on a step without re-recording. Text elements are highly customizable, offering control over typography, color, alignment, rotation, background, shadow, outline, position, and animation.

---

## Adding text element

### How to add text element to step by step guide

1. Navigate to the step where you want to add a text element.
2. In the right pane, scroll to **Add elements** and click **Text**. Click **Add new** if one already exists.
3. Enable **Hide other elements** to get a distraction-free editing view.
4. In the **Text** field, enter your annotation. Use the toolbar to apply **Bold**, **Italic**, **Underline**, lists, or a **Hyperlink**.
5. Configure typography as needed — **Font**, **Font style**, **Font size**, **Color**, **Alignment**, **Rotation**, and **Styles**.
6. Under **Customize**, set the **Background**, **Shadow** (0–7), and **Outline** (0–6).
7. Under **Position**, use the 3×3 grid to snap the text to a predefined area.
8. Toggle **Animation** on and select a type — Fade, Slide up, Slide down, Typewriter, Zoom in, Rise up, Rise down, Circle, or Spin.
9. Under **Behaviour**, set visibility duration:
  - **Stay for** — visible for a set number of seconds.
  - **Show until** — visible until a specified time.
10. To add narration, enable **AI voice over**, select a voice, enter the content, and click **Play** to preview.
11. Click **Apply** to save.

![alt-text](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/text-guide.gif)

---

### How to add text element to video / interactive demo

1. Navigate to the target step.
2. In the right pane, go to **Add elements** and click **Text** (or **Add new** if one already exists).
3. Enter your content in the **Text** field.

 Note

Select text in the field to access formatting options: Bold (), Italics(), Underline , Ordered list (), Unordered list (), and Hyperlink().

1. Configure typography:
  - **Font / Font style / Font size** - Set family, weight, and size.
  - **Color** - Pick from the palette or enter a hex value.
  - **Alignment** - Left, center, or right.
  - **Rotation** - Enter degrees or use the rotate controls.
  - **Styles** - Apply a preset for quick, consistent formatting.
2. Under **Customize**, style the text container:
  - **Background** — Choose a preset, custom color, or transparent.
  - **Shadow** — Adjust intensity (0–7).
  - **Outline** — Adjust thickness (0–6).
3. Under **Position**, click a zone in the 3×3 grid to snap the element into place.
4. Toggle **Animation** on and select a type: Fade, Slide up/down, Typewriter, Zoom in, Rise up/down, Circle, or Spin.
5. Under **Behaviour**, set visibility duration:
  - **Stay for** — Visible for a set number of seconds.
  - **Show until** — Visible until a specific time.
6. Enable **AI voice over**, select a voice, enter narration text, and click **Play** to preview.
7. Click **Apply**.

** ![](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/text-video-demo.gif)

---

## Managing text elements

Once added, text elements are listed in the **Text panel**, each displaying the text content and the step it is applied to.

- **Add another text element** - Click **Add new** at the top of the panel to configure an additional text annotation.
- **Edit a text element** - Hover over any text element in the list and click the **Edit** icon to modify it. Click **Apply** to save changes, **Cancel** to return to the Text panel, or the **Delete icon** to delete it.
- **Delete a text element** - Hover over a text element, click the **More** icon, and select **Delete** to remove it.

![](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Manage-text.png)

---

## Best practices

- **Use descriptive names** - Label each text element clearly to make them easier to identify and manage, especially when multiple text elements are applied across different steps.
- **Hide rather than delete** - Temporarily disable text elements that are not needed instead of deleting them. This preserves the configuration for future use.
- **Use the Angle field for precision** - When the text overlay needs to be aligned at a specific angle, enter the value directly in the Angle field.
- **Use text elements sparingly** - Avoid applying text across too many consecutive steps to prevent visual clutter.
- **Preview after applying** - Verify that the annotations do not obscure other essential on-screen content.