Stream Overlay

Stream Overlay creates a local browser-source overlay for streaming software such as OBS or Streamlabs. Use it when you want your viewers to see FlyHub flight data on stream.

Open Stream Overlay settings

Open FlyHub Desktop.
Go to Settings.
Select Simulator.
Find Stream Overlay.
Click Configure.

Start the overlay

Open Stream Overlay settings.
Turn on Run overlay now.
Wait for the Browser Source URL to appear.
Copy the Browser Source URL.

The default local overlay URL uses port 41987.

Add it to OBS

Open OBS.
Add a new Browser source.
Paste the Browser Source URL from FlyHub.
Set the width and height you want.
Save the source.

If OBS is on the same PC as FlyHub, use the Browser Source URL.

Add it to Streamlabs

Open Streamlabs.
Add a Browser Source.
Paste the Browser Source URL from FlyHub.
Set the source size.
Save the source.

Start with FlyHub

Turn on Start with FlyHub if you want the stream overlay server to start automatically when FlyHub Desktop opens. This is useful if you stream often and do not want to start the overlay manually every time.

Dual PC or LAN acces

Use Dual PC / LAN access only when your streaming software runs on another computer on the same private network.

Turn on Run overlay now.
Turn on Dual PC / LAN access.
Copy the Streaming PC URL.
Paste that URL into OBS or Streamlabs on the streaming PC.

If FlyHub says no private LAN address was found, make sure both PCs are on the same private network.

Rotate the LAN URL

If you use Dual PC / LAN access, FlyHub creates an access token in the URL. Click Rotate to create a new URL. After rotating, update the browser source on the streaming PC. Use Rotate if you accidentally shared the URL or want to invalidate an old streaming PC URL.

Change the local port

Only change Local port if another app is already using the default overlay port.

Enter a port number between 1024 and 65535.
Click Apply.
Copy the new Browser Source URL.
Update OBS or Streamlabs.

Choose a theme

The Theme setting changes the overlay look.

Theme	Use it for
Primary	Default FlyHub dark stream style.
Day Mode	A lighter stream style.
Custom	Custom colors, custom CSS, and layout designer edits.

Custom colors

Custom colors only apply when Theme is set to Custom. You can change:

Primary background.
Primary text.
Primary border.
Secondary background.
Secondary text.
Accent.

Click Reset Custom if you want to return to the default custom colors.

Custom CSS

Custom CSS lets advanced users change the overlay style for OBS.

Set Theme to Custom.
Edit the Custom CSS box.
FlyHub saves changes automatically on this PC.

Use View Default to inspect the default CSS. Use Example to insert a starter CSS example. Example of custom CSS>

/*
  FlyHub Stream Overlay — "Techwear Brutalism" Theme
  -------------------------------------------------------
  An aggressive, esports-inspired UI featuring chamfered 
  corners, tactical caution stripes, and high-impact fonts.
*/

@import url('https://fonts.googleapis.com/css2?family=Teko:wght@500;700&family=JetBrains+Mono:wght@800&display=swap');

/* 1. Tactical Color Palette */
.fh-overlay[data-theme="custom"] {
  /* Matte dark gray/black */
  --fh-bg: #0f1115; 
  /* Off-white "paper" text */
  --fh-text: #ece8e1; 
  /* High-energy Esports Red */
  --fh-primary: #ff4655; 
  --fh-accent: #ff4655;
  --fh-border: #2b2e36;
  --fh-muted: #8b8f98;
  --fh-panel-soft: transparent;
}

/* 2. The Container (Chamfered "Cut" Edges) */
.fh-overlay[data-theme="custom"] .fh-display-grid {
  border: 1px solid var(--fh-border);
  /* Thick red accent line anchoring the bottom */
  border-bottom: 4px solid var(--fh-primary);
  border-radius: 0;
  /* CSS magic to cut off the top-left and bottom-right corners */
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  box-shadow: none;
}

/* 3. Panel Textures (Subtle Warning Stripes) */
.fh-overlay[data-theme="custom"] .fh-telemetry {
  position: relative;
  border-right: 2px solid var(--fh-border);
  /* Faint diagonal lines in the background */
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 70, 85, 0.04),
    rgba(255, 70, 85, 0.04) 4px,
    transparent 4px,
    transparent 8px
  );
}

.fh-overlay[data-theme="custom"] .fh-ident {
  border-left: 2px solid var(--fh-border);
}

/* 4. High-Impact Typography */
/* Tiny tags become blocky and mechanical */
.fh-overlay[data-theme="custom"] .fh-tag,
.fh-overlay[data-theme="custom"] .fh-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 800;
  color: var(--fh-muted);
}

/* Data fields use a tall, compressed, aggressive font */
.fh-overlay[data-theme="custom"] .fh-data {
  font-family: 'Teko', sans-serif;
  font-size: 26px; /* Teko needs to be larger to read well */
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: -4px; /* Adjusts Teko's natural baseline */
}

/* Airport codes get massive presence */
.fh-overlay[data-theme="custom"] .fh-point strong {
  font-family: 'Teko', sans-serif;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--fh-text);
  margin-top: -6px;
}

/* 5. Progress Bar (Hazard Tape Style) */
.fh-overlay[data-theme="custom"] .fh-progress-container {
  height: 8px;
  border-radius: 0;
  background: #1e2127;
  border: 1px solid var(--fh-border);
}

.fh-overlay[data-theme="custom"] .fh-progress-fill {
  background: var(--fh-primary);
  /* Adds black diagonal slashes over the red bar */
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(15, 17, 21, 0.6) 10px,
    rgba(15, 17, 21, 0.6) 20px
  );
  transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1); /* Snappy animation */
}

/* 6. Inverted "Sticker" Badges for specific data */
.fh-overlay[data-theme="custom"] .fh-data-wide {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 800;
  background: var(--fh-text);
  color: var(--fh-bg); /* Inverted text */
  padding: 4px 10px;
  /* Another angled cut for the badge itself */
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  text-transform: uppercase;
}

.fh-overlay[data-theme="custom"] [data-field="phase"] {
  color: var(--fh-primary);
}

Layout Designer

The Layout Designer lets you build a custom 16:9 overlay canvas. You can add:

Data layers.
Text layers.
Image layers.
Color blocks.

You can move, resize, reorder, and delete layers.

Data fields

Data layers can show live flight values such as:

Callsign.
Network.
Aircraft.
Origin and destination.
Ground speed.
Altitude.
Heading.
Vertical speed.
Progress.
ETA.
Status.
Phase.

These values update while FlyHub receives flight data.

Add a data layer

Open the Layout Designer.
Click Data.
Select the new layer.
Choose the Sim var / data field.
Adjust position, size, font, color, and suffix.

Add an image

Open the Layout Designer.
Click Image.
Select the image layer.
Click Import Image.
Choose a PNG, JPEG, WEBP, or GIF.
Adjust fit, size, and position.

Imported images are saved for the local stream overlay.

Apply changes

Click Apply after changing main overlay settings. Some designer and style changes are pushed automatically, but Apply is the safest way to make sure the overlay server has the latest configuration.

Live status

The Live Status panel shows:

Whether the overlay is running.
The active address.
LAN access status.
Whether flight data is being received.
Any overlay error.

If it says Waiting for flight data, start or resume a FlyHub flight.

​Stream Overlay

​Open Stream Overlay settings

​Start the overlay

​Add it to OBS

​Add it to Streamlabs

​Start with FlyHub

​Dual PC or LAN acces

​Rotate the LAN URL

​Change the local port

​Choose a theme

​Custom colors

​Custom CSS

​Layout Designer

​Data fields

​Add a data layer

​Add an image

​Apply changes

​Live status