@darkmoon_uk I was thinking this might be the case. It looks like http://github.com/mpetuska/kmdc has some useful stuff already. It is unfortunate that it will be a duplication of the work being done by Jetbrains and Google.

It's worth noting that the current approach for material support is canvas-based. Using canvas means we get good compatibility and interop with other platforms, but comes with some drawbacks (like performance of loading the entire canvas, not being DOM-based impacts SEO and devtools, etc). Depending on your use case, you may still find value in something like kmdc and wrapping HTML/DOM based widgets for use in Compose for Web.

Has anyone noticed somewhat sluggish rendering performance? I ran the profiler in Chrome and a lot of time is spent in a function named isInterfaceImpl. I'm not sure if it's something unusual I am doing in my code that is causing this.

Hey guys! How do you organize your projects to play around with the UI? I tried to create the structure: -- jsMain -- components -- MyComponent.kt <-- Contains a @Composable function that I want to render -- jsTest -- components -- MyComponentPlayground.kt <-- Launches only MyComponent, so I can develop it instead of rendering all the screen But I don't really know how to run this custom component. I tried creating a

suspend fun main() {
        renderComposable("root") {
        Style(AppStyleSheet)
        component()
    }
}

but I don't know how I'd execute this main. I was going to write a simple main for every component, but that doesn't seem very feasible

Is it possible to load a .txt file from the resources directory? I am recreating a small website I made in React using Compose for Web and am having a hard time recreating the following in Kotlin:

import TestVar from './files/TestFile.txt';

...

var text = TestVar.text();

Can I use the Kotlin/JS module system to recreate the above?

Why I don't have option to add the 

--continuous

 flag to the arguments for the run configuration ? I don't have

browserDevelopmentRun

instead I have

jsBrowserDevelopmentRun

Any help please ?

I want to learn how to write tests in Compose Web but I always get this error

Or change it via

browser {

testTask {

useKarma {

useFirefox()

useChrome()

useSafari()

}

}

}

Note: in my computer I have just "Microsoft Edge" What I have to do ?

I am struggling to get my compose web to run in a multiproject multiplatform layout: root project is defining all plugins but all with apply = false Now project compiles fine, but

gradle jsBrowserRun

shows an empty Browser page, I guess because build/processedResources ends up in the subprojects build folder, but build/js ends up in the roots build folder ... how do I get this to work from the js being soley in the subproject?

Hi! Am I correct that Compose works only for functions but not for classes? I mean is it possible to use a class as a Composable? I worked quite a lot with React and I really didn't like when they started the shift to a function only approach. Seems good at first, but complicates things later.

I'm struggeling with CSS style! and I found that there is a Module 

compose.web.widgets

 which provides a collection of Composable components that conform to the API and behaviour of some widgets from Jetpack Compose UI like: 

Column

, 

Row

, etc But it's deprecated is there any issue or disadvantages using them ?

Does someone have an example with compose web + router?

Hey everybody, i wrote a tool to convert HTML to Compose for Web Composables https://github.com/Foso/HtmlToComposeWebConverter

Anyone have issues using the

Iframe

builder in 1.0.0? It seems that IntelliJ can't resolve the attributes within the attribute builder which is odd since you can see the inlay hints are registering and I see them in the definition source in the IDE...

My fellow Composers and, in particular, Web Composers, I’m writing a small message on behalf of Compose Multiplatform team. It’s about so called Web Widgets. As may of you might already noticed they are obsolete starting from the 1.0 Release. The reason for this is that we’ve decided to invest heavily in reusing widgets (or UI components - whatever you prefer to name it but you got the idea I believe) between Android, Desktop and Native platform. This approach implies that we’ll have a canvas-rendered UI components in Web and this approach has many benefits. But at the same time it has some drawbacks compared to a mature DOM-based widget API which is based on same design concepts like “regular” Compose UI. However as of now we feel like we just don’t have enough time to invest in such API. Apart from concentrating on canvas-rendered components (which is goal #1 for us), we’ve decided to focus on DOM layer since there are still a lot of things that need to be addressed in that aspect. Third goal will just scatter our attention. That said we are planning to remove web widgets completely as soon as we’ll introduce canvas API. It does not mean that we wont reconsider sometime in future when we’ll feel that we have enough expertise and time to try again. Meanwhile I want to point out that community already is delivering some very strong alternatives to what we’ve offered to you. Consider, for instance, this project - https://github.com/mpetuska/kmdc Happy Christmas and/or festive season!

Is there a particular reason why

ElementScope<T>

is an interface, but

AttrsBuilder<T>

is a class? It'd be great if you could make

AttrsBuilder<T>

an interface as well as this would allow injecting some custom DSL for attrs builder (without polluting global namespace as those DSLs are usually only meant for that particular component based on HTMLDivElement and not all HTMLDivElements) when using compose-web to wrap custom components. Here's how I'm utilising the fact that

ElementScope<T>

is an interface already (although it only works for lower-level components and is kinda hacky).

Can I share compose Code from my desktop and Android app with my web app? I've tried to setup a multiplatform project but it looks like compose.ui, compose.foundation etc do not exist for web

Has anyone gotten Compose for Web working with Okta authentication?  Only thing I've dug up is this thread: https://devforum.okta.com/t/support-for-android-jetpack-compose-kotlin/16511 None of the examples here seem to hook into npm libraries unlike the KotlinJS examples: https://compose-web.ui.pages.jetbrains.team/ Basically wondering if it's possible to do OIDC auth to grab a JWT token to do API calls to a backend in Compose for Web...

It seems that we have 2 directions for Compose Web. The current team is working on a canvas based approach similar to Flutter which will provide a shared UI model Jetpack Compose and Desktop. Compose Web also allows a normal web development model and the

kmdc

effort aims to provide Material web components. This divergence isn't a bad thing because the WebComponents path provides a path to converting from other web frameworks. Maybe we should name these to paths and be explicit about the shared core. You would probably not use any npm packages in the Web Canvas platform. BTW @Big Chungus how about #kmdc?

similar to Flutter

Flutter has 2 rendering approaches for web actually. A canvas based approach for speed and correctness, and a dom based approach for binary size, accessibility, and seo. Canvas is the more commonly used one I would imagine.

Smol bug that I've found but I still need to document it better: While I was trying to integrate EasyMDE in Compose, I found out that if you call a "mutableStateOf(...)" variable within a "ref" block, the compiler will crash with "`Validation failed in file`" (Semi) Unrelated to the bug above: And here's how I ended up implementing it if anyone is interested :3 (the EasyMDE classes were generated by dukat). I know, it seems kinda obvious in handsight but I was banging my head trying to figure out how could I force a recomposition of a "ref" block (even if the "i18nContentDataMap" variable changed, it wasn't recomposing, because "ref" is only called if the element was removed from the current composition), which then I figured out that what I should do is create a div and then create the textarea with JS code. You can't use DomSideEffect within a TextArea because you aren't able to access it there https://gist.github.com/MrPowerGamerBR/bba1208e3db6a29b51cd350f9cf904f4

Hello while working on multiplatform project, I am sharing mu compose UI between android and Web I have created a  

composable

  shared multiplatform module, inside that I have put some compose libraries as 

commonMain

Android app runs fine, but when I try to run 

./gradlew jsBrowserRun

  it fails to resolve all the compose dependencies

Hello. my multiplatform Compose-web app is not picking up the

index.html

I get completely blank error state screen

Hi! I've tried to use Compose for web in a pure Kotlin JS module, and it fails to compile with a cryptic assertion error within the Kotlin JS compiler backend. Is Compose expected to work with Kotlin JS Gradle plugin at all? Looking through all the samples, I now see that all of them use multiplatform gradle plugin, even if they have JS as the only target... Here is the repro - https://github.com/Kiryushin-Andrey/compose-web-js-bug-repro, it is basically a copy of https://github.com/JetBrains/compose-jb/tree/master/templates/web-template with

multiplatform

replaced with

js

in gradle scripts.

Hello, in my multiplatform compose web app, I am facing issue while rendering the generated JS browser says

The resource from "<http://localhost:8080/my-file.js>" was blocked due to MIME type ("text/html") mismatch (X-Content-Type-Options: nosniff).

I have confirmed the name and its getting generated in the same folder as index html Not sure what is the reason Anyone faced a similar issue ?

Hey, general question about the intent of compose-web and compose-desktop. When I first read about it, I though it would be a set of tools that would allow me to share UI code across web and desktop targets. But it looks like the web and desktop are quite divergent, and only the very base concepts are shared between. I even noticed that the web widgets (which seemed to be a step in that direction) was deprecated. Is it the intent of these projects to remain divergent, or will they ever converge?

Hello! I was wondering: With release 1.0, is compose for web ready for production in terms of stability? I see some people calling it a toy, but I guess that is only because there aren't that many 3rd party libraries and you have to construct everything by yourself (e.g. like material design, even though there is now a lot of effort put into kmdc). Am I right that in terms of "what you see is what you get", compose for web is stable and production ready right?

As a follow-up to @Joost Klitsie’s question: The much-anticipated :compose-multiplatform: Canvas Compose for Web & iOS... 🙏 When might we see the first public (early-access) builds? Roughly are we talking 3 months, 6 months... a year? I hesitate to ask for sounding impatient which is not my intent; JB do great work and quality takes as long as it takes, but it would be really good to have a clue as it affects some plans I have for a Multiplatform Project already well underway...