# kotlin-js

Published articles for kotlin-js.

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## Measuring and analyzing the KotlinJS bundle size - Gustavo Fão Valvassori

DevFeed: [Measuring and analyzing the KotlinJS bundle size - Gustavo Fão Valvassori](<https://devfeed.tech/articles/measuring-and-analyzing-the-kotlinjs-bundle-size-gustavo-fao-valvassori-38293.md>)

Original publisher: [Read original article](<https://touchlab.co/measuring-kotlin-js-bundle>)

Published: 2024-02-16T00:00:00Z

Content type: tutorial

Language: en

Sources: [Touchlab | Enterprise Mobile Innovation & Development](<https://devfeed.tech/sources/touchlab-enterprise-mobile-innovation-development.md>)

Topics: [kotlinjs](<https://devfeed.tech/topics/kotlinjs.md>), [Webpack](<https://devfeed.tech/topics/webpack.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [analyze](<https://devfeed.tech/tags/analyze.md>), [article](<https://devfeed.tech/tags/article.md>), [devtools](<https://devfeed.tech/tags/devtools.md>), [gradle](<https://devfeed.tech/tags/gradle.md>), [gradle-plugin](<https://devfeed.tech/tags/gradle-plugin.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [kotlin-js](<https://devfeed.tech/tags/kotlin-js.md>), [kotlinjs](<https://devfeed.tech/tags/kotlinjs.md>), [lighthouse](<https://devfeed.tech/tags/lighthouse.md>), [measuring](<https://devfeed.tech/tags/measuring.md>), [performance](<https://devfeed.tech/tags/performance.md>)

### AI overview

This tutorial explains how KotlinJS projects are compiled into JavaScript and bundled with Webpack. It presents two ways to measure and analyze bundle size: examining source maps with SourceMapExplorer or Chrome Lighthouse, and using WebpackBundleAnalyzer.

### Source excerpt

Smaller JavaScript bundle size helps improve a website's loading speed and performance. In this article, we present two different ways of analyzing and measuring KotlinJS bundle size.

## Listening for element events with Compose for Web - Gustavo Fão Valvassori

DevFeed: [Listening for element events with Compose for Web - Gustavo Fão Valvassori](<https://devfeed.tech/articles/listening-for-element-events-with-compose-for-web-gustavo-fao-valvassori-38178.md>)

Original publisher: [Read original article](<https://touchlab.co/compose-html-events>)

Published: 2024-01-26T00:00:00Z

Content type: tutorial

Language: en

Sources: [Touchlab | Enterprise Mobile Innovation & Development](<https://devfeed.tech/sources/touchlab-enterprise-mobile-innovation-development.md>)

Topics: [compose-for-web](<https://devfeed.tech/topics/compose-for-web.md>), [Web](<https://devfeed.tech/topics/web.md>), [draggable](<https://devfeed.tech/topics/draggable.md>), [Kotlin](<https://devfeed.tech/topics/kotlin.md>)

Tags: [browser](<https://devfeed.tech/tags/browser.md>), [compose-for-web](<https://devfeed.tech/tags/compose-for-web.md>), [compose-multiplatform](<https://devfeed.tech/tags/compose-multiplatform.md>), [css](<https://devfeed.tech/tags/css.md>), [draggable](<https://devfeed.tech/tags/draggable.md>), [event](<https://devfeed.tech/tags/event.md>), [kotlin](<https://devfeed.tech/tags/kotlin.md>), [kotlin-js](<https://devfeed.tech/tags/kotlin-js.md>), [kotlin-multiplatform](<https://devfeed.tech/tags/kotlin-multiplatform.md>)

### AI overview

This tutorial explains how to handle HTML element events in Compose for Web. It covers common event listeners, updating composable state from clicks and input changes, and using side effects to implement more complex behavior such as a draggable window.

### Source excerpt

In a declarative world, events are the main way to interact with the elements, and most components have a way to listen for them.

## Using CSS libraries with Compose for Web - Gustavo Fão Valvassori

DevFeed: [Using CSS libraries with Compose for Web - Gustavo Fão Valvassori](<https://devfeed.tech/articles/using-css-libraries-with-compose-for-web-gustavo-fao-valvassori-38180.md>)

Original publisher: [Read original article](<https://touchlab.co/compose-html-style-libraries>)

Published: 2023-12-22T00:00:00Z

Content type: tutorial

Language: en

Sources: [Touchlab | Enterprise Mobile Innovation & Development](<https://devfeed.tech/sources/touchlab-enterprise-mobile-innovation-development.md>)

Topics: [Compose](<https://devfeed.tech/topics/compose.md>), [compose-for-web](<https://devfeed.tech/topics/compose-for-web.md>), [CSS](<https://devfeed.tech/topics/css.md>), [Webpack](<https://devfeed.tech/topics/webpack.md>), [Gradle](<https://devfeed.tech/topics/gradle.md>)

Tags: [cdn](<https://devfeed.tech/tags/cdn.md>), [compose](<https://devfeed.tech/tags/compose.md>), [compose-for-web](<https://devfeed.tech/tags/compose-for-web.md>), [compose-multiplatform](<https://devfeed.tech/tags/compose-multiplatform.md>), [css](<https://devfeed.tech/tags/css.md>), [gotchas](<https://devfeed.tech/tags/gotchas.md>), [gradle](<https://devfeed.tech/tags/gradle.md>), [kotlin-js](<https://devfeed.tech/tags/kotlin-js.md>), [kotlin-multiplatform](<https://devfeed.tech/tags/kotlin-multiplatform.md>), [npm](<https://devfeed.tech/tags/npm.md>), [third-party](<https://devfeed.tech/tags/third-party.md>), [tips](<https://devfeed.tech/tags/tips.md>)

### AI overview

A tutorial on importing and using third-party CSS styles in Compose for Web. It explains three approaches: loading styles from a CDN, adding CSS files to project resources, and managing styles with NPM. It also introduces enabling CSS and SCSS support in Webpack through Gradle configuration.

### Source excerpt

Using third-party styles have a few gotchas. Here are some tips and tricks to help you out.

## Styling your components on Compose Web - Gustavo Fão Valvassori

DevFeed: [Styling your components on Compose Web - Gustavo Fão Valvassori](<https://devfeed.tech/articles/styling-your-components-on-compose-web-gustavo-fao-valvassori-38221.md>)

Original publisher: [Read original article](<https://touchlab.co/html-compose-styles>)

Published: 2023-12-15T00:00:00Z

Content type: tutorial

Language: en

Sources: [Touchlab | Enterprise Mobile Innovation & Development](<https://devfeed.tech/sources/touchlab-enterprise-mobile-innovation-development.md>)

Topics: [compose-for-web](<https://devfeed.tech/topics/compose-for-web.md>), [Compose](<https://devfeed.tech/topics/compose.md>), [CSS](<https://devfeed.tech/topics/css.md>), [ui](<https://devfeed.tech/topics/ui.md>), [web applications](<https://devfeed.tech/topics/web-applications.md>)

Tags: [components](<https://devfeed.tech/tags/components.md>), [compose](<https://devfeed.tech/tags/compose.md>), [compose-for-web](<https://devfeed.tech/tags/compose-for-web.md>), [compose-multiplatform](<https://devfeed.tech/tags/compose-multiplatform.md>), [css](<https://devfeed.tech/tags/css.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [kotlin-js](<https://devfeed.tech/tags/kotlin-js.md>), [kotlin-multiplatform](<https://devfeed.tech/tags/kotlin-multiplatform.md>), [ui](<https://devfeed.tech/tags/ui.md>)

### AI overview

This tutorial explains how to style Compose for Web components with CSS. It covers inline styles, reusable stylesheets, custom CSS properties, and element type selectors.

### Source excerpt

Styling your UI is a very important part of any application. This article will explore how to style our Compose Web components.

## Compose Web Components and HTML Attributes

DevFeed: [Compose Web Components and HTML Attributes](<https://devfeed.tech/articles/exploring-compose-web-gustavo-fao-valvassori-38220.md>)

Original publisher: [Read original article](<https://touchlab.co/html-compose-components>)

Published: 2023-12-08T00:00:00Z

Content type: tutorial

Language: en

Sources: [Touchlab | Enterprise Mobile Innovation & Development](<https://devfeed.tech/sources/touchlab-enterprise-mobile-innovation-development.md>)

Topics: [Compose](<https://devfeed.tech/topics/compose.md>), [HTML](<https://devfeed.tech/topics/html.md>), [ui](<https://devfeed.tech/topics/ui.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [article](<https://devfeed.tech/tags/article.md>), [code](<https://devfeed.tech/tags/code.md>), [components](<https://devfeed.tech/tags/components.md>), [compose](<https://devfeed.tech/tags/compose.md>), [compose-multiplatform](<https://devfeed.tech/tags/compose-multiplatform.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [html](<https://devfeed.tech/tags/html.md>), [kotlin-js](<https://devfeed.tech/tags/kotlin-js.md>), [kotlin-multiplatform](<https://devfeed.tech/tags/kotlin-multiplatform.md>), [ui](<https://devfeed.tech/tags/ui.md>), [web](<https://devfeed.tech/tags/web.md>)

### AI overview

This tutorial explores basic Compose Web components, how they render as HTML, and how to customize them with HTML-style attributes and event handling. It uses a simple form to demonstrate IDs, labels, buttons, state, and form submission.

### Source excerpt

Compose for HTML has different components than Compose for SKIA. In this article, we will explore and learn how to configure a few of them.

## Getting Started with Compose for Web - Gustavo Fão Valvassori

DevFeed: [Getting Started with Compose for Web - Gustavo Fão Valvassori](<https://devfeed.tech/articles/getting-started-with-compose-for-web-gustavo-fao-valvassori-38179.md>)

Original publisher: [Read original article](<https://touchlab.co/compose-html-getting-started>)

Published: 2023-12-01T00:00:00Z

Content type: tutorial

Language: en

Sources: [Touchlab | Enterprise Mobile Innovation & Development](<https://devfeed.tech/sources/touchlab-enterprise-mobile-innovation-development.md>)

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

Tags: [compose-for-web](<https://devfeed.tech/tags/compose-for-web.md>), [compose-multiplatform](<https://devfeed.tech/tags/compose-multiplatform.md>), [cross-platform](<https://devfeed.tech/tags/cross-platform.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>), [intellij-idea](<https://devfeed.tech/tags/intellij-idea.md>), [kotlin](<https://devfeed.tech/tags/kotlin.md>), [kotlin-js](<https://devfeed.tech/tags/kotlin-js.md>), [kotlin-multiplatform](<https://devfeed.tech/tags/kotlin-multiplatform.md>)

### AI overview

This tutorial explains how to get started with Compose for Web using its HTML runtime. It introduces the available web runtimes, discusses their implications for code sharing, and describes creating and configuring a Kotlin Multiplatform project with Compose dependencies and an HTML entry point.

### Source excerpt

Compose multiplatform is a promising alternative for building cross-platform UIs. In this article, we'll see how to get started with Compose for Web using the HTML version.