Visualizes network calls in client-server applications, utilizing a room database for log storage and offering integration with Compose for user interface. Demonstrates functionality across mobile and desktop environments.
A Kotlin Multiplatfrom library to visualize network calls when using Ktor client in CMP apps.
Demos:
Android
Desktop
iOS
The library currently uses Compose multiplatfrom for UI (can be native UI later if the host app is not using CMP). The library uses room DB for storing network logs.
The repo includes sample project and a Ktor server to test the APIs locally.
Adding the dependency
// Add this to common main dependencies
// Make sure you don't ship this to production unless you really know what you are doing
commonMain.dependencies {
implementation("io.github.chethann:network-monitor:<latest-version>")
}
// Make sure mavenCentral() is added in the list of repositories to resolve dependencies
All composable screens now rely on a unified Material theme with light/dark support and semantic colors (success, warning, info, pending, highlight, etc.).
Wrap any usage of the library UI with NetworkMonitorTheme (import io.github.chethann.network.monitor.view.theme.NetworkMonitorTheme).
import io.github.chethann.network.monitor.view.theme.NetworkMonitorTheme
import io.github.chethann.network.monitor.view.components.NetworkCallsListFullView
@Composable
fun NetworkMonitorContainer(calls: List<NetworkCallEntity>) {
NetworkMonitorTheme { // Automatically picks system dark mode
NetworkCallsListFullView(
networkCalls = calls,
lazyListState = rememberLazyListState(),
onClearClick = { /* clear */ },
onSearchClick = { /* search */ },
onRefreshClick = { }
)
}
}
Access extended semantic colors inside components via:
val extended = MaterialTheme.extendedColors
Text("Status", color = extended.success)
If you want to provide a custom Colors palette you can pass it to NetworkMonitorTheme(colors = myColors).
You can opt into a terminal-inspired dark palette (neon green, cyan, amber accents) by setting the style parameter:
import io.github.chethann.network.monitor.view.theme.NetworkMonitorTheme
import io.github.chethann.network.monitor.view.theme.NetworkMonitorThemeStyle
@Composable
fun TerminalStyledMonitor(calls: List<NetworkCallEntity>) {
NetworkMonitorTheme(
style = NetworkMonitorThemeStyle.Terminal, // Forces terminal palette (dark only for now)
darkTheme =
) {
NetworkCallsListFullView(
networkCalls = calls,
lazyListState = rememberLazyListState(),
onClearClick = { },
onSearchClick = { },
onRefreshClick = { }
)
}
}
NetworkMonitorThemeStyle.Terminal provides:
#1E1F22 / #26282B)Fallback style is NetworkMonitorThemeStyle.Default if you omit the parameter.
The provided NetworkCallsView() now includes a simple top bar with buttons to switch:
If you embed lower‑level composables directly, you can replicate this by holding state:
var dark by remember { mutableStateOf(true) }
var style by remember { mutableStateOf(NetworkMonitorThemeStyle.Default) }
NetworkMonitorTheme(darkTheme = dark, style = style) { /* content */ }
Adding the plugin to Ktor
HttpClient {
install(NetworkCallsMonitor)
}
Android
// In the application class
NetworkMonitorInitializer.init {
context = this@KotlinApplication
}
A new activity which can be launched in a new task is added when you include the library.
Desktop
// In the main application function
NetworkMonitorInitializer.init {
appName = "MyNetworkTest" // Default value: networkMonitor
bdDirectory = "${System.getProperty("java.io.tmpdir")}/db"
}
/** Customise bdDirectory to choose DB file path.
Default values:
"${System.getenv("LOCALAPPDATA")}/<appName> on windows
"${System.getProperty("user.home")}/Library/Application Support/<appName>" om mac
"${System.getProperty("user.home")}/.local/share/<appName>" on Linux
*/
// Add a new window to monitor network logs
Window(
onCloseRequest = ::exitApplication,
title = "KotlinProject",
) {
NetworkCallsView()
}
iOS
/**
There is no eqivalent of multiple windows or multiple tasks in iOS. NetworkCallsView can be added based you your needs.
One such example (from the Demo above)
*/
fun MainViewController() = ComposeUIViewController { IOSView() }
@Composable
fun IOSView() {
Column(modifier = Modifier.fillMaxSize()) {
Box(modifier = Modifier.fillMaxWidth().fillMaxHeight(0.5f)) {
App()
}
Box(modifier = Modifier.fillMaxWidth()) {
NetworkCallsView()
}
}
}
If you want to clone the repo and test the sample app. You can run the Ktor server embedded using the below command
./gradlew testServer:run
Surfaced from shared tags and platforms — no rankings paid for.