Annotations turn a sequence of captured screens into a guided experience. In the DemoFast editor, you can add a click marker, textbox, custom highlight area, and zoom area to each step.

Open the annotation editor

Open a demo from the dashboard. In the Steps sidebar, select the screen you want to edit. The annotation toolbar appears above the selected screenshot with four tools:

Click Marker
Textbox
Custom Area
Zoom Area

DemoFast currently supports one annotation of each type on a step. If a tool is already active, selecting it opens the existing annotation's settings rather than adding a second one.

Add a click marker

Use a click marker to show the exact control the viewer should select.

Select the relevant step.
Choose Click Marker from the annotation toolbar.
Drag the marker over the target button, link, field, or control.
Use Click Marker Settings to configure the marker and its tooltip.

You can choose a Ripple, Pulse, or no marker animation. The tooltip settings let you edit the text, place the tooltip to the left, top, bottom, or right of the marker, choose its size and alignment, and change its colors.

Enable Show Next/Previous Buttons when the tooltip should guide navigation. You can also customize the Back and Next button labels with short text.

Recorded clicks may already have a click marker. Move or edit the existing marker if its automatically captured position needs adjustment.

Add a textbox

Use a textbox to explain an action, provide context, or describe the result shown on screen.

Choose Textbox.
Enter concise guidance in Textbox Settings.
Drag the textbox into unused screen space near the relevant interface.
Adjust its available position, size, alignment, color, and animation settings.

Write one action or idea at a time. For example, “Choose the reporting period” is easier to follow than a paragraph containing several instructions. Avoid placing the textbox directly over the feature you are explaining.

Highlight an area of the screen

In DemoFast, a visual highlight is called a Custom Area. It is useful when the viewer needs to notice a panel, group of controls, status message, or result rather than a single click target.

Choose Custom Area.
Drag the rectangle over the important region.
Move it by dragging inside the area.
Resize it with the handles around its edges or corners.
Open Custom Area Settings to adjust the border, fill, opacity, radius, shadow or glow, and animation.

Keep the highlighted region as small as possible while still containing everything the viewer must notice. A large highlight around most of the screen provides little direction.

Add a zoom area

Use a Zoom Area when an important interface element is too small to read comfortably at normal player size.

Choose Zoom Area.
Move the area over the detail you want to enlarge.
Resize the area so it contains the complete focal region.
Use the editor's zoom preview to test the effect.
Select the zoomed canvas to return to the normal editor view when needed.

Use one tight focal region. Zooming a very large portion of the screenshot creates little benefit, while an extremely small region can make the transition feel disorienting.

Reposition, edit, or remove an annotation

Click or drag an annotation on the canvas to select it and update its position. The settings panel for the selected annotation contains its appearance and behavior options, plus a remove action.

Custom and zoom areas include resize handles in the editor. Those editing handles do not appear in the published player.

If you need two annotations of the same type, split the explanation across two steps. You can duplicate the current step from its menu in the Steps sidebar, then configure a different annotation on each copy.

Save and preview your changes

Select Save and wait for Saved to appear. Then choose Preview. DemoFast saves the current editor state before opening the authenticated preview in a new tab.

In preview, check that:

The marker is centered on the correct control.
Text remains readable without hiding the product.
Navigation buttons advance in the intended direction.
Custom areas focus attention without overwhelming the screen.
Zoom transitions reveal the intended detail and do not disorient the viewer.
Every annotation remains clear at the player's displayed size.

Troubleshooting

I cannot add a second annotation of the same type

Each step supports one click marker, one textbox, one custom area, and one zoom area. Reposition the existing annotation or use another step.

The textbox covers important content

Shorten the text, reduce its size, or move it into unused screen space. If the screen is crowded, duplicate the step and divide the explanation.

The zoomed detail is still hard to read

Resize the zoom area around a tighter region. If the source screenshot is not clear enough, add a separate higher-quality image step.

My changes do not appear in preview

Wait for the editor to show Saved, then refresh the preview tab. Selecting Preview again also saves the current editor state before opening a new preview.

How to Add Text, Click Markers, Highlights, and Zoom Areas

Was this article helpful?