KMP Web Room

A minimal Kotlin Multiplatform project demonstrating Room 3 database running in the browser via Kotlin/Wasm and SQLite OPFS.

Data is stored persistently in the browser using the Origin Private File System (OPFS) — a real SQLite database that survives page refreshes.

Architecture

┌─────────────────────────────────────────────────────┐
│ commonMain │
│ ┌──────────┐ ┌──────────┐ ┌───────────────────┐ │
│ │NoteEntity│ │ NoteDao │ │ AppDatabase │ │
│ │ @Entity │ │ @Dao │ │ @ConstructedBy │ │
│ └──────────┘ └──────────┘ └───────────────────┘ │
│ │ │
│ expect getDatabaseBuilder() │
└────────────────────────────────────┬────────────────┘
│
┌────────────────────────────────────▼────────────────┐
│ wasmJsMain │
│ │
│ actual fun getDatabaseBuilder() │
│ Room.databaseBuilder(name = "notes.db") │
│ .setDriver(WebWorkerSQLiteDriver(...)) │
│ │ │
│ @JsFun → new Worker('worker.js') │
│ Web Worker thread │
│ ┌──────────────────┐ │
│ │ SQLite WASM │ │
│ │ OPFS storage │ │
│ └──────────────────┘ │
└─────────────────────────────────────────────────────┘

Tech Stack

Library	Version
Kotlin	2.3.20
Compose Multiplatform	1.10.3
Room	3.0.0-alpha03
AndroidX SQLite Web	2.7.0-alpha03
KSP	2.3.6
Koin	4.2.0

Run

./gradlew composeApp:wasmJsBrowserDevelopmentRun

Opens at http://localhost:8080.

Note: The dev server is configured with Cross-Origin-Opener-Policy and Cross-Origin-Embedder-Policy headers, required for SharedArrayBuffer / OPFS.

Project Structure

composeApp/
├── sqlite-wasm-worker/ # Local npm package — SQLite Web Worker
│ ├── package.json
│ └── worker.js
├── webpack.config.d/
│ └── cors-headers.js # COOP/COEP headers for OPFS
├── src/
│ ├── commonMain/kotlin/.../
│ │ ├── data/
│ │ │ ├── NoteEntity.kt # @Entity
│ │ │ ├── NoteDao.kt # @Dao with Flow
│ │ │ ├── AppDatabase.kt # @Database + @ConstructedBy
│ │ │ └── DatabaseBuilder.kt # expect fun
│ │ ├── di/
│ │ │ └── AppModule.kt # Koin module
│ │ └── ui/
│ │ ├── App.kt # Compose UI
│ │ └── NotesViewModel.kt # ViewModel with StateFlow
│ └── wasmJsMain/kotlin/.../
│ ├── data/
│ │ └── DatabaseBuilder.wasmJs.kt # actual — WebWorkerSQLiteDriver
│ └── main.kt # Entry point + Koin init
└── build.gradle.kts

How It Works

The Room database layer (Entity, DAO, Database) lives in commonMain — identical to Android. The only web-specific part is the actual fun getDatabaseBuilder() which uses WebWorkerSQLiteDriver to bridge Room with a SQLite instance running inside a Web Worker via OPFS.

The worker.js is the official AndroidX reference implementation and handles four commands over postMessage: open, prepare, step, close.

References

• Room 3.0 Release Notes — Full docs on Room KMP + Web setup
• WebWorkerSQLiteDriver source (KDoc) — Protocol specification
• Official worker.js reference — AndroidX source tree
• SQLite Wasm + OPFS (Chrome Blog) — Why SQLite needs a Web Worker for persistent storage
• SQLite Wasm persistence docs — OPFS VFS and browser compatibility
• Room 3.0 announcement (Android Developers Blog)

License

Copyright 2026 Georgios Karanikolas
Licensed under the Apache License, Version 2.0

See LICENSE for details.