I thought I’d try to run one of my compose apps in...

# compose-web

[spierce7]

I thought I’d try to run one of my compose apps in the new alpha web. Ran into a hangup - How would I draw an SVG in compose web?

[Big Chungus]

You need to add compose.web.svg dependency. Then it's the same api as in html

[spierce7]

Thanks - looking for it!

[spierce7]

You mean "org.jetbrains.compose.web:web-svg-js:1.2.0-alpha01-dev675" ?

[Big Chungus]

Yes, but compose plugin provides that typesafe acessor I've posted

[spierce7]

I didn’t realize that was an accessor! Thanks

[spierce7]

@Big Chungus This appears to be an API to build an SVG. I’ve got an SVG as a String. Is there any way for me to display it with this?

[Big Chungus]

Ah, you might get lucky with attrs.ref and setting innerHtml on the native element?

[Big Chungus]

Here are some snippets for you

@OptIn(ExperimentalComposeWebSvgApi::class)
  Svg(attrs = {
    attr("width", "100")
    attr("height", "100")
    ref { element ->
      element.innerHTML = """
        <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
      """.trimIndent()
      onDispose { }
    }
  })

  Div(attrs = {
      ref { element ->
        element.innerHTML = """
        <svg height="100" width="100">
          <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
        </svg> 
      """.trimIndent()
        onDispose { }
      }
  })

[spierce7]

this API is fairly inconvenient 😕

[spierce7]

Am I able to use a Div inside of a web canvas application?

[Big Chungus]

Intentionally so. One should avoid touching native DOM elements as much as possible when wrking with compose

[Big Chungus]

Otherwise you risk desyncronised states

[Big Chungus]

No clue about web canvas. Never tried that myself.

[spierce7]

oh - I’m trying to do all of this in web canvas

[Big Chungus]

Ah, then all my suggestions might be totally invalid.

[spierce7]

ic thanks

[JCollardBovy]

Are there any examples about running apps with new alpha web?

[spierce7]

yes - check the repo in the experimental/samples directory

[Fudge]

Woah, compose web canvas alpha? Any links to announcement?

[spierce7]

No announcements. Only side discussions here

[JCollardBovy]

Thanks for the tip Scott. Do you know if it’s possible to run compose multiplatform with android as well?
None of the samples are including Android

[spierce7]

Yes - it is. Look at the primary samples, not the experimental samples and you’ll see examples of that.