DemoFast turns a browser workflow into a step-by-step interactive demo. Each important click becomes a captured screen that you can organize, annotate, preview, and share.

Before you begin

You will need:

A DemoFast account
Google Chrome
The DemoFast Chrome extension
Permission to create demos in at least one workspace
A browser-based product flow to record

Use approved sample data when you record. Screenshots may include anything visible in the browser tab, so remove personal, customer, or confidential information before you begin.

1. Install and connect the Chrome extension

From the DemoFast dashboard, select Get extension and install DemoFast from the Chrome Web Store. Pin the extension from Chrome's Extensions menu if you plan to use it often.

Sign in at app.demofa.st, then open the DemoFast extension. Confirm that your account appears in the popup and select the workspace where you want to save the new demo.

The first time you use the extension, review the recording disclosure and select I Understand & Agree.

2. Plan one clear workflow

A useful first demo should help the viewer complete one task or understand one outcome. For example:

Create a new project
Invite a teammate
Build and save a report
Configure an integration

Keep the path short. Open the starting screen, close unrelated tabs and notifications, and reset the product to a clean sample state. If the workflow is long, record the most valuable section instead of every available option.

3. Record the product flow

Open the DemoFast extension, select the destination workspace, and choose Start Recording.

Complete the workflow at a steady pace. DemoFast automatically captures browser interactions as individual steps. During the recording, you can also:

Select Pause when you need to prepare the next screen without recording it.
Select Resume when you are ready to continue.
Select Capture to add the current screen manually.

When the workflow is complete, open the extension and select Stop Recording. Keep Chrome open while the popup displays Saving Demo.... DemoFast captures the final state and saves the new demo to your selected workspace.

4. Review and organize the steps

Return to the DemoFast dashboard and open the newly created demo. The Steps sidebar shows the captured sequence as thumbnails.

Review the demo from beginning to end and remove anything that does not help the story. You can:

Drag a thumbnail to reorder a step.
Open a step's menu to Duplicate or Delete it.
Select Add Step to upload a missing image.
Set one duration for every step or give individual steps their own timing.

A demo must always contain at least one step, so the last remaining step cannot be deleted.

5. Add guidance

Select a step, then use the annotation toolbar to direct the viewer's attention. DemoFast provides four tools:

Click Marker shows where the viewer should click and can include navigation guidance.
Textbox adds written instructions or context.
Custom Area highlights a region of the screen.
Zoom Area enlarges a small or detailed part of the interface during playback.

Drag annotations to reposition them. Custom and zoom areas can also be resized. Keep instructions short and place them where they do not cover the control or information being explained.

6. Save and preview

Select Save, then wait for the toolbar to show Saved. Choose Preview to open the authenticated preview in a new tab. DemoFast saves your current changes before opening the preview.

Test the entire demo as a viewer would. Check every click marker, annotation, zoom, and navigation control. Make sure the first step sets context and the last step clearly shows the completed outcome.

7. Publish your demo

In the editor toolbar, change the visibility control from Private to Public. Once the demo is public, you can select Copy Link or open Share to copy a share link, generate embed code, or export the demo as a WebM video or GIF.

Troubleshooting

The extension asks me to sign in

Open the DemoFast dashboard, sign in, and then reopen the extension popup.

My workspace is read-only

Select a workspace where you have permission to create demos, or ask the workspace owner to update your role.

A page does not record

Refresh the target page after installing or updating the extension. Chrome internal pages cannot be recorded.

An interaction is missing

Use Capture during the recording, or add the missing screen later with Add Step in the editor.

How to Create Your First Interactive Demo

Was this article helpful?