Hey guys, are there any workarounds or ways to implement SEO for Compose WASM?

Are there any ways to improve the loading speed when using WASM? It takes like 3 seconds for a relatively simple app to display its UI. During that loading it's just a blank white screen I'm already using the release build

@Pau Marzo I have a hack to get the updated density as a StateFlow:

package org.eski.ui.util

import androidx.compose.runtime.Composable
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.Density
import kotlinx.coroutines.flow.MutableStateFlow

val screenDensity = MutableStateFlow<Density>(Density(1f))

@Composable fun DensityObserver() {
  with(LocalDensity.current) {
    screenDensity.value = this
  }
}

Just add the DensityObserver to the root composable

Hi, Is there an official approach for loading modules and dependencies layzily in Kotlin/JS or WASM? Currently, the entire application is bundled into a single JS or WASM file, which isn’t ideal due to the large final size of the web app. Even with production optimizations, caching and GZIP compression, the file remains quite large. I’m looking for a way to separate shared libraries like Koin and Ktor—since they remain consistent across all web apps and rarely change—into standalone JS or WASM files that can be cached. This would allow users to download only the business logic and UI components, which change with each app version. Additionally, these parts could be further split into separate files as needed for better modularity and performance.

For anyone using

bindToNavigation

, what's the right way to navigate back in common code? Neither

popBackStack

nor

navigateUp

replicate browser back for me. Normal navigation does something like: A -> B -> C -> browser back -> B -> browser back -> A Whereas the nav methods go: A -> B -> C -> popBackState/navigateUp -> B -> browser back -> C -> browser back -> B

How does one get a file input in compose web?

Hi, I tested the latest version of Compose Multiplatform (Kotlin 2.1.20 and Compose 1.8.0-beta1). On the mobile browser, the keyboard issue has been fixed, and it opens properly. Also, the page no longer shifts to the right. However, the keyboard still does not open in WebView. Another issue is that when selecting TextField on a browser, the UI freezes instead of displaying the expected popup menu for copy-paste actions. Related Issue https://youtrack.jetbrains.com/issue/CMP-7298/Keyboard-Not-Opening-and-Page-Shifting-on-Focus-in-Compose-Web-App-within-Android-WebView

Hey folks! For those who were having trouble figuring out a clean and reliable way to handle translations and localization in Compose Web, I’ve built a lightweight library that just works — and plays nicely with

CompositionLocal

and Compose idioms. 🔧 What it does: • Lets you use

t("key")

anywhere in your composables • Switch languages at runtime with

LocalizationProvider

• Designed specifically for Compose Web (WASM) • Minimal setup, no magic, no boilerplate Available on Maven Central Github: https://github.com/MohammadNasrallahBlank/kmp-localize It’s already powering my own WASM apps — feel free to try it out, break it, and share any feedback! Would love to hear if it helps or if you spot ways it can improve ✌️

Anyone currently using compose preview with IntelliJ EAP ? I'm getting

Could not resolve org.jetbrains.compose.ui:ui-tooling-preview:1.8.0-alpha03. ... No matching variant

when trying to run the wasm app.. No idea how to bypass this without commenting out

compose.preview

and

compose.uiTooling

.. which will then cause compose preview to stop working..

I get this error

Error code: 5

on Chrome when i run

wasmBrowserProductionRun

works ok on Firefox and even Safari but Chrome is crashing without any stacktrace. Normal

wasmBrowserRun

works fine. Any idea how to debug this?

Hey guys, I'm wondering, isn't the fact that Compose renders to a fullscreen canvas a huge accessibility issue, which would make it unusable in most cases, considering being accessible is required by law?

I noticed this

// Serve sources to debug inside browser

in the kmp wizard. Is the devServer only available in deb builds? Is it safe to assume that

webBrowserDistribution

doesnt include it?

@OptIn(ExperimentalWasmDsl::class)
    wasmJs("web") {
        moduleName = "composeApp"
        browser {
            val rootDirPath = project.rootDir.path
            val projectDirPath = project.projectDir.path
            commonWebpackConfig {
                outputFileName = "composeApp.js"
                devServer = (devServer ?: KotlinWebpackConfig.DevServer()).apply {
                    static = (static ?: mutableListOf()).apply {
                        // Serve sources to debug inside browser
                        add(rootDirPath)
                        add(projectDirPath)
                    }
                }
            }
        }
        binaries.executable()
    }

Hi all, I'm having an issue with the Compose canvas size. When I run my Compose app using the

wasmJsBrowserDevelopmentRun

task, everything works fine — the canvas takes up the full size of the browser window. However, when I serve the same compiled WASM code (using the

wasmJsBrowserDistribution

task) with my own Ktor server, the canvas height is only 308px. I can't understand where the difference is coming from. Any ideas? Thanks in advance

ComposeViewport(document.body!!) {
    App()
}

I'm using stringArrayResource(...) in a multiplatform project and it works flawlessly on Android, iOS and Desktop platforms, but it returns an empty list on WasmJS (no errors)! Is this compose API fully supported on WasmJS? Anyone has any clues? (I'm using Kotlin 2.1.20 and Compose Multiplatform 1.7.3)

I'm conducting font loading tests using Kotlin/WASM, and I've discovered that the fonts here are not vector-based. When I zoom in or out, the fonts become severely blurred. Even at 100% zoom level, the fonts still appear noticeably fuzzier compared to those loaded normally in a div. Interestingly, when I refresh the page at 500% zoom and then scale back to 100%, the page becomes significantly sharper. I'm unsure why this happens. Even after obtaining

window.devicePixelRatio

and applying it to the text to trigger recomposition, the text updates correctly but remains equally blurry. I find this behavior unacceptable for practical use.

Hi, There seem to be an issue with keyboard overlapping content on ios safari. When clicking textField it opens keyboard which block content under from scrolling. Is there any way to overcome this? It seems to be related to existing issue which was fixed on iOS but not for web targets? https://github.com/JetBrains/compose-multiplatform-core/pull/1067

Hello, I am new to Compose Multiplatform. I am trying a POC where I would like to generate TV app. I have used LazyColumn which works perfect in Android TV. I used wasm build to load in a webview in android, but the focus movement or the keyevent doesn't work. The intention is to use the wasm in LG and Samsung TV within an webview. Is the tv d pad navigation isn't supported yet for the browser wasm build? what are the alternatives in that case?

3 issues that I noticed with InputFields: 1. the numeric keyboard property is being ignored. 2. on mobile, if you tap on an InputField, the keyboard appears, you then press the button to close the keyboard, the keyboard closes as it should, BUT, once you scroll anywhere or tap on something that is not even clickable the keyboard appears again. 3. when you input the first char into the field it's height changes a little bit, this does not happen in the Android app version. you can see it here https://mobilekosmos.github.io/hear-calc/

Hey, first time using Kotlin wasm, trying to run compose web app. Should the webpage hot-reload, when running

wasmJsBrowserDevelopmentRun -t

? I see the page blink, so I guess it reloads, but changes are not applied for some reason.

This message was deleted.

Found improvements with text field and soft keyboard in 1.8.0-rc01. But noticed one more issue - not all taps on soft keyboard appears in text field. Sometime need to tap 5-6 times to make symbol appeared. Is it known issue or i should create one?

Hi everyone! Does anyone know what's the best way to load a CSS stylesheet from a NPM dependency in Kotlin WASM? I have a mixed UI using Compose WASM for most of the UI and some HTML content as well and I need to load a CSS from a npm dependency. I did try a few solutions but none worked. The one that seemed more fit was using

@JSModule

and

@JSNonModule

on the css file to load it from Kotlin code, but JSNonModule is not available on WASM target. Right now my workaround is loading the CSS manually on HTML from a CDN, but I'd rather have everything packed. I already enabled CSS on build.gradle. Thanks!

What's the best way of caching string resources in Compose WEB (WASM). We are getting issues where labels are not being displayed because the async call to get the string resources doesn't complete in time before the rendering takes places. It seems that a call to Request URL is being made for every string, every time (this incidentally brings back ALL strings) I've tried using http caching via caching headers but even that (0 or 1ms) is too slow it seems. Is there a way of loading string resources once ? http://localhost/composeResources/myapp.composeapp.generated.resources/values/strings.commonMain.cvr

Is it possible to use the

@Preview

feature with compose-html?

I have a WASM app that works fine in Safari, but has recently stopped working Chrome. All I get is JsException: Exception was thrown while running JavaScript code kotlinx.coroutines.error_$external_fun and a WASM stacktrace. What's the best way of tracking down the issue ? I'm fairly resigned to it being a bug in CMP or Chrome, but it would be nice to know whereabouts it's failing. This is on 1.7.3 and 1.8.0 btw.

Does anyone know of a Compose 1.8.0 compatible DataPicker for CMP WASM ?

Would the planned beta version of Compose WASM address the SEO issues?

A bit sad to see no mention of Compose HTML in the latest blog post

Still seeing significant issues on mobile web: • 1.8.0 broke functionality of text fields on Safari mobile, the soft keyboard no longer opens when the field is autofocused. Worked fine on 1.7.3. • Scaffold with IME padding still does not work with the keyboard expanded (footer with IME padding modifier does not get pushed above the keyboard) • Once the keyboard is shown, it is sometimes impossible to collapse it

Has anyone had any issues with

rememberTransition

in Compose Web/WASM? I'm seeing the

remember(transitionState)

inside remember transition being called multiple times for the same transitionState (same hash code), which is causing my animations to fail.