I’m trying to make `Modifier` work on Compose for ...

# compose-web

[Chris]

I’m trying to make Modifier work on Compose for HTML, but I keep getting the error: Unresolved reference: Modifier. Am I missing imports and/or a Gradle implementation?

[Big Chungus]

Compose html does not share ui with other platforms and as such does not have modifiers. Use compose web if you're set on shared ui

[Chris]

I was afraid that might be the answer… I’m actually adapting Compose for HMTL to a totally new platform. All I really need is support for Modifier with .then() and other standard functions – even if those modifiers don’t do anything to the HTML. Is there any way to import the Modifier type, at all, in to Compose for HTML?

Or will I need to create a shim, perhaps?

[Arjan van Wieringen]

What do you expect to do with Modifier? The DOM is wildly different from the Skia rendering pipeline. You can just use css for Compose HTML

[Oleksandr Karpovich [JB]]

I think it's still possible to import it by adding a dependency on compose.ui
if you really need it.

I assume you want a basic Modifier interface that does nothing at all by default. But it should allow to build your own modifiers if needed

[David Herman]

@Chris You may want to check out my project, Kobweb. I implemented Modifier for Compose HTML. It's technically not the same one as Compose Multiplatform's Modifier class (it's a custom fork that is designed to work with CSS), but if you're creating a standalone site using Compose HTML, it shouldn't matter. I also wrote a bit about the framework here, including a Modifier section: https://bitspittle.dev/blog/2022/kotlinsite

[David Herman]

If you decide that Kobweb isn't a fit for what you are doing, you are still welcome to copy my Modifier implementation into your own codebase if it helps: https://github.com/varabyte/kobweb/blob/main/frontend/kobweb-compose/src/jsMain/kotlin/com/varabyte/kobweb/compose/ui/Modifier.kt

[Chris]

Oh awesome, thanks David! I’ve heard really good things about Kobweb. I’ll probably copy your Modifier class and use that as a foundation for this custom layout system, if that’s okay? (I’m actually only using HTML as an intermediate data layer, so no need for CSS… If I could just get a tree graph out of Kotlin/JS without going through HMTL at all, I would!)

And thanks, also, @Oleksandr Karpovich [JB]. implementation(compose.ui) and import androidx.compose.ui.Modifier worked, once I added org.jetbrains.compose.experimental.jscanvas.enabled=true. I can’t help but feel I’m venturing onto relatively untested ground with this combination, though 😅

[David Herman]

Fork away! 🍴 And good luck

[David Herman]

Here's how I implemented Modifier in my code as well, in case it helps. https://github.com/varabyte/kobweb/blob/main/frontend/kobweb-compose/src/jsMain/kotlin/com/varabyte/kobweb/compose/ui/WebModifier.kt

[David Herman]

Of course, if Oleksandr's advice is working for you already, then no worries, maybe you're done🤞

[Chris]

This is absolute gold, thank you! I come from Swift and SwiftUI, and I’m just getting my head around Kotlin and Compose. This is really helping me understand what modifiers are doing. Thank you so much.