s-offline is an open-source Svelte 3 component that detects when a browser goes offline or online and lets you show different UI for each state through named slots. It is maintained by Vinayak Kulkarni, released under the MIT license, and available on npm and CDN.
What is s-offline?
s-offline is a Svelte 3 component that listens for the browser's online and offline events and reports the connection status to your app. It takes an optional pingUrl prop (default https://google.com) to double-check connectivity by pinging that URL, and it produces a detectedCondition event with a boolean value so your components can react. The package is built with TypeScript, includes type definitions, and is distributed through npm, UNPKG, and jsDelivr. The library is maintained by Vinayak Kulkarni and is inspired by v-offline, a similar component for Vue.js.
Key Features
- Online/offline event detection — Listens to the browser's native
onlineandofflineevents, so your Svelte app updates without manual polling. - pingUrl prop — Accepts a URL string (default
https://google.com) that is pinged to double-check whether the user is actually offline before the state changes. - detectedCondition event — Emits a value every time connectivity flips, letting parent components run custom logic such as logging or syncing.
- Named slots — Provides
onlineandofflineslots so you can render any Svelte markup (text, emoji, icons) depending on the current state. - TypeScript support — Built from scratch in TypeScript, so the npm package ships type definitions for editor autocompletion and type checking.
- CDN builds — Available as a global
SOfflinescript on UNPKG and jsDelivr, allowing use without a bundler. - StackBlitz demo — An interactive demo is linked from the README so you can try the component in the browser before installing.
Who should use s-offline?
- Svelte app developers — Add a connection-status indicator to any Svelte 3 app by dropping the component in and using the online/offline slots for custom text or icons.
- PWA and mobile-web developers — Detect connectivity loss and use the
detectedConditionevent to queue network requests, disable forms, or show a message that data will sync later. - Component library maintainers — Reuse SOffline as a self-contained building block in a larger Svelte component library, since it depends only on Svelte and TypeScript and exports typed props/events.
- Developers migrating from Vue — Replace a v-offline usage with the same pattern in Svelte, since s-offline is explicitly inspired by v-offline.
Use cases
- Network-dependent dashboards: Show a large emoji or banner when the connection drops by placing content in the
offlineslot and a happy state in theonlineslot. - Form-heavy applications: Listen for the
detectedConditionevent and prevent form submission or warn users when a ping to your own API endpoint (set viapingUrl) fails. - SvelteKit projects: Import
SOfflinein a layout and drive a store or global state from thedetectedConditionevent to reflect connectivity across pages.
How does s-offline work?
The component subscribes to the browser's online and offline events and pings the URL provided in the pingUrl prop (default https://google.com) to double-check the actual network state. When the state changes, it emits a boolean value through the detectedCondition event and toggles the rendered slot between online and offline.
Alternatives
- v-offline — the Vue.js component that s-offline was inspired by; choose this if your project is built with Vue 2/3 instead of Svelte.
FAQ
How do I install s-offline?
Run npm install --save s-offline in a Svelte 3 project, or load the pre-built script from UNPKG or jsDelivr, where it is available globally as SOffline.
What Svelte version does s-offline require?
The README lists Svelte 3 as the requirement. If you are using Svelte 4 or 5, the component may need testing or a compatibility check before use.
What props does the component accept?
SOffline accepts one optional prop: pingUrl, a string that defaults to https://google.com. It is the URL pinged to double-check whether the user is offline or online.
What does the detectedCondition event return?
The README states that the detectedCondition event returns a value (described as a boolean) every time the network condition changes, so you can pass it to a handler like handleNetworkChange.
Is s-offline open source?
Yes, the project is released under the MIT license and is available on GitHub, where it has a public repository and contributions are welcome.
