The viewer
Every recording opens in the same viewer, whether you reach it from your library, a share link or an embed. The media sits at the top with its timeline and controls. Under it, the recording reads like a document: the title and description, the assistant’s findings, the checklist and the comments. The devtools sit beside it on a wide screen, and below everything on a narrow one.
Everything in the viewer runs on one clock. When you play, seek or click an event, the video, the rebuilt page, the console, the network list and the steps all move to the same moment.
Views on the stage
Section titled “Views on the stage”The stage shows the recording in one of four views. When more than one applies, a switch in the top left corner of the stage lets you change between them.
| View | When you see it | What it shows |
|---|---|---|
| Video | Screen and tab recordings | The recorded video, with its sound |
| Screenshot | Screenshots | The captured image, with any marks the reporter drew |
| Page | Any capture that recorded the page’s DOM | The page rebuilt from its DOM, so you can inspect elements and styles at any moment |
| Steps | Instant replays without DOM data | The current step written out in words |
A video recording that also captured the DOM offers both Video and Page. An instant replay usually plays in Page, since it has no video. The address of the page the reporter was on shows next to the switch and follows playback.
Captures taken on a phone or tablet, or in a narrow window that emulates a phone, show inside a device frame so you can tell the size at a glance. Desktop captures have no frame.
Player controls
Section titled “Player controls”The controls under the timeline are, from left to right:
- Play and pause.
- Mute, for video recordings. Instant replays have no sound and no mute button.
- The current time and the length of the recording.
- Skip idle, on by default, which jumps over stretches where nothing happened.
- The playback speed: 0.5×, 1×, 1.5×, 2× or 4×.
- Captions, when the recording has a transcript.
- React at this moment, which pins an emoji to the current time. See Comments and triage.
- Copy a link to this moment.
- Download, with the media, the capture data (
.json), the network (.har), a Playwright test (.spec.ts), or everything as a.zip. - Devtools, which shows or hides the devtools panel on a wide screen.
- Keyboard shortcuts.
- Fullscreen. The media, timeline and controls go fullscreen together, so you can still play and seek there.
A screenshot has no timeline. In its place a bar says when it was taken and offers Full size, which opens the image in a new tab, and Download. The console, network and steps beside a screenshot show what happened in the minutes before it, timed back from the moment it was taken.
The timeline
Section titled “The timeline”The timeline is a track you click to seek, with icon chips above it for the moments you most likely want to jump to:
- Errors, from uncaught exceptions and
console.error. - Failed requests.
- Page navigations.
- Marks the reporter drew while recording.
- Comments pinned to a moment.
- Reactions.
Clicks and typing are not on the timeline. They are in the Actions tab of the devtools, where you can read them in order. When chips sit too close together to read, they merge into one chip with a count, and the chip shows the most important kind among them, errors first.
Chapters
Section titled “Chapters”The track is split into chapters, the way a long video on a video site is. A new chapter starts when the page changes, at the first failure after ten quiet seconds, at the first action after eight idle seconds, and when the reporter starts talking again after a pause of three seconds. Chapters shorter than five seconds fold into the one before. A chapter that contains a failure is tinted red.
Hover preview
Section titled “Hover preview”Hovering the timeline shows the time under the pointer and the title of that chapter. For video recordings it also shows the nearest frame of the video, so you can find a moment without playing to it.
Captions
Section titled “Captions”When your workspace transcribes narration, a video with the reporter’s voice gets captions over the stage on the recording page. They are on by default. The Captions toggle in the controls hides or shows them. The full transcript is folded under the assistant section. See The assistant.
Linking to a moment
Section titled “Linking to a moment”Add ?t= to a share link to open it at a moment. The value is seconds, such as ?t=72.5, or minutes and seconds, such as ?t=1:12.5.
https://app.faylee.app/s/AbC123xYz0?t=1:12You don’t have to type this yourself. Copy a link to this moment in the controls copies the share link set to the time the player is at.
Times in the devtools
Section titled “Times in the devtools”Event times in the devtools show the time into the recording by default. The clock button at the top of the devtools switches them to UTC clock time, which helps when you search server logs. For a screenshot, the default is the time before the capture.
Keyboard shortcuts
Section titled “Keyboard shortcuts”The shortcuts work anywhere on the page except while you type in a field. Press ? in the viewer to see them.
| Keys | Action |
|---|---|
Space or K | Play or pause |
← and → | Back or forward 5 seconds |
J and L | Back or forward 10 seconds |
M | Mute or unmute |
F | Fullscreen, or back |
? | Show the shortcuts |
Layout
Section titled “Layout”From 1024 pixels wide, the devtools sit in a panel to the right of the recording. Drag the divider to resize it, and Faylee remembers the split in your browser. Hide devtools at the top of the panel closes it, and the Devtools button in the controls brings it back.
On a narrower screen, everything stacks in one column with the devtools at the end. Lists in the devtools scroll on their own and follow playback.
The share page shows the same viewer without the recording’s actions, so nobody edits the recording from there. The embed shows the media, timeline, controls and devtools, without the write-up or comments, and links back with Open in Faylee. See Sharing and embeds.