A comprehensive guide to building single-page applications with WarpKit — the Svelte 5 SPA framework with state-based routing, type-safe data fetching, schema-driven forms, and real-time WebSocket support.
This guide is for frontend developers who want to build robust, production-ready single-page applications with Svelte 5. Whether you're starting a new project or evaluating WarpKit for an existing one, this guide will take you from zero to deep understanding.
Prerequisites:
- Familiarity with Svelte (ideally Svelte 5 and runes)
- Basic TypeScript knowledge
- Understanding of SPAs (single-page applications) vs. multi-page apps
- Introduction & Philosophy — What WarpKit is, why it exists, and the design principles behind it
- Quick Start — Get a WarpKit app running in 5 minutes
- State-Based Routing — The core innovation: routes organized by application state
- The Navigation Pipeline — How every navigation flows through 10 predictable phases
- The Provider System — Pluggable abstractions for browser APIs
- Data Fetching & Caching — Config-driven data layer with E-Tag caching
- Forms & Validation — Schema-driven forms with deep proxy binding
- WebSockets & Real-Time — Type-safe real-time communication
- Authentication — Pluggable auth adapter pattern
- Testing — Mock providers, assertion helpers, and testing strategies
- Architecture & Design Decisions — Why WarpKit is built the way it is
| Package | Purpose |
|---|---|
@warpkit/core |
Router, state machine, events, components |
@warpkit/data |
Data fetching, caching, mutations |
@warpkit/cache |
MemoryCache, StorageCache, ETagCacheProvider |
@warpkit/forms |
Schema-driven form state management |
@warpkit/validation |
StandardSchema validation utilities |
@warpkit/websocket |
WebSocket client with reconnection |
@warpkit/auth-firebase |
Firebase authentication adapter |
@warpkit/types |
Shared TypeScript types |
WarpKit is open source software.