Record an app running on your computer

Screen Browser records your app in the cloud, so it needs an https address it can open. localhost only exists on your computer. A tunnel gives your local app a public https address for as long as the tunnel runs, and Screen Browser records that address like any deployed app. Your guides stay exactly as they are.

Both tools below are free. Start your app first, note the port it runs on (3000 in the examples), then open the tunnel.

ngrok

1. Install ngrok and create a free account.

2. Connect it to your account once: ngrok config add-authtoken <your token>

3. Open the tunnel:

   ngrok http 3000
   

4. Copy the Forwarding address, for example https://1a2b-203-0-113-7.ngrok-free.app, and use it as the project's address and in your guides' Go to lines.

ngrok's free plan shows visitors a "You are about to visit…" page before the app. Screen Browser skips it for you, so it never appears in your videos and your guides need no extra step.

Keep the same address. The free plan includes one fixed domain (ngrok dashboard › Domains). Start the tunnel with it and the address stays the same every time, so your project and guides keep working:

ngrok http --url=your-name.ngrok-free.app 3000

Cloudflare Tunnel

1. Install cloudflared. No account needed.

2. Open the tunnel:

   cloudflared tunnel --url http://localhost:3000
   

3. Copy the https://….trycloudflare.com address it prints and use it as the project's address and in your guides' Go to lines.

A quick tunnel gets a new address every time it starts. For a fixed address, set up a named tunnel on a domain of your own.

When the address changes

A new address is a new app as far as recording goes: update the project's address on its Connection tab (or with update_project), change the Go to lines in your guides, and confirm the attestation for the new address. A fixed address avoids all three.

Good to know

• Keep the app and the tunnel running until the video is finished.
• Use demo data. While the tunnel runs, anyone with the address can reach your app. Sign in with a demo account and stop the tunnel when you are done.
• Everything the page loads must be reachable too. If your frontend calls an API on another local port, the recording browser cannot reach localhost:8000 either. Tunnel the API as well and list its address under allowed hosts, or serve both from one port.
• One video at a time. Some development servers answer one request at a time; recording two videos of the same local app at once can make sign-in time out.

With a coding agent

Tell your agent the app only runs on your computer. It can start the app and the tunnel, use the tunnel's address for the project and the guides, and record the video, all in the same session. See For coding agents.