How It Works
Learn how to use FIT Overlay and make the most of your telemetry data.
Quick Start Guide
1. Upload Video
Select the video file you want to add telemetry to. We support MP4, MOV, and WebM formats.
2. Connect or Upload
Link your Strava for automatic sync (easiest) or upload a .FIT / .GPX file manually.
3. Sync & Design
Align data with your video timeline and customize your telemetry widgets and overlay themes.
Automatic Strava Sync
Link Your Strava Account
Instead of manually downloading and uploading .FIT files, you can link your Strava account to automatically retrieve your activity data. This is the recommended way to use FIT Overlay.
- Sign In: Make sure you are signed in to FIT Overlay.
- Connect: In the "Project Files" sidebar on the left, click "Connect Strava for auto-sync".
- Authorize: You will be redirected to Strava to authorize FIT Overlay. Once approved, you'll be returned to the app.
Automatic Matching
Once connected, FIT Overlay makes finding your telemetry data effortless:
- 1
Upload a video: Select the footage you want to overlay.
- 2
Auto-Search: FIT Overlay automatically searches your Strava activities for a match based on the video's timestamp and recording duration.
- 3
Data Retrieval: When a match is found, your GPS, power, cadence, and heart rate streams are retrieved and loaded onto the editor automatically.
Placing & Customizing Overlay Elements
Adding Elements
In the editor, you will find the Element Library on the left sidebar. All available telemetry widgets and gauges are listed here.
- Drag & Drop: Drag any element from the library directly onto the video canvas. The element will be placed where you release it.
- Click to Add: Alternatively, click on any element in the library to place it in the center of the video.
- Positioning: Once placed, click and drag elements anywhere across the video preview.
Note: Spatial elements (like Map and Compass) require GPS coordinates in your FIT / GPX file. They are available whenever your activity includes position data.
Customizing Elements
After placing an element, click to select it and customize its settings in the Properties Panel on the right side:
- Data Source: Select the metric to display (Speed, Heart Rate, Power, Cadence, Grade, etc.)
- Position & Size: Adjust coordinates, width, height, and scale
- Styling: Customize colors, fonts, line thickness, opacity, and background styling
- Element-Specific Options: Each widget type provides unique controls (e.g. gauge angles, chart smoothing, map zoom)
Available Element Types
Text Widget
Static text or dynamic metric telemetry display
The Text element is highly versatile: display custom labels or bind to real-time telemetry metrics from your activity recording.
Supported Metrics
Settings & Options
Data Source
- • Dynamic metric or static custom text
- • Metric units (km/h, mph, m, ft, bpm, etc.)
Text Formatting
- • Prefix & Suffix values
- • Label placement (above, beside, below)
- • Alignment (left, center, right)
Typography
- • Font family selection
- • Font size (10-200px) & weight
Appearance
- • Text & background color
- • Opacity & shadow blur
Radial Gauge
Circular arc gauge for real-time numeric telemetry
The Radial Gauge displays speed, power, or heart rate as a dynamic circular sweep. The arc fills progressively according to your current telemetry value.
Settings & Options
Data & Range
- • Select target metric & unit
- • Custom min & max scale limits
Gauge Geometry
- • Center angle & sweep arc (0-360°)
- • Arc thickness & line caps
Color Theming
- • Arc & track colors
- • Dynamic zone colors (HR / Power zones)
Display & Labels
- • Show/hide digital value & unit label
- • Custom font & opacity styling
Progress Bar
Horizontal or vertical linear progress indicator
The Progress Bar displays values along a sleek linear bar. Ideal for heart rate zones, power outputs, or battery simulation.
Settings & Options
Data & Range
- • Metric binding & unit selection
- • Min & max range scale
Layout & Geometry
- • Horizontal or vertical orientation
- • Width, height & border radius (0-20px)
Colors & Themes
- • Bar fill color & background track
- • Dynamic zone-based color shifting
Border & Labels
- • Border width & opacity
- • Show/hide text readout & font size
Telemetry Chart
Real-time scrolling timeseries graph
The Chart element renders an animated rolling timeseries graph. It charts historical telemetry values over the preceding window of seconds, providing a continuous profile for elevation, power, or heart rate curves.
Settings & Options
Data Metric
- • Select metric to plot
- • Unit formatting & scaling
Time Window & Graph
- • Rolling duration (10-300 seconds)
- • Curve smoothing & line thickness
- • Area fill & gradient transparency
Axes & Markers
- • Show/hide grid lines & Y-axis labels
- • Current position cursor marker
Scaling & Colors
- • Line color, fill color & background
- • Auto-scaling Y-axis vs. fixed bounds
Route Map
2D or 3D GPS route visualization
Requirement: This element requires GPS latitude/longitude data in your FIT / GPX file.
The Route Map plots your GPS track. Choose between Moving Map (map shifts continuously with rider heading) or Moving Marker (full course overview with an animated position pin). Supports both 2D overhead and angled 3D perspectives.
Settings & Options
Mode & Geometry
- • Mode: Moving Map vs. Moving Marker
- • Shape: Rounded rectangle or circle
Track & Marker
- • Route track width (1-20px)
- • Marker icon (arrow, dot, pulsing ring)
- • Marker size & rotation
Perspective & Camera
- • 3D tilt perspective (0-150%)
- • Zoom level (0.5x - 20x)
- • Rolling trail decay window
Colors & Border
- • Route track & past trail color
- • Marker color, background & border
Heading Compass
Directional orientation from GPS course telemetry
Requirement: This element requires GPS heading data in your recording.
The Compass displays current heading and bearing. Available in two visual styles: 2D Circular (classic dial) or Horizontal Tape (modern heads-up heading bar).
Settings & Options
Style & Size
- • Style: 2D Circular or Horizontal Tape
- • Gauge diameter / tape width (20-600px)
Readout & Cardinal Points
- • Show/hide N/S/E/W cardinal indicators
- • Degree heading readout (0-360°)
Theming
- • Needle & tape accent color
- • Background & border styling
Typography
- • Font family & font size
- • Shadow glow effect
Downloading .FIT Files
Strava
- Log in to your account on strava.com (Desktop browser).
- Open the activity you want to export.
- On the left sidebar, click the three dots (...) button.
- Select Export Original. The file will download as a .fit or .fit.gz file.
Garmin Connect
- Log in to Garmin Connect (Desktop browser).
- Go to Activities and select your workout.
- Click the gear icon (⚙️) in the top right corner.
- Select Export Original to download a ZIP containing your raw .FIT file.
Frequently Asked Questions
How does automatic synchronization work?
FIT Overlay synchronizes your video footage with activity telemetry by extracting creation timestamps embedded in your video container metadata (such as iPhone QuickTime timestamps, GoPro MP4 metadata, and Garmin FIT timestamps).
If your video file lacks creation timestamps (for example, screen recordings or clips re-encoded by social media apps), you can use the interactive timeline offset slider in the editor to align telemetry to your video in seconds.
My data is not syncing correctly?
Use the synchronization tool in the bottom timeline. You can drag the offset slider or enter exact time offsets to match video action with GPS data points precisely.
What happens to my private video footage?
All video decoding, overlay compositing, and rendering takes place 100% locally within your browser using WebCodecs and WebAssembly. Your footage is never uploaded to any external server.