A production-ready starter template for building Firebase-powered applications with SvelteKit and svelte-firekit. Includes interactive demos for every Firekit feature, authentication flows, and a polished UI built with shadcn-svelte.
- Svelte 5 with runes-based reactivity
- SvelteKit file-based routing with layout groups
- Firebase authentication, Firestore, Realtime Database, and Storage
- svelte-firekit reactive wrappers for all Firebase services
- shadcn-svelte component library with 30+ UI components
- Tailwind CSS v4 for styling
- TypeScript throughout
- Dark mode support via mode-watcher
- Form handling with sveltekit-superforms and Valibot/Zod validation
The starter includes 7 interactive demo pages showcasing Firekit features:
| Page | Route | Description |
|---|---|---|
| Overview | / |
User state dashboard and feature index |
| Authentication | /auth |
User profile, SignedIn/SignedOut components |
| Documents | /documents |
Real-time Firestore document subscriptions |
| Collections | /collections |
Collection queries with reactive updates |
| Mutations | /mutations |
CRUD operations, counters, field helpers |
| Realtime DB | /realtime |
Realtime Database nodes and lists |
| Storage | /storage |
File uploads with progress tracking |
| Presence | /presence |
Network status and offline detection |
- Node.js (v18+)
- A Firebase project with the following services enabled:
- Authentication (Email/Password and Google sign-in providers)
- Cloud Firestore
- Realtime Database
- Storage
- Clone the repository:
git clone https://github.com/code-gio/svelte-firekit-starter.git
cd svelte-firekit-starter- Install dependencies:
npm install- Configure Firebase by copying
.env.exampleto.envand filling in your Firebase project credentials:
cp .env.example .envPUBLIC_FIREBASE_API_KEY=your-api-key
PUBLIC_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
PUBLIC_FIREBASE_DATABASE_URL=https://your-project.firebaseio.com
PUBLIC_FIREBASE_PROJECT_ID=your-project-id
PUBLIC_FIREBASE_STORAGE_BUCKET=your-project.firebasestorage.app
PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your-sender-id
PUBLIC_FIREBASE_APP_ID=your-app-id
PUBLIC_FIREBASE_MEASUREMENT_ID=G-XXXXXXXXXX- Start the development server:
npm run devsrc/
├── lib/
│ ├── components/
│ │ ├── ui/ # shadcn-svelte components (button, card, sidebar, etc.)
│ │ ├── auth/ # Auth forms (sign-in, sign-up, forgot-password)
│ │ ├── layout/ # App sidebar, navigation, user menu
│ │ └── showcase/ # Demo page utilities (code blocks, sections)
│ ├── hooks/ # Svelte hooks (is-mobile)
│ ├── assets/ # Static assets (favicon)
│ ├── firebase.ts # Firebase app initialization
│ └── utils.ts # Utility functions (cn, getUserInitials)
├── routes/
│ ├── (auth)/ # Public auth routes (sign-in, sign-up, forgot-password)
│ └── (app)/ # Protected routes behind AuthGuard
│ ├── +page.svelte # Overview
│ ├── auth/+page.svelte # Authentication demo
│ ├── documents/+page.svelte # Firestore documents demo
│ ├── collections/+page.svelte # Collections demo
│ ├── mutations/+page.svelte # CRUD demo
│ ├── realtime/+page.svelte # Realtime DB demo
│ ├── storage/+page.svelte # Storage demo
│ └── presence/+page.svelte # Presence demo
└── app.d.ts # TypeScript type definitions
Run the included script to strip all demo content and get a clean starting point:
bash scripts/remove-demo.shThis script will:
- Remove all demo route pages (
/auth,/documents,/collections,/mutations,/realtime,/storage,/presence) - Remove showcase components (
demo-section,page-header,code-block) - Replace the overview page with a clean starter
- Reset the sidebar navigation to a single "Home" link
The script preserves the auth service pages (/sign-in, /sign-up, /forgot-password), the app layout with AuthGuard, and all UI components.
The demo pages store data under the firekit-demo path, scoped per user:
- Firestore:
firekit-demo/{userId}/profile,firekit-demo/{userId}/todos,firekit-demo/{userId}/counters/demo - Realtime Database:
firekit-demo/{userId}/counter,firekit-demo/{userId}/messages - Storage:
firekit-demo/{userId}/uploads/
To delete this data from your Firebase project:
- Firestore: In the Firebase Console, go to Firestore Database and delete the
firekit-democollection - Realtime Database: Navigate to Realtime Database and delete the
firekit-demonode - Storage: Go to Storage and delete the
firekit-demofolder
If you had set up rules for the demo paths, remove them and add rules for your own collections.
| Command | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Build for production |
npm run preview |
Preview production build |
npm run check |
Run svelte-check for type errors |
npm run check:watch |
Run svelte-check in watch mode |
| Category | Technology |
|---|---|
| Framework | SvelteKit v2 + Svelte v5 |
| Backend | Firebase v12 |
| Firebase SDK | svelte-firekit |
| UI Components | shadcn-svelte |
| Styling | Tailwind CSS v4 |
| Icons | Tabler Icons + Lucide |
| Forms | sveltekit-superforms |
| Validation | Valibot / Zod |
MIT