Introduction

svelte-firekit is a complete Firebase integration library for Svelte 5 and SvelteKit. It wraps every major Firebase service in reactive primitives built with Svelte 5 runes ($state, $derived) so that your UI automatically updates when Firebase data changes — without stores, without manual subscriptions, and without cleanup boilerplate.

Design goals

Svelte 5 runes throughout

Every reactive piece of state in svelte-firekit is a plain class property powered by $state. There are no Svelte stores. You read .data, .loading, .error directly — Svelte’s reactivity system does the rest.

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

  const post = firekitDoc<Post>('posts/my-post');
</script>

<!-- Svelte re-renders whenever post.data changes -->
{#if post.loading}
  <p>Loading…</p>
{:else if post.data}
  <h1>{post.data.title}</h1>
{/if}

SSR-safe by default

No service makes network calls on the server. Every reactive instance returns safe defaults (loading: false, data: null, empty arrays) during SSR so your pages render without Firebase credentials or browser APIs. Client-side hydration then kicks in and opens the real-time listener.

Works without SvelteKit

svelte-firekit never imports $app/* or $env/*, so it works in any Svelte 5 project — Vite, plain SvelteKit, or custom setups.

Two APIs, one library

Class / function API — instantiate a reactive object in <script> and read its properties directly in your template.

Component API — use <Doc>, <Collection>, <AuthGuard>, etc. for a declarative, slot-driven approach.

Both APIs are first-class and cover the same surface area. Pick the style that fits your project.

Covered Firebase services

Area	Services
Auth	Email, OAuth, Phone, MFA, SAML, OIDC, Anonymous, Custom token
Firestore	Documents, collections, collection groups, queries, pagination, batch, transactions, bundles
Realtime Database	Nodes, lists, presence
Storage	Download URLs, uploads, directory listings, metadata
AI	Gemini generation, streaming, multi-turn chat (Google AI + Vertex AI)
Functions	Callable functions by name or URL
Monitoring	Analytics, Performance Monitoring, Remote Config
Messaging	FCM push notifications, In-App Messaging
Platform	App Check, Presence tracking

Next steps

• Installation & Setup — install the package and initialize Firebase
• Authentication — sign in, reactive user state, route guards
• Firestore Documents — reactive document subscriptions