Skip to content

Quick Start Guide

Get DevView up and running in your application in just a few minutes!

Step 1: Create Your App Structure

Set up your main app structure and state for DevView.

@Composable
fun App() {
    var isDevViewOpen by remember { mutableStateOf(false) }
    Box {
        // Your main app content
        MainAppContent()
        // Add DevView here
    }
}

Step 2: Configure Modules

Configure which DevView modules you want to use.

val modules = rememberModules {
    module(FeatureFlip)
    module(Analytics())
    module(NetworkMock(resourceLoader = NetworkMockResourceLoader { path -> Res.readBytes(path) })) // Optional
}

Step 3: Add DevView

Add DevView to your composable tree and wire up open/close logic.

DevView(
    devViewIsOpen = isDevViewOpen,
    closeDevView = { isDevViewOpen = false },
    modules = modules
)

Complete Example

import com.worldline.devview.DevView
import com.worldline.devview.core.rememberModules
import com.worldline.devview.featureflip.FeatureFlip
import com.worldline.devview.analytics.Analytics
import com.worldline.devview.networkmock.NetworkMock

@Composable
fun App() {
    var isDevViewOpen by remember { mutableStateOf(false) }
    val modules = rememberModules {
        module(FeatureFlip)
        module(Analytics())
        module(NetworkMock(resourceLoader = NetworkMockResourceLoader { path -> Res.readBytes(path) }))
    }
    Box(modifier = Modifier.fillMaxSize()) {
        MainAppContent()
        DevView(
            devViewIsOpen = isDevViewOpen,
            closeDevView = { isDevViewOpen = false },
            modules = modules
        )
        FloatingActionButton(
            onClick = { isDevViewOpen = true }
        ) {
            Icon(Icons.Default.DeveloperMode, null)
        }
    }
}

Custom Modules

See the Creating Custom Modules guide for a full example.

Troubleshooting

For common integration issues, see the troubleshooting section.

Next: Configuration →