# net-watch

- [Introduction](/docs): net-watch tells your app whether the user can really reach the internet, and how good the connection is.
- [Quick start](/docs/quick-start): Install net-watch, watch the connection and show an offline banner in a few minutes.
- Concepts
  - [Why net-watch](/docs/concepts/why-net-watch): What navigator.onLine really tells you, why polling is the wrong fix, and what net-watch does instead.
  - [How it works](/docs/concepts/how-it-works): Signals go in, one immutable state comes out. A walk through the watcher, the probe and the quality metrics.
  - [Detecting offline](/docs/concepts/detecting-offline): The three layers of evidence, the rules that combine them, and what net-watch can and cannot detect.
  - [Network quality](/docs/concepts/network-quality): How net-watch turns latency samples into a quality band, where downlink comes from, and what the browser cannot tell you.
  - [Browser support](/docs/concepts/browser-support): The support floor, which platform APIs net-watch uses, and the browser quirks it handles for you.
- Guides
  - [Add a ping endpoint](/docs/guides/ping-endpoint): Give net-watch a tiny same-origin URL to probe, so it can tell "connected to Wi-Fi" from "can reach the internet".
  - [Measure with watchFetch](/docs/guides/watch-fetch): Turn your app's real requests into free latency samples and early warnings of a network failure.
  - [Offline banner](/docs/guides/banner): Show a floating banner for offline, slow and back-online states with one function call, and theme it with CSS variables.
  - [SSR and hydration](/docs/guides/ssr): What net-watch does on the server, and how to avoid hydration mismatches in React, Next.js, Vue, Nuxt and Angular.
  - [Integrations](/docs/guides/integrations): Feed Capacitor, a service worker or any other source into net-watch with watcher.report(), and drive TanStack Query from it.
- Frameworks
  - [React](/docs/frameworks/react): Read the connection state in a React component with the useNetworkStatus hook.
  - [Vue](/docs/frameworks/vue): Read the connection state in a Vue component with the useNetworkStatus composable.
  - [Angular](/docs/frameworks/angular): Read the connection state in an Angular component with the injectNetworkStatus signal.
- Reference
  - [API reference](/docs/reference/api): Every export of @net-watch/core, its options, methods and defaults.
  - [State reference](/docs/reference/state): The NetworkState object, every field, which browsers provide it, and the exported types.
- AI
  - [Use net-watch with AI](/docs/ai/use-with-ai): Give your coding assistant the docs in the right format, and use ready-made prompts and a rules snippet.