Hi there, in my quest to explore kotlin compose we...

# compose-web

[Morten Minke]

Hi there, in my quest to explore kotlin compose web I discovered that I was unable to create a material3 UI easily. All documentation on UI design is for android/desktop but not for web. So I decided to investigate a bit (please bear with my as I am normally a backend developer so this is new territory for me) and I started implementing the Material3 Web Components currently in development at https://github.com/material-components/material-web.
The result is the current very very very alpha version of my implementation of these Web Components in Kotlin Compose for Web.
I hope I can find some help here in the further development because I do run into limitations of how the current Kotlin Compose for Web is developed with regards to internal / private functionality which is needed to actually start using Web Components.
My repository for the implementation can be found here: https://github.com/mminke/kotlin-compose-web-material3

[Dima Avdeev]

Hello!
Cool, thanks! It is interesting. Your library may be useful!

Now we have 2 libraries for browsers:
1. compose-html (stable). You already use this one.
2. compose-web (experimental). It has material widgets.
Examples of the second are available here:
https://github.com/JetBrains/compose-multiplatform/tree/master/examples/chat

Also, we have another one very early experimental WASM support:
https://github.com/Kotlin/kotlin-wasm-examples/tree/main/compose-imageviewer#compose-multiplatform-for-web

[Morten Minke]

Ah, thx for the reply, the two links you presented are (as far as I understand) both based on skiko/wasm and/or canvas. Is that correct?

[Morten Minke]

@Dima Avdeev Hi I have a question on the Compose html structure. For example for the above code for md3 I need to create the html elements and I now have copied the ElementBuilderImplementation class because it is an 'internal' class at the moment. However, it would make sense to not make this an internal class to allow people to start implementing arbritrary web components (like I now do).
Would there be a possibility to discuss these kind of feature requests with the jetbrains dev team?

[Dima Avdeev]

Ah, thx for the reply, the two links you presented are (as far as I understand) both based on skiko/wasm and/or canvas. Is that correct?

Yes

[Dima Avdeev]

Yes, we can discuss how to provide public access to ElementBuilderImplementation for library authors.
I think it is better to discuss with concrete code samples with implementation of widgets.

[Morten Minke]

Well the above project I mentioned has some examples. For example: https://github.com/mminke/kotlin-compose-web-material3/blob/master/src/jsMain/kotlin/web/compose/material3/buttons/FilledButton.kt which implements the md-filed-button web component from https://github.com/material-components/material-web

[Dima Avdeev]

@Oleksandr Karpovich [JB] Can we consider making ElementBuilderImplementation public for library authors?
For example, possible usage in https://github.com/mminke/kotlin-compose-web-material3/blob/master/src/jsMain/kotlin/web/compose/material3/buttons/FilledButton.kt

[hfhbd]

Just for your information, there is also kmdc: https://github.com/mpetuska/kmdc mapping material (and material 3?) to compose html.

[Morten Minke]

As far as I can see that is only implementing material design 2 not md3.

[Morten Minke]

As a side note, I am a long time kotlin backend developer just stepping into the world of front-end development using kotlin. It seems like an interesting journey so I probably will do some stupid things and maybe not ask proper questions. My appologies for that 🫣

[hfhbd]

Don't apologizing for asking questions 🙂

[Big Chungus]

Kmdc maps to material-components-web which is still at md2. material-web is using material-components-web under the hood, is still experimental, misses some components, but does aim for md3. I was considering wrapping it myself at first, but decided to be patient and wait for eventual md3 update for material-components-web