Is there any compelling reason for web/common to use a different Color representation to Android/Desktop? (

value class / ULong

vs

data class RGB Hex

); this only makes the two worlds harder to bridge, and there aren't any ready conversion functions that I can see. Couldn't all the color code standardize on

ULong

, and the common Color disclose an Android/Desktop color via

.implementation

?

✅ RESOLVED:🔥 Do we have hot reload in compose-web?

Just looking for a little confirmation from the Compose Web Devs; I'm writing an App using Compose across 3 platforms which I know is far from production approved but as a personal project I can enjoy the struggle 🙂 To be able to write a common View layer between Web / (Android + Web) I am finding the need to write a substantial shim layer with

expect/actual

to gain access to

Modifier

s that aren't available yet from common code. I guess this is partly because they don't have a Web implementation yet. Even my current Web ones are

TODO()

- I'll fill them in ad-hoc as needed. Question: Does this seem a reasonable thing to do, or am I missing a better way to handle existing API's 'commonly'?

My friends, todays weekly release is about subtle changes in HTML API https://github.com/JetBrains/compose-jb/releases/tag/0.5.0-build225-web

🎉 Here's a game built using compose web and radio buttons 🎉 More info : https://twitter.com/theapache64/status/1404885743714004992

Why are composables with names like

TextActual

part of the public API when it seems they're designed to be called by

Text

and alike?

Is there any plan to add

rememberSaveableStateHolder

to Compose Web?

Is there any reason

Modifier.padding

has no overload taking something other than a single value for all sides? I'd like to customize vertical, horizontal, or side specific padding like you can do on Android. Same question for

StyleBuilder.padding

. Also, I'm wondering why there's

StyleBuilder.marginLeft

and

StyleBuilder.marginTop

but none for right and bottom :blob-thinking-upside-down:

I have a question related to edit texts in Safari. There is known bug/feature that causes that when you change input text value from JavaScript then cursor/carret jumps to the end. In JavaScript there is a workaround that saves cursor position before setting value then modify value and then restore cursor position (see eg. https://stackoverflow.com/a/29440988 for reference) I'm thinking how to do this in JetPack Compose for web. Storing cursor position using

remember

?

One more questions: how to call javascript methods on elements after recomposition? Eg. request focus on the element?

Hello, i'm having some trouble using an external css stylesheet, how can i use classes from said stylesheet in my composables?

Is there anyway to implement routing with compose web in a similiar way to react router?

On ComposeWeb

BoxWithConstraints

is not available. What is an alternative in order to get the width and height of the page?

I tried Compose web for the very first time and I'm curious about what I'd need to do to enable webpack like auto deploy as that my changes are reflected immediatel without needing another run of

jsBrowserRun

. I had expected this to work out of the box but maybe I'm missing a step?

Previously I was using

checked(false)

to uncheck a radio/checkbox. now that

checked(Boolean)

has removed in

0.5.0-build225

, so what's the recommended method to uncheck a radio/checkbox?

Where is the build226 release of compose-web? I don't find it on Space, https://maven.pkg.jetbrains.space/public/p/compose/dev/org/jetbrains/compose/web/web-core/

How can I express “width: 100%” ? e.g.

Table ( { style { width(100.percentage) } }) {
}

this doesn’t work

Do you know whether Jet Pack Compose for Web is Internet Explorer compatible? When I try our app I get syntax error on line 19:

Is there a way to access Session Storage using Compose-Web?

Hey everyone! 0.5.0-build226 build of web-core and web-widgets is available. It brings some CSS API updates which we expect should simplify the code. Apart from that, this build might cause errors in runtime if you have composable functions with default values for lambda parameters (reported here: https://github.com/JetBrains/compose-jb/issues/811 , also check out a possible workaround in the link below). Despite that, we decided to not postpone the new build announcement. We're preparing the fix. Check out more details here: https://github.com/JetBrains/compose-jb/releases/tag/0.5.0-build226-web

Hello 👋, I have a question 😀 Is compose web is an alternative to other Frontend frameworks that exists like React or Vue.js ?! 🤔 .... I have a background in mobile development and recently start learning Jetpack compose for Android, It's amazing and I love it ♥️ But because I'm student now, I have to start for the next years making web projects to submit it to my school. But in same time I don't want to learn a lot of frameworks especially out side Android development. So do compose for web here is enough for me, And I'm curious to know if this new framework for web will be special than other that exist like React

Hi, I have JPCW architecture question. We have app and it shows animated full screen loading indicator. It works well, but when it is turned on and off quite often then animation restarts and it causes annoying flickering. I'm thinking whether it is possible somehow just show and hide that indiciator without recomposing it. I can imagine that composable that is used for rendering of indicator will just call some external javascript that will change visibility of some HTML element that is not rendered by compose. Is that solution? Or do you have any other idea?

Compose for Web simplifies and accelerates UI development for web applications, and aims to enable UI code sharing between web, desktop, and Android applications in the future.

I was wondering about this. As currently, it's possible to share practically all of the UI between android and desktop, are they hoping to achieve the same thing with web (or something similar)?

How can I do JSON serialization using Compose for web, I've tried Kotlinx serialization it results in a error, I've resorted to using

js("JSON.stringify(s)")

but this seems to have a few problems, namely the incorrect naming of properties.

My fellow web composers, this week's release is dedicated to some improvements in using inputs and inputs events - hopefully this is a step in the right direction. Just as always - any feedback, requests, complaints or questions are welcome https://github.com/JetBrains/compose-jb/releases/tag/v0.5.0-build228-web

It would be great if we can use some react component direclly in jetpack compose web, or maybe some tools to generate some "internal" code. There are tons of react libraries, it can help the jetpack compose web ecosystem a lot. Jetpack compose and react have almost excally same design system for example Kotlin Js React Code:

external interface MainHeader : RProps {
    var onRequestLogin: () -> Unit
}

val mainHeader = functionalComponent<MainHeader> { props ->
    var basicInfo: BasicInfo? by useState(null)
    useEffect(Unit) {
        WebMainScope.launch {
            basicInfo = if (LoginService.loggedIn) ApiService.getBasicInfo() else null
        }
    }
    ringHeader {
        attrs {
            spaced = true
        }

        img("Your Image") {}

        ringTray {
            if (LoginService.loggedIn) {
                +"Hello"
                ringDropdown(basicInfo?.username ?: "Fetching...") {
                    attrs {
                        clickMode = true
                    }

                }
            } else {
                ringButton {
                    attrs {
                        primary = true
                        onMouseDown = { props.onRequestLogin() }
                    }

                    +"Login"
                }
            }
        }
    }
}

Jetpack Compose Code:

@Composable
fun MainHeader(onRequestLogin: () -> Unit) {
    var basicInfo by remember { mutableStateOf<BasicInfo?>(null) }
    LunchedEffect(Unit) {
        WebMainScope.launch {
            basicInfo = if (LoginService.loggedIn) ApiService.getBasicInfo() else null
        }
    }

    RingHeader(spaced = true) {
        Image("Your Image")

        RingTray {
            if (LoginService.loggedIn) {
                Text("Hello")
                RingDropDown(basicInfo?.username ?: "Fetching...", clickMode = true)
            } else {
                RingButton(primary = true, onMouseDown = { onRequestLogin() }) {
                    Text("Login")
                }
            }
        }
    }
}

99% similarity

Hi everyone! I was wondering about the nesting of modifiers in Compose for Web. Example:

@Composable
fun ModiferTest() {
    Box(Modifier.background(Color.Blue).padding(16.dp).background(Color.Red).padding(8.dp).background(Color.Green)) {
        Text("Modifier Test")
    }
}

As you can see in the images, the function works correctly on Compose for Desktop, but on Compose for Web it discards all but the innermost modifiers (due to the way that modifiers currently work on web). This breaks the idea that each modifier doesn't need to have knowledge of the inner content/modifiers, which seems like an important aspect of the Compose UI system. Obviously multiplatform widgets are still experimental, but I wanted to know if something is planned to address this, since it seems like a somewhat core issue

What do you think, would it be a mistake to start a new project using compose-web? Can we realistically expect a production-ready compose-web version eg. in 6 months?

Refreshing the value in a

TextInput

appears to be broken 🤔 Even when I can debug-log inside the

@Composable

and see that it's recomposing, setting the

value

parameter with new values has no effect; the browser just keeps the same user-entered value in the box. Code in 🧵 👉