btw: MoQ is under active development. The APIs and protocols are still evolving and will change. Most of this documentation is AI generated until things get more stable.

Media over QUIC

TypeScript Libraries ​

The TypeScript implementation brings MoQ to web browsers using modern APIs like WebTransport and WebCodecs.

Core Libraries ​

@moq/net ​

npm

Core pub/sub transport protocol for browsers. Implements the moq-lite specification.

Features:

  • WebTransport-based QUIC
  • Broadcasts, tracks, groups, frames
  • Browser and server-side support (with polyfill)

Learn more

@moq/hang ​

npm

High-level media library with Web Components for streaming audio and video.

Features:

  • Web Components (easiest integration)
  • JavaScript API for advanced use
  • WebCodecs-based encoding/decoding
  • Reactive state management

Learn more

Media Packages ​

@moq/watch ​

npm

Subscribe to and render MoQ broadcasts. Includes both a JavaScript API and a <moq-watch> Web Component, plus an optional <moq-watch-ui> overlay.

Learn more

@moq/publish ​

npm

Publish media to MoQ broadcasts. Includes both a JavaScript API and a <moq-publish> Web Component, plus an optional <moq-publish-ui> overlay.

Learn more

Utilities ​

@moq/signals ​

Reactive signals library used by hang for state management.

Learn more

@moq/clock ​

Clock utilities for timestamp synchronization.

@moq/token ​

JWT token generation and verification for browsers.

Learn more

Installation ​

bash
bun add @moq/net
bun add @moq/watch
bun add @moq/publish

# or with npm
npm install @moq/net
npm install @moq/watch
npm install @moq/publish

Pick the channel that matches where your code runs:

  • Browser with a bundler (Vite, esbuild, webpack) - install the packages above and import them. This is the standard path. See Web Components.

  • Browser, no build step - load straight from a CDN, no install required:

    html
    <script type="module">
    import "https://cdn.jsdelivr.net/npm/@moq/watch/element/+esm";
    import "https://cdn.jsdelivr.net/npm/@moq/publish/element/+esm";
</script>

    esm.sh works the same way. Great for demos and embeds. See Loading from a CDN.

  • Server-side (Node, Bun, Deno) - install @moq/net and set up a transport. @moq/hang is browser-only. See Server-side JS.

Quick Start ​

Using Web Components ​

The easiest way to add MoQ to your web page:

html
<!DOCTYPE html>
<html>
<head>
    <script type="module">
        import "@moq/publish/element";
        import "@moq/watch/element";
    </script>
</head>
<body>
    <!-- Publish camera/microphone -->
    <moq-publish
        url="https://relay.example.com/anon"
        name="room/alice.hang"
        audio video controls>
        <video muted autoplay></video>
    </moq-publish>

    <!-- Watch the stream -->
    <moq-watch
        url="https://relay.example.com/anon"
        name="room/alice.hang"
        controls>
        <canvas></canvas>
    </moq-watch>
</body>
</html>

Learn more about Web Components

Using JavaScript API ​

For more control, use the JavaScript API directly. See the js/net/examples/ directory for working examples of connecting, publishing, subscribing, and discovery.

Learn more about @moq/net

Browser Compatibility ​

Requires modern browser features:

  • WebTransport - Chromium-based browsers (Chrome, Edge, Brave)
  • WebCodecs - For media encoding/decoding
  • WebAudio - For audio playback

Supported browsers:

  • Chrome 97+
  • Edge 97+
  • Brave (recent versions)

Experimental support:

  • Firefox (behind flag)
  • Safari (future support planned)

Framework Integration ​

The reactive API works with popular frameworks:

Use @moq/watch/ui and @moq/publish/ui for ready-made Web Component overlays.

Demo Application ​

Check out the demo for complete examples:

  • Video conferencing
  • Screen sharing
  • Text chat
  • Quality selection

Next Steps ​

Licensed under MIT or Apache-2.0

Copyright © 2026-present moq.dev