---
title: "Editing an interactive demo"
slug: "editing-interactive-demo"
description: "Enhance your interactive demo with tools like overlays, music, and AI voiceovers in the Advanced WYSIWYG Editor for engaging articles."
updated: 2026-06-02T03:24:36Z
published: 2026-06-02T03:24:36Z
---

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

# Editing an interactive demo

After recording an interactive demo in the **Editor**, it opens automatically in the **Interactive demo editor** so you can enhance it before inserting it into your article. You can also reopen the editor anytime by selecting the demo in the article and clicking **Edit**.

If you haven't recorded a demo yet, see [Recording interactive demo](/help/docs/recording-interactive-demo).

---

## What you can do in the Interactive demo editor

Each tool in the editor is covered in detail in its own article, to learn more about each tool click the links below.

- [Call to action](/help/docs/call-to-action) - Add buttons that link to URLs or display messages during playback
- [Hotspots](/help/docs/hotspot-1) - Add guided tooltips at click points to walk readers through each step
- [Blur](/help/docs/blur-md) - Mask credentials, PII, or sensitive UI elements at specific timestamps
- [Spotlight](/help/docs/spotlight-1) - Draw attention to key areas of the screen during playback
- [Highlight](/help/docs/highlight-1) - Emphasize specific elements with a color overlay at set time ranges
- [Image](/help/docs/image-1) - Insert images or emojis into the demo at specific timestamps
- [Text](/help/docs/text-1) - Add text overlays to annotate or label parts of the recording
- [Camera](/help/docs/camera) - Overlay a camera recording on top of the demo
- [Crop](/help/docs/crop-1) - Resize and reframe the demo to fit your article layout
- [Trim](/help/docs/trim-1) - Cut unwanted sections from the start, middle, or end
- [Music](/help/docs/music-1) - Add background music with fade in/out and pause on interaction options
- [Voice](/help/docs/voice-1) - Add AI voiceover in multiple languages or enable auto-generated subtitles

---

## Managing added elements

In the **Added elements** section, you can view all elements applied to the demo:

- Click **Edit** () to modify an element
- Click **Delete** () to remove it

Click **Close** to save all changes.

---

## Formatting the demo in the article

Once inserted, select the demo to access these formatting options:

![Interactive demo showcasing article creation and management features in Document360 interface.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/19_Screenshot-Editing_the_recorded_interactive_demo.png)

| Option | Description |
| --- | --- |
| Align left / Center / Align right | Controls horizontal alignment |
| Inline left / Inline block / Inline right | Places the demo inline within the text |
| Resize | Adjusts the demo dimensions |
| Copy | Copies the demo for reuse in another article within the same project |
| Edit | Reopens the Interactive demo editor |

---

## FAQ

**Will articles with an interactive demo appear in portal search results?**

Yes. Articles containing an interactive demo appear in portal search results if there is a match in the article title or content.