Articles

What Is WebTransport? A Guide to the API

WebTransport is a browser API for low-latency, bidirectional client-server messaging over HTTP/3. How it works and when to reach for it.

Takina Takina · · 4 min read
Abstract illustration of a web API connecting client and server

WebTransport is a browser API that gives web applications a low-latency, bidirectional channel to a server, built on top of HTTP/3 and its underlying QUIC transport. It sits in an odd gap that neither WebSockets nor plain HTTP requests fill well: applications that need to send and receive many small, independent messages — game state, live cursors, sensor telemetry — without paying the price of a single ordered stream.

The problem it solves

WebSockets give you a single ordered, reliable stream between client and server. That’s fine for chat or a live feed, but it has a specific weakness: head-of-line blocking. If one message is delayed or the connection needs to retransmit a lost packet, every message queued behind it waits too, even if those later messages don’t depend on the stuck one at all.

HTTP requests, meanwhile, are one-shot: request, response, done. Server-sent events give you a one-way stream from server to client, covered in more detail in our piece on server-sent events vs WebSockets, but nothing native handles frequent, independent, bidirectional traffic without the ordering guarantees getting in the way.

WebTransport is built directly on QUIC, the same transport underneath HTTP/3, which multiplexes independent streams over a single connection at the transport layer rather than the application layer. Because QUIC runs over UDP instead of TCP, a lost packet on one stream doesn’t stall the others — each stream recovers independently.

What WebTransport actually offers

A WebTransport session exposes three ways to move data:

  • Datagrams — unreliable, unordered, fire-and-forget messages, similar in spirit to UDP packets. Best for data where the latest value matters more than every value: player position updates, live audio levels, cursor coordinates. If one is lost, you just wait for the next.
  • Unidirectional streams — ordered, reliable, one-way. Useful for pushing a sequence of data server-to-client (or client-to-server) where order matters but you don’t need a response on the same channel.
  • Bidirectional streams — ordered, reliable, two-way, and independent of every other stream on the connection. This is the closest analogue to a WebSocket connection, but you can open many of them without head-of-line blocking between them.

A single WebTransport session can mix all three simultaneously. A multiplayer game might send player position over unreliable datagrams while sending chat messages over a reliable bidirectional stream — losing a position update is fine, losing a chat message isn’t.

WebTransport vs WebSockets vs HTTP/3

WebSocketsServer-sent eventsWebTransport
DirectionBidirectionalServer to client onlyBidirectional
TransportTCPTCP (over HTTP)QUIC (over UDP)
OrderingSingle ordered streamOrderedPer-stream; datagrams unordered
Head-of-line blockingYes, across all messagesYesNo, streams are independent
Unreliable delivery optionNoNoYes, via datagrams
Multiple concurrent streamsNo (one connection = one stream)NoYes
Browser supportUniversalUniversalModern browsers only

The takeaway from the table: WebSockets remain the simpler, more broadly supported choice for a single ordered channel. WebTransport earns its complexity when an application specifically needs multiple independent streams, unreliable delivery, or wants to avoid head-of-line blocking under packet loss — conditions that matter most on lossy or high-latency networks like mobile connections.

Where it fits in practice

WebTransport is best suited to applications that already think in terms of network protocols rather than simple request-response: real-time multiplayer games, live media and screen-sharing tools, IoT dashboards ingesting frequent sensor readings, and collaborative editors syncing cursor and selection state alongside the actual document content (which might still go over a reliable stream).

It is not a replacement for REST APIs or GraphQL for typical request-response data fetching — those workloads don’t benefit from datagrams or multiplexed streams, and the added complexity of session and stream management isn’t worth it. It’s also not a drop-in WebSocket replacement; code has to be restructured around streams and datagrams rather than a single message event.

On the server side, WebTransport requires HTTP/3 and QUIC support, which is a heavier lift than a WebSocket server that can run over plain TCP. Several web frameworks and reverse proxies have added support, but it’s worth checking your hosting and CDN provider’s HTTP/3 support before committing to it for a production feature.

Security and connection setup

A WebTransport connection starts with an HTTPS-like handshake — it requires a valid TLS certificate, same as any HTTP/3 endpoint — and the browser API mirrors that: new WebTransport(url) where url uses the https:// scheme. There’s no equivalent to the ws:// unencrypted mode that WebSockets allow; every WebTransport session is encrypted end to end by construction.

Because it’s built on the same QUIC connection machinery as HTTP/3, WebTransport also inherits QUIC’s fast connection migration — a session can survive a client switching networks (say, moving from Wi-Fi to cellular) without a full reconnect, something neither WebSockets nor plain HTTP handles natively.

The takeaway

WebTransport is a QUIC-based API for bidirectional, multi-stream communication that avoids the head-of-line blocking inherent to a single WebSocket connection, and adds an option for genuinely unreliable, low-overhead datagrams. It’s the right tool for real-time applications with many independent, latency-sensitive data flows — games, live collaboration, streaming telemetry — and the wrong tool for ordinary API traffic, where a REST endpoint or a single WebSocket connection remains simpler to build, deploy, and support across browsers.

The Lycoris Team The Lycoris Team · · 5 min read

Head-of-Line Blocking Explained: HTTP/1.1, HTTP/2, QUIC

Head-of-line blocking is when one stalled item holds up everything queued behind it. How it affects HTTP/1.1, HTTP/2 over TCP, and how QUIC fixes it.

#Networking #Web Development #Performance
Takina Takina · · 4 min read

The Server-Timing Header Explained

The Server-Timing HTTP header exposes backend performance metrics — database time, cache hits — directly in the browser's DevTools network panel.

#Web Development #Performance #Networking
Takina Takina · · 4 min read

HTTP Range Requests and Partial Content, Explained

HTTP range requests let a client ask for just part of a resource, enabling video seeking, resumable downloads, and partial file fetches over HTTP.

#Networking #Web Development #Performance