Hello I just started with compose web, I don't know if someone can help with resources to learn compose web

Has anyone found a way to position html inside of compose canvas widgets yet, I wonder?

Yes, we already decided the release date of Compose Multiplatform 1.2.0

https://github.com/JetBrains/compose-jb/issues/2254 just asking whether we have some more details about the release date?

Any tips on making a header and footer with Kotlin and IntelliJ ?

Does Compose Web have something similar to renderToString() from React, or way of easily creating one? I need it for server side rendering

I like to start a project using ktor latest as backend and compose-web latest as frontend. I find multiple tutorials and templates for both of them separately but I can’t figure out how to combine the gradle configurations to have a multiplatform build with ktor and compose-web as browser frontend. Does anyone have an example gradle config that works?

Has there been any thought/ideas around Compose Web components <> canvas-based components interop?

I have 2 questions... using compose web how can I set focus on a given input? ... when I could use the DOM, for example: document.getElementById("inQtd"), I put it in several places in my font and it doesn't recover anything. Grateful

👋 Starting to play around with Compose Web and just wondering if there are any good examples of submitting multipart form data to a ktor backend? I’m able to upload files to my ktor endpoint fine via

curl

, but when I try submitting the form from compose, the multipart data never shows up. Coming from an Android background so my web skills are pretty rusty these days--definitely could just be missing something obvious

How do I scroll a scrollable element to the bottom from Kotlin/jb-compose code? Use case: I have an element that can grow in vertical size (child elements are added to the bottom), and that has a max height, and on overflow it scrolls, e.g.:

Div(attrs = {
    style {
        maxHeight(8.em)
        overflow("scroll")
    }
}) { /* content */ }

When the content overflows, I'd like the scrollable element to scroll to the bottom (by default it stays at the current scroll position, which is the top if never scrolled). I've found solutions in JS that probably work, but I'd like to know if this can be done nicely from my Kotlin code.

Is there a compose web compiler working with Kotlin 1.7.20-RC? I did update my compose to:

id("org.jetbrains.compose") version "1.2.0-beta02-dev795"

But after compiling, I get that error: `This version (1.3.0) of the Compose Compiler requires Kotlin version 1.7.10 but you appear to be using Kotlin version 1.7.20-RC which is not known to be compatible. Please fix your configuration (or

suppressKotlinVersionCompatibilityCheck

but don't say I didn't warn you!).` Thanks!

Can anybody tell me how to read/write a file in a browser based multiplatform Compose application. I am using Okio for the other platforms but that does not seem to work in a browser although it does support JS. Note: I am not talking about accessing the users local file system. I just need to cache some files locally over multiple sessions inside the browsers sandbox. (I have to admit that I know next to nothing about browser work, so please bear with me.)

I’m trying to include a rich HTML editor, and TinyMCE seems to be pretty good, and they have a web components implementation. I’m able to create the component, which was quite straightforward. Here’s kind of the starting point:

import androidx.compose.runtime.Composable
import kotlinx.browser.document
import org.jetbrains.compose.web.attributes.AttrsScope
import org.jetbrains.compose.web.dom.ElementBuilder
import org.jetbrains.compose.web.dom.TagElement
import org.jetbrains.compose.web.dom.Text
import org.w3c.dom.Element
import org.w3c.dom.HTMLElement

private open class ElementBuilderImplementation<TElement : Element>(private val tagName: String) :
    ElementBuilder<TElement> {
    private val el: Element by lazy { document.createElement(tagName) }

    @Suppress("UNCHECKED_CAST")
    override fun create(): TElement = el.cloneNode() as TElement
}

class TinyMCEAttrsScope(
    attrsScope: AttrsScope<HTMLElement>
) : AttrsScope<HTMLElement> by attrsScope {

    fun apiKey(key: String): TinyMCEAttrsScope = apply {
        attr("api-key", key)
    }

    fun hideMenuBar(): TinyMCEAttrsScope = apply {
        attr("menubar", "false")
    }

    fun plugins(vararg list: String): TinyMCEAttrsScope = apply {
        attr("plugins", list.joinToString(" "))
    }

    fun toolbar(defn: String): TinyMCEAttrsScope = apply {
        attr("toolbar", defn)
    }
}

@Composable
fun tinyMce(attrs: TinyMCEAttrsScope.() -> Unit = {}, content: String) = TagElement(
    ElementBuilderImplementation<HTMLElement>("tinymce-editor"), applyAttrs = {
        val tinymceAttrsBuilder = TinyMCEAttrsScope(this)
        tinymceAttrsBuilder.attrs()
    }) {
 Text(content)
}

What I’m struggling with is events. The developer claims that input events are fired, but I’ve tried different ways to install the handler to no avail. I’ve tried to get other events as well, and I just don’t get callbacks. Any thoughts on how I would install these event handlers?

If I declare a stylesheet property like

val styleA by style { /*..*/ }

, is there a way to define a

styleB

that inherits from

styleA

?

Is it possible to configure the canvas background to be transparent when using the WebAssembly target? I guess I would have to customize the clear color (assuming the skiko layer is configured to support alpha) but I can't find the API to do that.

Has anyone been able to get Compose for Web app working with Kotlin 1.7.20.....using

1.2.0-beta03-dev803

and getting following

java.lang.AssertionError: org.jetbrains.kotlin.ir.expressions.impl.IrCallImpl@7bda6b02: No such value argument slot: 1
	at org.jetbrains.kotlin.ir.expressions.IrMemberAccessExpression.putValueArgument(IrMemberAccessExpression.kt:50)
	at androidx.compose.compiler.plugins.kotlin.lower.ComposerParamTransformer.withComposerParamIfNeeded(ComposerParamTransformer.kt:214)

Can I create a PWA using compose for desktop? Can I do it for canvas as well?

should there be a

1.0.0-beta03

version for Compose for Web (as there is for Desktop)?

What do you use for state management? As far as I know Redux is a popular choice, but given that the rest of the team is heavily using MVVM architecture I am wondering if an MVVM architecture would make sense on the web.

If I want to apply a color to some element, can I modify only one of its color properties? E.g. it might have RGB color

(r, g, b)

, and I only want to set

a = 0.3

. Is there a way to simply set A, without changing RGB? (Or, more advanced, is there a way to transform RGBA by multiplying it with a vector of RGBA factors? For example, to reduce alpha to 30% of its current value, I'd multiply by [1, 1, 1, 0.3].)

hi everyone, i’m working on trying to get a compose/canvas project working. i’ve got a simple project that displays a hello world

Text

composable centered in a

Box

. running

./gradlew jsBrowserRun

works fine. it opens to localhost:8080 and displays what I expect. but i’m trying to figure out how to eventually embed this in a website. I thought that

./gradlew jsBrowserDistribution

was the command I wanted, and then I could open

foo/build/distributions/index.html

locally and I should see the same result. but right now i’m just getting an empty screen. i have a separate project that uses the compose/dom approach, and calling

./gradlew jsBrowserDistribution

and navigating to

foo/build/distributions/index.html

works fine. Is there a step I’m missing for the compose/canvas approach?

Hey! What's the preferred way to do data charts in compose for web? Chartscss.org should be easy enough to implement but does anyone have a working example with javascript based charts?

hello again, has anyone figured out how to load fonts in compose/canvas?

Are there any good resources for learning compose-web besides what is listed at https://compose-web.ui.pages.jetbrains.team/? The docs on kotlinlang seems to have a lot for kotlin react, but not much for compose-web.

Hi, I have a very weird error, I can't use the

required

attribute since beta, it leads to an error that this specific function isn't a function when accessing the website, I'm using Kt 1.7.10 and tried with both 1.2.0-beta01 & beta02, I also use this attribute in a function where there is a boolean

required

argument.

morning guys, is there any Compose Web StyleSheet open-source code/framework ?

Hi, trying again compose web after some time. If I remember correctly (and that is a big if) there used to be an alternative to dom api that provided layouts like

Column

Row

etc. Can't really find anything like it now. Is it available somewhere?

message has been deleted

Using the canvas feature, how can I load an image from a url?