Recording a Composable

printer-compose allows you to record a composable in real time, generating a continuous flow of ImageBitmap frames.

This is useful for:

• Dynamic UI previews
• Time-based visual exports
• Debug purposes
• ??

---

Basic Usage

@Composable
fun App() {
    var count by remember { mutableStateOf(0) }

    // increment counter every second
    LaunchedEffect(Unit) {
        while (true) {
            delay(1000)
            count++
        }
    }

    // record at 1 frame per second
    val screenshotState = rememberScreenshotState(refreshRate = 1.seconds)

    // collect the emitted frames
    val frame by screenshotState.startRecording().collectAsState(null)

    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        frame?.let {
            Image(bitmap = it, contentDescription = "Recorded frame")
        }

        ScreenshotArea(screenshotState) {
            Text("Count: $count")
        }
    }
}

How It Works

startRecording() internally:

1. Creates a loop based on refreshRate and returns a Flow<ImageBitmap>
2. Renders your composable using the state’s GraphicsLayer
3. For every iteration it checks if the graphics layer has area higher than 0, if not it skips the frame
4. When the area is higher than 0, it converts the graphics layer from your composable to a ImageBitmap
5. Emits the latest ImageBitmap