You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
Erik Huizinga e075f68326
Update README.md (#2163)
3 years ago
..
Building_UI
Controlled_Uncontrolled_Inputs
Events_Handling Update README.md (#2163) 3 years ago
Getting_Started Move to 1.1.0 (#1882) 3 years ago
Style_Dsl
Using_Effects Fix a bug that the checkbox doesn't toggle in "Code Sample using effects" in tutorials/Web/Using_Effects/README.md (#2014) 3 years ago
Using_Test_Utils
README.md Docs: Js only projects are now supported (#2154) 3 years ago

README.md

Compose for Web

Compose for Web allows you to build reactive user interfaces for the web in Kotlin, using the concepts and APIs of Jetpack Compose to express the state, behavior, and logic of your application.

Compose for Web provides multiple ways of declaring user interfaces in Kotlin code, allowing you to have full control over your website layout with a declarative DOM API.

Tutorials:

Getting Started With Compose for Web - create and configure a simple project

Building web UI - overview of the basic features Compose for Web provides to build web UIs

Handing Events - a short overview of Events handling with compose web

Controlled and Uncontrolled inputs - overview of Controlled and Uncontrolled inputs

Style DSL - about styling the composable components in web

Using test-utils - about unit testing for @Composable components based on HTML DOM

Integration with Ktor - this is actually not a Compose tutorial, but since integration of Kotlin/JS with Ktor is very popular scenario, we decided to add it here

Examples:

What's included (modules):

Module compose.runtime

It provides fundamental building blocks of Compose's programming model and state management. Compose for Web uses Compose's runtime implementation.

Dependency:

// it's assumed that plugin id("org.jetbrains.compose") is applied
dependencies {
    implementation(compose.runtime)
}

Useful links:

Compose's runtime API reference and docs

Module compose.web.core

It provides:

  • DSL for building Composable components based on HTML DOM
  • Comprehensive CSS-in-Kotlin/JS API

Please have a look at tutorials to learn more about compose.web.core

Dependency:

// it's assumed that plugin id("org.jetbrains.compose") is applied
dependencies {
    implementation(compose.web.core)
}

Module compose.web.svg

It provides a collection of Composable functions representing SVG elements. These functions can be used to build Composable web UI components based on SVG.

Experimental module: The API in this module is not stabilized yet and breaking changes can be expected.

Dependency:

// it's assumed that plugin id("org.jetbrains.compose") is applied
dependencies {
    implementation(compose.web.svg)
}

Useful links:

Module compose.web.testUtils

It provides a few util functions to simplify the unit testing of Composable components based on HTML DOM.

Dependency:

// it's assumed that plugin id("org.jetbrains.compose") is applied
sourceSets {
    val jsTest by getting {
        implementation(kotlin("test-js"))
        implementation(compose.web.testUtils)
    }
}

Useful links:

Module compose.web.widgets (Deprecated)

It provides a collection of Composable components (based on compose.web.core) which try to conform to the API and behaviour of some widgets from Jetpack Compose UI: Column, Row, etc.