# Getting Started with Compose for Web

DevFeed: [Getting Started with Compose for Web](<https://devfeed.tech/articles/getting-started-with-compose-for-web-24711.md>)

Original publisher: [Read original article](<https://dev.to/touchlab/getting-started-with-compose-for-web-455n>)

Author: Gustavo Fão Valvassori

Published: 2023-12-01T21:34:32Z

Content type: tutorial

Language: en

Sources: [Touchlab](<https://devfeed.tech/sources/touchlab.md>)

Topics: [compose-for-web](<https://devfeed.tech/topics/compose-for-web.md>), [Compose](<https://devfeed.tech/topics/compose.md>), [Kotlin](<https://devfeed.tech/topics/kotlin.md>), [multiplatform](<https://devfeed.tech/topics/multiplatform.md>), [IntelliJ IDEA](<https://devfeed.tech/topics/intellij-idea.md>), [Gradle](<https://devfeed.tech/topics/gradle.md>), [HTML](<https://devfeed.tech/topics/html.md>), [Canvas](<https://devfeed.tech/topics/canvas.md>)

Tags: [canvas](<https://devfeed.tech/tags/canvas.md>), [coding](<https://devfeed.tech/tags/coding.md>), [community](<https://devfeed.tech/tags/community.md>), [compose](<https://devfeed.tech/tags/compose.md>), [compose-for-web](<https://devfeed.tech/tags/compose-for-web.md>), [development](<https://devfeed.tech/tags/development.md>), [engineering](<https://devfeed.tech/tags/engineering.md>), [getting-started](<https://devfeed.tech/tags/getting-started.md>), [gradle](<https://devfeed.tech/tags/gradle.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [html](<https://devfeed.tech/tags/html.md>), [idea](<https://devfeed.tech/tags/idea.md>), [inclusive](<https://devfeed.tech/tags/inclusive.md>), [introduction](<https://devfeed.tech/tags/introduction.md>), [kotlin](<https://devfeed.tech/tags/kotlin.md>), [multiplatform](<https://devfeed.tech/tags/multiplatform.md>), [software](<https://devfeed.tech/tags/software.md>), [ui](<https://devfeed.tech/tags/ui.md>), [webdev](<https://devfeed.tech/tags/webdev.md>)

## AI overview

A beginner tutorial on building web applications with Compose for Web and Kotlin. It introduces the JS + HTML and Wasm + Canvas runtimes, explains their components and experimental status, and outlines project setup using IntelliJ IDEA, Kotlin Multiplatform, Compose, JavaScript source sets, dependencies, and an HTML entry page.

## Source excerpt

If you are a Kotlin developer like me, you are probably very excited about Jetpack Compose. It's a modern UI toolkit for developing apps, and with the great work from JetBrains, it's becoming a really interesting solution. As a mobile developer, I've never gone in the weeds on how to properly develop sites with HTML, CSS, and JS. My closest experience was with React Native back in 2018. But now, with Compose, using a Kotlin DSL, I feel comfortable on doing this. Compose Runtime and Component Library Before creating a project and start coding, it's important to have a small introduction to Compose runtimes. As of now, Compose has two different runtimes on the web: JS + HTML Wasm + Canvas They both use the Compose Runtime underneath, but they use different components. Long story short: The HTML version will have HTML composable components (like H1, P, Span, Input, Div, etc.) The Canvas version will have similar components as the Android version as it uses SKIA to draw on the Canvas. Both of them are experimental. Note that choosing how you want to build your application will impact on possible code-sharing with native if this is what you want. For this series of posts, I'll use the HTML version and I will be able to explore more the web components. Creating the project Now that we know what runtime/components we want to use, we need to create a project. My first idea was to use the KMP project wizard, but unfortunately, the Web target is not available as an option for now. As a workaround, I had to create a new clean project using IntelliJ IDEA and add the dependencies manually. Using a clean template you will reduce the amount of code that needs to be removed/updated to make the project work. But if you prefer to use any other IDE/Template, feel free to do so and share your experience with us later :) With that, the configuration is completed with a few extra lines: Change the Kotlin plugin from JVM to MULTIPLATFORM Add the Compose plugin Declare JS source-sets Impor