I’m just starting out with this, and I would like for example to use `Modifier` , the main goal is t...

# compose-web

[oday]

I’m just starting out with this, and I would like for example to use Modifier , the main goal is to use a Composable component that I made elsewhere, here on web

[oday]

maybe I should go through the beginning tutorials first :)

[hfhbd]

which web api? if you want to target html dom API, mapping the modifer API to HTML API is hard. Jetbrains tried it with the web widget module, but this is now deprecated. If you want to share the UI code, you should wait for canvas API.

[oday]

if you open this https://www.jetbrains.com/lp/compose-mpp/

[oday]

scroll to the bottom, you will see Pointer Events

[oday]

it uses Modifier

[oday]

how do I get there

[hfhbd]

That's true, but the first 3 examples are desktop only, the last 3 are web only.

[oday]

ok what I want to do in the end, is something like this https://storybook.js.org/

[oday]

for Compose

[oday]

it is doable isn’t it

[oday]

I’ll forget about porting my components to here, I was just trying that to see the extent of this thing’s ability

[oday]

give me some hope Philip!

[oday]

😛

[hfhbd]

I don't understand what you mean. Do you want to build your own storybook? I don't know all features, but I guess, it is technically possible. I created something similar a while ago, a form designer for surveys.

[oday]

yes i want for example to showcase a page where you got like Composable base components, Button, Text, Whatever, and a list of props underneath each, and you modify them and see what it would render into

[oday]

instead of fiddling with the code, you do it on web via the textfields i have set out for you, and I take those values and actually set them as properties in the code, and render

[hfhbd]

A catalog with selectable and customizable components sounds possible, as long as you don't want to support arbitrary code from users. this would require rerunning the kotlin/compose compiler.

[oday]

yea no, just with the existing stuff that’s offered from compose-web, fine with that

but then so the equivalent of Modifier here is what, attrs ? and all the elements in org.jetbrains.compose.web.dom.Elements ?

[oday]

actually i’ll just look at the landing page sample code and ask later if anything is unclear

[oday]

thanks a lot Philip

[robercoding]

There are 2 APIs:
• DOM (attrs, Div, span etc.. Html stuff)
• Canvas (Modifier 🙂)
If you want to use the Modifier in web you need to use Canvas API. You should download the project and go to the experimental folder where you'll find examples there

I recommend to test both, I haven't done almost anything with them and I'm still playing with the code, from a noobie perspective that haven't done anything I'd recommend to go with DOM to build something (Take it with a grain of salt please 😄)

[zt]

From my testing the canvas API would allow you to share code however it has a significant ways to go. The DOM API uses HTML/CSS stuff and is a little more complete but you lose the ability to share code

[David Herman]

Note that I'm working on my own library, Kobweb, where I introduce my own Modifier class which works on top of the Compose for Web DOM API. In case you wanted to play around with it. I also wrote about it a bit more here: https://bitspittle.dev/blog/2022/kotlinsite#modifier

[oday]

and for the available properties that are supported ?

[oday]

and great job by the way

[David Herman]

@oday Thanks! I'm just a single person so while I'm filling in API gaps as I can it's certainly not perfect. And in some cases, probably it will never reach parity. I'm pretty sure Compose for Web targeting the DOM will never have the same animation API that Jetpack Compose does for example. Let me know if you had any specific use-case in mind that you wanted to accomplish and I'll let you know if / how you can accomplish it in Kobweb.