Setting up the viewport

Compose Multiplatform for web uses the ComposeViewport function to render your UI onto an HTML canvas. It does not inject global CSS styles, giving you full control over how your application integrates with the HTML structure.

To correctly fit the content within the browser window, apply explicit CSS to the host container. If no CSS is specified, the canvas may not resize correctly or fill the intended space.

Here is a standard styles.css example to make the content fill the entire screen:

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

Then, initialize the entry point in the main function of your web source set:

@OptIn(ExperimentalComposeUiApi::class)
fun main() {
    ComposeViewport(viewportContainerId = "composeApp") {
        App()
    }
}

What's next?

Learn how to handle web-specific resources.
Read more about Kotlin/Wasm and Compose Multiplatform.

20 February 2026