Network & Offline

Reactive network status

firekitNetwork is a reactive singleton that tracks browser connectivity, Firestore sync state, and unconfirmed writes. It initializes automatically on first access.

<script lang="ts">
  import { firekitNetwork } from 'svelte-firekit';
</script>

{#if !firekitNetwork.online}
  <p>You're offline. Changes will sync when reconnected.</p>
{/if}

{#if firekitNetwork.hasPendingWrites}
  <p>Saving...</p>
{:else}
  <p>All changes saved</p>
{/if}

Reactive properties

Property	Type	Description
online	boolean	Browser has network connectivity
synced	boolean	All Firestore snapshots are in sync with the server
hasPendingWrites	boolean	There are unconfirmed Firestore writes
initialized	boolean	The network store has been initialized
error	NetworkError | null	Last error from network operations
firestoreEnabled	boolean	Firestore network is currently enabled

Tracking writes

Call trackWrite() after performing a Firestore mutation to show a pending state until the write is acknowledged.

import { firekitNetwork, firekitMutations } from 'svelte-firekit';

await firekitMutations.update('posts/my-post', { title: 'Updated' });
firekitNetwork.trackWrite();
// firekitNetwork.hasPendingWrites is now true until Firestore confirms the write

Manual offline / online control

Force Firestore into offline mode or reconnect programmatically.

// Go offline — all reads come from cache, writes are queued
await firekitNetwork.goOffline();

// Reconnect — queued writes are sent to the server
await firekitNetwork.goOnline();

<NetworkStatus> component

The <NetworkStatus> component provides a declarative way to render UI based on network and sync state using Svelte 5 snippets.

<script lang="ts">
  import { NetworkStatus } from 'svelte-firekit';
</script>

<NetworkStatus>
  {#snippet online()}
    <span class="dot green" />
  {/snippet}
  {#snippet offline()}
    <span class="dot red">You are offline</span>
  {/snippet}
  {#snippet pending()}
    <span>Saving...</span>
  {/snippet}
</NetworkStatus>

Snippets

Name	Rendered when
online	Browser is online and all writes are synced
offline	Browser is offline
pending	There are pending Firestore writes