Skip to main content
Media Capture Editor
Navattic makes it easy to create demos of Desktop or Mobile native apps by uploading any screenshots, videos or GIFS you already have.

​
Taking Media Captures

Follow these instructions for taking media captures across different platforms:
The Navattic Capture Extension can be used to Capture screenshots and video of any application that can be opened in a browser. When capturing with the extension, select Screenshot or Video.

​
Edit Media Captures

Media Captures can be edited to tell the perfect story for your demo. Open a Media Capture and click Edit to open the Media Capture Editor. The Media Capture Editor gives you controls for editing any of the following:
Display your demo inside a realistic Device frame, such as a Mobile, Desktop, or Tablet, to match the application’s platform. This helps visitors imagine using your product on their own device and adds visual polish. You can also switch orientations and device types to best suit the flow of your demo.
See how Mobile Device Frames look in action by viewing Calm’s demo.

​
Video Editor

For video captures, Navattic includes a built-in Video Editor that lets you trim and crop your footage before it’s added to your demo — no external tools required. To open the Video Editor, upload a video file and click Edit before finalizing the upload. You can trim and crop in any order, then save when you’re ready.

​
Trim

Trimming lets you cut out the beginning or end of a video so your demo starts and ends exactly where you want. The timeline at the bottom of the editor shows your full video along with an audio waveform. Use the drag handles on either end of the timeline to set your trim points — everything outside the handles will be removed. As you drag, the timestamp display updates to reflect your current position within the trimmed range. Use these controls to navigate and fine-tune your trim:
  • Play/Pause — Preview your video to find the right cut points
  • Mute/Unmute — Toggle audio while previewing
  • Zoom slider — Zoom the timeline from 1x up to 4x for more precise control over short clips
The red playhead shows where the video is currently playing. Hover over the timeline to see a gray indicator that helps you preview a position before clicking.

​
Crop

Cropping lets you define a specific region of the video frame to keep, removing any surrounding areas you don’t want to show. To enter crop mode, click the Crop button in the playback controls. A crop overlay with drag handles will appear over the video preview. Drag the handles to adjust the crop area. The current dimensions are shown in pixels as you resize. Use the aspect ratio dropdown to constrain your crop to a common format:
PresetRatio
FreeformNo constraint
OriginalMatches the video’s native dimensions
Widescreen16:9
Fullscreen4:3
Square1:1
Vertical9:16
When you’re satisfied with the crop area, click Apply to confirm. To exit crop mode without making changes, click Discard.

​
Saving your edits

Once you’ve finished trimming and cropping, click Save to apply your edits. The edited video replaces the original and is ready to use in your demo.
Trim and crop are applied together when you save. You can adjust either at any point before clicking Save.

​
Video capture controls

Video captures can be a good option for showcasing dynamic content, such as animations or user interactions like drag-and-drop. Select Video options from the Capture dropdown in the Demo Builder, or select Advanced on a Video capture in the Flow builder to control the following settings:
Auto play your video capture when a viewer lands on the step. This creates a smooth, immediate viewing experience without requiring the user to click play.
If the video capture is on the first step, audio will not play until the visitor has interacted with the demo (such as clicking or scrolling) due to browser restrictions.

​
Example Media capture demos

captures-19

Slack Mobile App Demo

captures-22

SwipedOn Employee App

captures-23

Duolingo

​
FAQ

Navattic includes mobile, tablet, and desktop borders for Apple and non-Apple devices. Adding a device border helps end users best visualize your desktop or mobile application. Learn more about’ ’ adding a device border to a media capture.
Yes, to add a PDF to your demo, you’ll have to convert the file to a .PNG or .JPEG file before uploading it as a Media Capture. We recommend using this free online converter: https://www.freeconvert.com/pdf-converter/download.Watch a 1-minute tutorial on converting and uploading PDFs in Navattic.
Using device mode in Google Chrome paired with a tool like this , you are able to take screenshots that better fit with the device borders.
No. Navattic does not currently support image editing. We recommend using a tool like Figma or Adobe to make modifications prior to uploading.
To avoid the need to scroll, find the ratio of the device border and ensure your image has the same ratio before uploading it to Navattic.
  • The ratio for the Desktop border within Navattic is 3:2.
An easy way to get the correct ratio is to set up a Google Slides deck with this same ratio as the device border you want to use. Then, fill the slides with your images before downloading each individual Slide.