https://kotlinlang.org logo
Docs
Join the conversationJoin Slack
Channels
100daysofcode
100daysofkotlin
100daysofkotlin-2021
advent-of-code
aem
ai
alexa
algeria
algolialibraries
amsterdam
android
android-architecture
android-databinding
android-studio
androidgithubprojects
androidthings
androidx
androidx-xprocessing
anime
anko
announcements
apollo-kotlin
appintro
arabic
argentina
arkenv
arksemdevteam
armenia
arrow
arrow-contributors
arrow-meta
ass
atlanta
atm17
atrium
austin
australia
austria
awesome-kotlin
ballast
bangladesh
barcelona
bayarea
bazel
beepiz-libraries
belgium
berlin
big-data
books
boston
brazil
brikk
budapest
build
build-tools
bulgaria
bydgoszcz
cambodia
canada
carrat
carrat-dev
carrat-feed
chicago
chile
china
chucker
cincinnati-user-group
cli
clikt
cloudfoundry
cn
cobalt
code-coverage
codeforces
codemash-precompiler
codereview
codingame
codingconventions
coimbatore
collaborations
colombia
colorado
communities
competitive-programming
competitivecoding
compiler
compose
compose-android
compose-desktop
compose-hiring
compose-ios
compose-mp
compose-ui-showcase
compose-wear
compose-web
connect-audit-events
corda
cork
coroutines
couchbase
coursera
croatia
cryptography
cscenter-course-2016
cucumber-bdd
cyprus
czech
dagger
data2viz
databinding
datascience
dckotlin
debugging
decompose
decouple
denmark
deprecated
detekt
detekt-hint
dev-core
dfw
docs-revamped
dokka
domain-driven-design
doodle
dsl
dublin
dutch
eap
eclipse
ecuador
edinburgh
education
effective-kotlin
effectivekotlin
emacs
embedded-kotlin
estatik
event21-community-content
events
exposed
failgood
fb-internal-demo
feed
firebase
flow
fluid-libraries
forkhandles
forum
fosdem
fp-in-kotlin
framework-elide
freenode
french
fritz2
fuchsia
functional
funktionale
gamedev
ge-kotlin
general-advice
georgia
geospatial
german-lang
getting-started
github-workflows-kt
glance
godot-kotlin
google-io
gradle
graphic
graphkool
graphql
graphql-kotlin
graviton-browser
greece
grpc
gsoc
gui
hackathons
hacktoberfest
hamburg
hamkrest
helios
helsinki
hexagon
hibernate
hikari-cp
hire-me
hiring
hongkong
hoplite
http4k
hungary
hyderabad
image-processing
india
indonesia
inkremental
intellij
intellij-plugins
intellij-tricks
internships
introduce-yourself
io
ios
iran
israel
istanbulcoders
italian
jackson-kotlin
jadx
japanese
jasync-sql
java-to-kotlin-refactoring
javadevelopers
javafx
javalin
javascript
jdbi
jhipster-kotlin
jobsworldwide
jpa
jshdq
juul-libraries
jvm-ir-backend-feedback
jxadapter
k2-early-adopters
kaal
kafka
kakao
kalasim
kapt
karachi
karg
karlsruhe
kash_shell
kaskade
kbuild
kdbc
kgen-doc-tools
kgraphql
kinta
klaxon
klock
kloudformation
kmdc
kmm-español
kmongo
knbt
knote
koalaql
koans
kobalt
kobweb
kodein
kodex
kohesive
koin
koin-dev
komapper
kondor-json
kong
kontent
kontributors
korau
korean
korge
korim
korio
korlibs
korte
kotest
kotest-contributors
kotless
kotlick
kotlin-asia
kotlin-beam
kotlin-by-example
kotlin-csv
kotlin-data-storage
kotlin-foundation
kotlin-fuel
kotlin-in-action
kotlin-inject
kotlin-latam
kotlin-logging
kotlin-multiplatform-contest
kotlin-mumbai
kotlin-native
kotlin-pakistan
kotlin-plugin
kotlin-pune
kotlin-roadmap
kotlin-samples
kotlin-sap
kotlin-serbia
kotlin-spark
kotlin-szeged
kotlin-website
kotlinacademy
kotlinbot
kotlinconf
kotlindl
kotlinforbeginners
kotlingforbeginners
kotlinlondon
kotlinmad
kotlinprogrammers
kotlinsu
kotlintest
kotlintest-devs
kotlintlv
kotlinultimatechallenge
kotlinx-datetime
kotlinx-files
kotlinx-html
kotrix
kotson
kovenant
kprompt
kraph
krawler
kroto-plus
ksp
ktcc
ktfmt
ktlint
ktor
ktp
kubed
kug-leads
kug-torino
kvision
kweb
lambdaworld_cadiz
lanark
language-evolution
language-proposals
latvia
leakcanary
leedskotlinusergroup
lets-have-fun
libgdx
libkgd
library-development
linkeddata
lithuania
london
losangeles
lottie
love
lychee
macedonia
machinelearningbawas
madrid
malaysia
mathematics
meetkotlin
memes
meta
metro-detroit
mexico
miami
micronaut
minnesota
minutest
mirror
mockk
moko
moldova
monsterpuzzle
montreal
moonbean
morocco
motionlayout
mpapt
mu
multiplatform
mumbai
munich
mvikotlin
mvrx
myndocs-oauth2-server
naming
navigation-architecture-component
nepal
new-mexico
new-zealand
newname
nigeria
nodejs
norway
npm-publish
nyc
oceania
ohio-kotlin-users
oldenburg
oolong
opensource
orbit-mvi
osgi
otpisani
package-search
pakistan
panamá
pattern-matching
pbandk
pdx
peru
philippines
phoenix
pinoy
pocketgitclient
polish
popkorn
portugal
practical-functional-programming
proguard
prozis-android-backup
pyhsikal
python
python-contributors
quasar
random
re
react
reaktive
realm
realworldkotlin
reductor
reduks
redux
redux-kotlin
refactoring-to-kotlin
reflect
refreshversions
reports
result
rethink
revolver
rhein-main
rocksdb
romania
room
rpi-pico
rsocket
russian
russian_feed
russian-kotlinasfirst
rx
rxjava
san-diego
science
scotland
scrcast
scrimage
script
scripting
seattle
serialization
server
sg-user-group
singapore
skia-wasm-interop-temp
skrape-it
slovak
snake
sofl-user-group
southafrica
spacemacs
spain
spanish
speaking
spek
spin
splitties
spotify-mobius
spring
spring-security
squarelibraries
stackoverflow
stacks
stayhungrystayfoolish
stdlib
stlouis
strife-discord-lib
strikt
students
stuttgart
sudan
swagger-gradle-codegen
swarm
sweden
swing
swiss-user-group
switzerland
talking-kotlin
tallinn
tampa
teamcity
tegal
tempe
tensorflow
terminal
test
testing
testtestest
texas
tgbotapi
thailand
tornadofx
touchlab-tools
training
tricity-kotlin-user-group
trójmiasto
truth
tunisia
turkey
turkiye
twitter-feed
uae
udacityindia
uk
ukrainian
uniflow
unkonf
uruguay
utah
uuid
vancouver
vankotlin
vertx
videos
vienna
vietnam
vim
vkug
vuejs
web-mpp
webassembly
webrtc
wimix_sentry
wwdc
zircon
Powered by Linen
compose-web
  • k

    Karlo Lozovina

    11/08/2021, 12:28 PM
    Are there any plans/ideas for Compose Web that works on top of a canvas? Bypassing the DOM and the usual HTML elements...
    :yes: 1
    t
    o
    +1
    4 replies · 4 participants
  • t

    Tomáš Hubálek

    11/09/2021, 10:29 AM
    Hi, I just found a bit counterintuitive stuff in file
    CSSSelectors.k
    Is it intentional, that
    fun sibling()
    is mapped to `CSSSelector.Descendant()`instead of
    CSSSelector.Sibling()
    ?
    a
    5 replies · 2 participants
  • m

    Mihai Voicescu

    11/10/2021, 7:39 PM
    HI, Did the this tutorial: https://github.com/JetBrains/compose-jb/tree/master/tutorials/Web/Getting_Started but I get a weird output and the webpack server is not working. I had to use
    kotlin.js.webpack.major.version=4
    in
    gradle.properties
    cause it was erroring out without (https://stackoverflow.com/questions/69537840/kotlin-js-gradle-plugin-unable-to-load-webpack-cli-serve-command) Anybody got a hint 🙂 ?
    > Task :jsBrowserDevelopmentRun
    ⚠ 「wdm」: Hash: 42d8be649aea20319bee
    Version: webpack 4.46.0
    Time: 2552ms
    Built at: 11/10/2021 8:35:46 PM
                  Asset      Size  Chunks             Chunk Names
    web-compose-test.js  3.91 MiB    main  [emitted]  main
    Entrypoint main = web-compose-test.js
    [0] multi (webpack)-dev-server/client?<http://localhost:8080> ./kotlin/web-compose-test.js 40 bytes {main} [built]
    [../../node_modules/ansi-html/index.js] /Users/mihaivo/IdeaProjects/web-compose-test/build/js/node_modules/ansi-html/index.js 4.16 KiB {main} [built]
    [../../node_modules/html-entities/lib/index.js] /Users/mihaivo/IdeaProjects/web-compose-test/build/js/node_modules/html-entities/lib/index.js 449 bytes {main} [built]
    [../../node_modules/loglevel/lib/loglevel.js] /Users/mihaivo/IdeaProjects/web-compose-test/build/js/node_modules/loglevel/lib/loglevel.js 8.65 KiB {main} [built]
    [../../node_modules/process/browser.js] /Users/mihaivo/IdeaProjects/web-compose-test/build/js/node_modules/process/browser.js 5.29 KiB {main} [built]
    [../../node_modules/webpack-dev-server/client/index.js?<http://localhost:8080>] (webpack)-dev-server/client?<http://localhost:8080> 4.29 KiB {main} [built]
    [../../node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
    [../../node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
    [../../node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {main} [built]
    [../../node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
    [../../node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
    [../../node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
    [../../node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {main} [built]
    [../../node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
    [./kotlin/web-compose-test.js] 2.23 MiB {main} [built] [309 warnings]
        + 21 hidden modules
    ✅ 1
    1 reply · 1 participant
  • m

    Mihai Voicescu

    11/11/2021, 10:40 AM
    Live reload does not seem to work. I make changes, save, webpack runs and nothing happens. You have to restart the server for it to work... I running with
    jsBrowserDevelopmentRun
    The browser just states that no actual changes were detected...
    ✅ 1
    b
    l
    +1
    17 replies · 4 participants
  • l

    LeoColman

    11/11/2021, 1:23 PM
    Any chances we get a plugin to show compose colors/imgs/fonts/... as an IntelliJ gutter or something similar?
    ➕ 6
    a
    1 reply · 2 participants
  • l

    LeoColman

    11/11/2021, 1:25 PM
    On another note, how to make a popup/dialog wiith compose web? Does anybody have an example of that?
    a
    h
    +1
    10 replies · 4 participants
  • l

    LeoColman

    11/11/2021, 5:32 PM
    Does compose have a specific way to deal with Input masking? I see that there is a different function for each InputType, so maybe there's something for masking?
    b
    11 replies · 2 participants
  • n

    Norbi

    11/12/2021, 1:19 PM
    What is the preferred
    Input
    usage style: controlled or uncontrolled? How can I decide?
    a
    o
    +1
    6 replies · 4 participants
  • n

    Norbi

    11/12/2021, 1:56 PM
    I'm trying to find a long-term client-side architecture for my Compose/Web application. Currently I'm looking at: 1. https://arkivanov.github.io/Decompose/ 2. https://github.com/badoo/RIBs/blob/master/documentation/about/evolution-of-ribs.md Can someone please explain the main difference between them from an architectural viewpoint? (I see that RIBs is not multiplatform, so I'm just curious about the differences.) Besides, does anybody have experience with Decompose in a real application?
    a
    s
    3 replies · 3 participants
  • r

    Rohan Maity

    11/12/2021, 4:15 PM
    Hello, I am starting with Jetpack compose. I could find great articles for Android so far I am trying to have common Navigation Manager layer For android I could make it but I cannot find any thing for Navigation for Web Could some one point me out for Navigation in Compose Web ?
    a
    a
    5 replies · 3 participants
  • t

    Tomáš Hubálek

    11/15/2021, 9:11 AM
    Hi, I just found weird behaviour in our JetPack Compose for Web. project Here is scenario: File
    FileA.kt
    package mypackage
    
    import org.jetbrains.compose.web.css.px
    
    val a = 96.px
    File
    MyTest.kt
    package mypackage 
    
    val b = a
    
    class StyleSheetTest {
    
        @Test
        fun testA() {
            val result: CSSCalcValue<CSSUnitLength> = 100.vw - 2 * a
            assertEquals("calc(100vw - 192px)", result.toString())
        }
    
        @Test
        fun testB() {
            val result: CSSCalcValue<CSSUnitLength> = 100.vw - 2 * b
            assertEquals("calc(100vw - 192px)", result.toString())
        }
    }
    testB
    fails with
    TypeError: Cannot read properties of undefined (reading 'value')
    @Akif Abasov [JB] any idea what is wrong? Is that compiler bug or some edge case optimalization in Kotlin JS IR compiler?
    a
    n
    +3
    19 replies · 6 participants
  • d

    David Herman

    11/16/2021, 6:52 PM
    Does web compose work with Kotlin 1.6.0? I've upgraded Kotlin to 1.6.0 and jb compose to the latest version (1.0.0-beta6-dev464) and when trying to compile I'm seeing
    e: This version (1.1.0-beta01) of the Compose Compiler requires Kotlin version 1.5.31 but
       you appear to be using Kotlin version 1.6.0 which is not known to be compatible.  Please 
       fix your configuration (or `suppressKotlinVersionCompatibilityCheck` but don't say I
       didn't warn you!).
    k
    c
    4 replies · 3 participants
  • m

    MrPowerGamerBR

    11/17/2021, 1:36 PM
    How can I change a child element CSS when the parent is hovered with Compose Web's Style DSL? In CSS, it is like this
    .parent:hover .child { /* rules here */ }
    However I'm not able to figure out how to represent that in the Style DSL 😞
    a
    15 replies · 2 participants
  • m

    MrPowerGamerBR

    11/17/2021, 3:01 PM
    Now another question that is also related to the Style DSL: How do you organize your Stylesheets? Having everything in a single stylesheet makes everything look/feel messy, in SASS what I like doing is using
    @import
    statements to split the stylesheets in different files (so I could split stuff in files like
    layout.scss
    ,
    animations.scss
    , so on and so forth), but I'm not sure how I could do something similar in Compose Web. Inline Styles is maybe the proper way to keep everything organized (keep the style in the Composable component, yay!) but then you aren't able to use pseudo classes like
    hover
    , no keyframes, etc. Another alternative that I've found is having multiple stylesheets objects and using
    Style(StylesheetObjectHere)
    , but then multiple
    <style>
    tags are created (but maybe that isn't a huuuuge issue?). Using extension functions to split up isn't a solution because then you can't reference the style in the
    classes
    function.
    a
    1 reply · 2 participants
  • l

    LeoColman

    11/19/2021, 4:24 PM
    @NoLiveLiterals
    @Composable
    fun DonationForm() {
      var selected by remember { mutableStateOf(values[1]) }
      val coroutineScope = rememberCoroutineScope()
      
      val clientSecret = coroutineScope.async { startDonation(selected.toLong().times(100)) }
    Hey guys! How to make
    clientSecret
    render again everytime
    selected
    is changed?
    selected
    gets it's state correctly, but
    clientSecret
    is being calculated only once (and not recalculating on recomposition)
    b
    h
    +1
    22 replies · 4 participants
  • l

    LeoColman

    11/20/2021, 1:06 AM
    How to handle pathing? Like, I want to have a
    domain/home
    and a
    domain/lobby
    pages. Currently I hold a composable for each page and just replace the main composable, like an android Fragment. But doing it this way won't allow me to give the direct link to a specific fragment/page. How do you guys handle this?
    h
    1 reply · 2 participants
  • r

    rocketraman

    11/23/2021, 4:03 PM
    I'm playing around with MDC on compose-web using @Big Chungus’s project ⬆️ and am experimenting with sass integration, as it seems certain things with MDC are only possible with sass mixins. I've got it working but
    gradle build
    doesn't actually pick up any changes to the sass files -- only a
    clean
    +
    build
    works. Any ideas?
    b
    32 replies · 2 participants
  • b

    Big Chungus

    11/27/2021, 2:13 AM
    Are SVGs supported in rc5? Also is there any ETA for kotlin 1.6 support?
    n
    7 replies · 2 participants
  • h

    hfhbd

    12/01/2021, 3:55 PM
    What is the new way after the refactoring of cssselector api in rc10/12?
    CSSSelector.CSSClass(classname) style {..}.
    . Simple using
    ".$classname" style {...}
    does not. Edit: it does work, I made another mistake...
    o
    2 replies · 2 participants
  • a

    Akram Bensalem

    12/02/2021, 2:26 PM
    Is there any possibility to add Compose Web for this multiplatform project template? https://github.com/JetBrains/compose-jb/tree/master/templates/multiplatform-template ... It's very difficult to setup Compose multiplatform Project that include Android, Desktop and Web
    b
    h
    +1
    7 replies · 4 participants
  • c

    Christian Gaisl

    12/02/2021, 8:07 PM
    I took a look at compose web today but I’m not quite sure how the workflow is supposed to work. I took a look at the tutorials, which tell me to run my code using the gradle task jsBrowserRun. That works, but is kinda slow. Do I have to rebuild everything from scratch for every small change I do? Is there some kind of hot reload or preview functionality?
    👀 2
    o
    b
    +2
    4 replies · 5 participants
  • s

    saket

    12/03/2021, 8:04 PM
    can compose-web export html that can be hosted directly?
    h
    c
    +2
    19 replies · 5 participants
  • j

    Joost Klitsie

    12/04/2021, 2:00 PM
    Hello dear people! I wanted to have some fun with Compose for web 🙂 I was wondering, if I wanted to have an animation, for example an opacity animation from 0 to 1, should I use CSS or can I use compose animation methods? (like on jetpack compose)
    a
    6 replies · 2 participants
  • s

    Stefan Beyer

    12/05/2021, 2:39 PM
    Hi there! I was trying the tutorial at https://github.com/JetBrains/compose-jb/tree/master/tutorials/Web/Getting_Started but when running
    ./gradlew jsBrowserRun --continuous
    , I get this error:
    [webpack-cli] Unable to load '@webpack-cli/serve' command
    [webpack-cli] TypeError: options.forEach is not a function
    [webpack-cli] TypeError: options.forEach is not a function
    I don't have much experience with frontend technologies, but I found an issue in webpack-cli that sounds like my problem: https://github.com/webpack/webpack-cli/issues/2990 The issue seems to be, that webpack-cli/serve 1.6.0 must only be used with webpack-cli 4.9.1 or higher. Looking at the generated yarn.lock file in the build directory, I find that it uses:
    "@webpack-cli/serve@^1.5.0":
    version "1.6.0"
    [...]
    webpack-cli@4.7.1:
    version "4.7.1"
    and from the limited stuff that I understand from the linked issue, these versions don't seem to be compatible. Now my question is: Can I somehow fix this? Maybe via some fancy config in the gradle DSL? Or is this a bug that needs to be fixed in compose? I am staring at this and have no clue what to do here 😅
    a
    r
    +1
    5 replies · 4 participants
  • j

    Joost Klitsie

    12/06/2021, 11:37 AM
    Hi people! I wanted to show the fun I had over this weekend 🙂 virtual list, aka LazyColumn 🙂 Sometimes a bit jumpy after a big scroll jump, but otherwise functions as how it should (and it usually also recovers). Takes all sizes and composables as list items (as you can see there are 2 different list items, 1 of which has a varying height). It is a list of 100_000 elements, You can see on the right how many are rendered at a time. (also if I don't record my screen it is a lot smoother). For a beginner like me, compose is a very useful tool! I am hoping to use it in the future 🙂
    2021-12-06 12-28-17.mp4
    👏 6
    🤘 3
    h
    3 replies · 2 participants
  • f

    Francis Mariano

    12/06/2021, 1:22 PM
    Hello everyone. Are there any milestone about compose-web rendering directly on canvas (with no DOM)???
    👀 4
    j
    o
    +1
    7 replies · 4 participants
  • r

    rocketraman

    12/07/2021, 2:37 PM
    I'm kind of surprised #compose-desktop has more interest / traffic (non-scientifically judging by number of people in the channel, frequency of posts and number of reactions) than #compose-web does. Is #compose-desktop simply solving a more immediate gap in the JVM world, whereas #compose-web has many existing alternatives people are mostly happy with? Or maybe #compose-web just got a later start.
    👀 2
    c
    s
    +5
    17 replies · 8 participants
  • s

    spierce7

    12/07/2021, 10:47 PM
    I’m curious - are we going to see anything around
    compose-web canvas
    in Q1 2022?
    r
    3 replies · 2 participants
  • d

    Daniel Perez

    12/08/2021, 3:53 AM
    Is there an API that allows you to stick an HTML String into Compose for Web? I am attempting to generate HTML from Markdown
    a
    o
    4 replies · 3 participants
  • c

    corneil

    12/09/2021, 9:58 AM
    I've been looking for good options for a solid Material based UI. I notice that https://mui.com is React specific. https://materializecss.com/ is 2 years old since last update. How about some kotlin-wrappers for https://github.com/material-components/material-components-web It seems like to good candidate for base components without being tied to a specific framework and it seems that you can easily adjust color and shape themes and limit your css to only the components you actually use. Thoughts?
    r
    b
    +1
    5 replies · 4 participants
Powered by Linen
Title
c

corneil

12/09/2021, 9:58 AM
I've been looking for good options for a solid Material based UI. I notice that https://mui.com is React specific. https://materializecss.com/ is 2 years old since last update. How about some kotlin-wrappers for https://github.com/material-components/material-components-web It seems like to good candidate for base components without being tied to a specific framework and it seems that you can easily adjust color and shape themes and limit your css to only the components you actually use. Thoughts?
r

Robert Jaros

12/09/2021, 10:21 AM
You could take a look: https://github.com/mpetuska/kamp/tree/feature/compose/lib/kmdc
b

Big Chungus

12/09/2021, 10:23 AM
It's now been extracted since some people wanted to help move this along quicker. github.com/mpetuska/kmdc
Bear in mind that it's FAR from ready - use at your own risk.
c

corneil

12/09/2021, 10:23 AM
This is good to know. 👍
r

rocketraman

12/09/2021, 3:32 PM
@corneil You may also be interested in these comments about theming kmdc: https://kotlinlang.slack.com/archives/C01F2HV7868/p1638208024192600?thread_ts=1621797018.040900&amp;cid=C01F2HV7868
View count: 5