SvelteKit + Capacitor Example

Example project demonstrating how to build iOS, Android, and web apps from a single SvelteKit codebase using Capacitor.

What this is

A working example of cross-platform development using:

• SvelteKit for the application logic
• Capacitor for native iOS and Android containers
• Cloudflare for web deployment

One codebase. Three platforms. Shared types between frontend and backend.

Features

• Build scripts for all platforms (iOS, Android, web)
• Mobile live reload for faster development
• Platform-specific code gating examples
• Cross-platform compatible npm scripts (Windows + Mac)

Quick start

# Install dependencies
bun i --force

# Build for Capacitor
bun run build:capacitor

# Sync to platforms
bun run cap:sync:ios
bun run cap:sync:android

# Run on iOS simulator
bun run cap:run:ios

# Run on Android
bun run cap:run:android

Full guide

Read the complete implementation guide: Full guide

Covers:

• Why this approach vs React Native or native development
• Detailed setup instructions
• Mobile live reload configuration
• Cloudflare deployment
• Tradeoffs and when not to use this

Credits

Built on the work of Stanislav Khromov):

• Understanding adapter-static in SvelteKit
• Publishing apps with SvelteKit and Capacitor

Requirements

• macOS for iOS builds (Xcode requirement)
• Android Studio for Android builds
• Bun (or npm/pnpm/yarn)

Production app

See this approach in production: EATView