Introduction: Demo projects powered by Compose for Web. / DON'T USE IN PRODUCTION!
More: Author   ReportBugs   OfficialWebsite   

JetBrains team project

Disclaimer: This is the result of a project for the 8th Annual JetBrains Hackathon. It's only a proof of concept, and the JetBrains team doesn't have any plans to support or develop this project and doesn't recommend using it in production. It is not related to Google, except insofar as it is based on Jetpack Compose. As far as we know, Google does not have any plans to support or develop it.

Jetpack Compose is Android’s modern toolkit for building native UIs using the Kotlin language. All components are rewritten from scratch and painted directly on the canvas. It was announced and open-sourced at Google I/O 2019. This talk on Declarative UI Patterns presents an overview of the motivations and goals behind the project.

JetPack Compose has 2 separate parts:

  • The Kotlin compiler plugin and runtime, which provide a language feature to perform incremental computations on trees using Positional Memoization. This makes it possible to describe the UI in a declarative way as a transform function on the state. It is actually able to maintain not only the Android UI components tree but also any other tree-like structure, such as HTML DOM and SVG.
  • The UI framework, which implements layout, text shaping, painting, rasterization, compositing, and a set of completely rewritten Android components.

It currently doesn't support platforms other than Android, but the core was developed without a dependency on Android and the UI framework depends only on things like canvas, font, input, and other basics.

Jetpack Compose for Web

With this project we tried to adapt Jetpack Compose for the JavaScript world. The main idea is to allow you to share code and expertise between platforms, build web applications in pure Kotlin.

Jetpack Compose for Web consists of:

  • The compiler plugin, adapted for the new Kotlin/JS compiler backend.
  • The runtime library, ported to Kotlin/JS.
  • A simple UI library to work with DOM-elements.

Feel free to ask any questions and share your feedback. Join #compose-web channel in the official Kotlin Slack.

P.S. JetBrains plans to continue experimenting with this technology and we are looking for UI Framework Developer (JetBrains Compose Team).

Online demo

Running demos

./gradlew jsRun

About Me
GitHub: Trinea
Facebook: Dev Tools