The DemoFast Chrome extension records a browser workflow as a sequence of screenshots and interactions. It captures clicks automatically, groups typing activity into useful steps, and records the final screen when you stop.

Prepare the flow before recording

Decide exactly where the recording should begin and end. A short, focused path is easier to edit and easier for viewers to complete.

Before selecting Start Recording:

Sign in to the product you are demonstrating.
Navigate to the first screen in the workflow.
Use approved sample data rather than real customer information.
Close notifications, chat widgets, and unrelated browser tabs.
Hide passwords, API keys, personal details, and other sensitive information.
Reset the product so the workflow starts from a predictable state.

Do one practice run without recording if the workflow includes menus, loading states, or values that must be entered in a particular order.

Start a recording

Open the browser tab you want to capture.
Select the DemoFast extension in Chrome.
Choose the destination Workspace.
Select Start Recording.
Return to the product tab and complete the workflow.

You must have create-demo permission in the selected workspace. DemoFast prevents recording into a read-only workspace.

What DemoFast captures

DemoFast captures the visible browser tab and builds a separate demo step for relevant interactions. Recorded step data includes the screenshot, interaction type, click position when applicable, and viewport size so the interaction can be positioned correctly during playback.

Typing is grouped rather than recorded as a new step for every keystroke. A click also completes any pending typing step before the next interaction is captured.

Only content visible in the browser tab is included. DemoFast does not record Chrome's internal pages.

Pause, resume, or capture a screen manually

Open the extension while recording to use its additional controls:

Select Pause before preparing data, waiting for a page, or moving through screens that should not appear in the finished demo.
Select Resume to continue automatic capture.
Select Capture to save the current screen as a step even when there is no useful click to record.

The Capture button is unavailable while the recording is paused. Resume first if you need a manual screenshot.

You can also use the extension's default keyboard shortcuts:

Action	Windows/Linux	macOS
Start or stop recording	`Ctrl+Shift+8`	`Command+Shift+8`
Pause or resume	`Ctrl+Shift+1`	`Command+Shift+1`
Manual capture	`Ctrl+Shift+2`	`Command+Shift+2`

Chrome lets users customize extension shortcuts, so the active shortcut may differ from the default.

Stop and save the recording

When you reach the intended final state:

Open the DemoFast extension.
Select Stop Recording.
Keep Chrome open while Saving Demo... is displayed.
Return to the DemoFast dashboard after saving finishes.
Open the new demo and review its steps.

Stopping the recording flushes any pending typed interaction and captures the final screen, helping the demo end on the completed result rather than the action immediately before it.

Clean up the captured sequence

In the editor, use the Steps sidebar to select and review every screen. Drag thumbnails to reorder them, use the step menu to duplicate or delete a screen, or select Add Step to upload a missing image.

Remove loading screens, accidental clicks, repeated states, and setup steps that do not change what the viewer understands. Then select Save and use Preview to test the complete sequence.

Troubleshooting

The popup shows “Cannot record in read-only workspace”

Choose another workspace or ask a workspace owner to grant you create-demo permission.

The extension does not recognize my account

Sign in at app.demofa.st, then close and reopen the extension popup.

The current page is not being captured

Refresh the page after installing or updating the extension. If the page is a Chrome internal page, navigate to a regular website before recording.

A click or screen was missed

Use Capture while recording. If the recording is already finished, select Add Step in the editor and upload an image of the missing state.

The saved demo contains too many steps

Delete repeated, transitional, or unnecessary screens in the editor. Keep only the steps required to explain the workflow.

How to Capture a Product Flow with DemoFast

Was this article helpful?