or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

component-libraries.mdgradle-plugin.mdhtml-web.mdindex.md
tile.json

tessl/maven-compose-multiplatform

Declarative framework for sharing UIs across multiple platforms with Kotlin, including Gradle plugin, component libraries, and web support

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
mavenpkg:maven/org.jetbrains.compose/compose-gradle-plugin@1.8.x

To install, run

npx @tessl/cli install tessl/maven-compose-multiplatform@1.8.0

index.mddocs/

Compose Multiplatform

Compose Multiplatform is a declarative framework for sharing UIs across multiple platforms with Kotlin. It enables developers to build native applications for iOS, Android, Desktop (Windows, macOS, Linux), and Web platforms using a single Kotlin codebase. Based on Jetpack Compose, it provides a unified API for creating responsive, modern user interfaces with platform-specific optimizations.

Package Information

  • Package Name: org.jetbrains.compose:compose-gradle-plugin
  • Package Type: Gradle Plugin
  • Language: Kotlin
  • Installation: Apply plugin id("org.jetbrains.compose") in your build.gradle.kts

Core Imports

Plugin application:

plugins {
    id("org.jetbrains.compose") version "1.8.2"
}

repositories {
    jetbrainsCompose()
}

Dependency management:

dependencies {
    implementation(compose.desktop.currentOs)
    implementation(compose.material3)
    implementation(compose.components.resources)
    implementation(compose.html.core)
}

Basic Usage

// Apply plugin and configure desktop application
plugins {
    id("org.jetbrains.compose")
}

compose {
    desktop {
        application {
            mainClass = "MainKt"
            
            nativeDistributions {
                targetFormats(TargetFormat.Dmg, TargetFormat.Msi, TargetFormat.Deb)
                packageName = "MyApp"
                packageVersion = "1.0.0"
            }
        }
    }
    
    resources {
        publicResClass = false
        nameOfResClass = "Res"
        generateResClass = auto
    }
}

dependencies {
    implementation(compose.desktop.currentOs)
    implementation(compose.material3)
    implementation(compose.ui)
    implementation(compose.components.resources)
}

Architecture

Compose Multiplatform consists of several key components:

  • Gradle Plugin: Build tooling and dependency management for multiplatform Compose projects
  • Component Libraries: Reusable UI components (Resources, SplitPane, AnimatedImage) with cross-platform implementations
  • HTML/Web Support: Complete web development framework with DOM manipulation, CSS styling, and SVG support
  • Platform Abstraction: Unified APIs that compile to platform-specific implementations while maintaining native performance

Capabilities

Gradle Plugin Configuration

Complete build system integration for Compose Multiplatform projects, providing application packaging, dependency management, and platform-specific configurations.

// Plugin extension
abstract class ComposeExtension {
    abstract val desktop: DesktopExtension
    abstract val resources: ResourcesExtension
    abstract val web: WebExtension
}

// Desktop application configuration
abstract class JvmApplication {
    var mainClass: String?
    val nativeDistributions: JvmApplicationDistributions
    fun nativeDistributions(configure: JvmApplicationDistributions.() -> Unit)
}

Gradle Plugin

Component Libraries

Cross-platform component libraries providing resources management, UI widgets, and tooling support with consistent APIs across all platforms.

// Resources
@Composable fun stringResource(resource: StringResource): String
@Composable fun painterResource(resource: DrawableResource): Painter

// SplitPane
@Composable fun VerticalSplitPane(
    modifier: Modifier = Modifier,
    splitPaneState: SplitPaneState = rememberSplitPaneState(),
    content: SplitPaneScope.() -> Unit
)

// UI Tooling Preview
@Target(AnnotationTarget.FUNCTION)
annotation class Preview

Component Libraries

HTML/Web Development

Complete web development framework with type-safe DOM manipulation, CSS styling, SVG support, and testing utilities for building web applications with Compose.

// DOM Elements
@Composable fun Div(
    attrs: AttrBuilderContext<HTMLDivElement>? = null,
    content: ContentBuilder<HTMLDivElement>? = null
)

@Composable fun Button(
    attrs: AttrBuilderContext<HTMLButtonElement>? = null,
    content: ContentBuilder<HTMLButtonElement>? = null
)

// Styling
interface StyleScope {
    fun property(propertyName: String, value: StylePropertyValue)
}

// SVG Support  
@Composable fun Svg(
    viewBox: String? = null,
    attrs: AttrBuilderContext<SVGSVGElement>? = null,
    content: ContentBuilder<SVGSVGElement>? = null
)

HTML/Web Libraries

Common Types

// Target formats for desktop distributions
enum class TargetFormat {
    AppImage, Deb, Rpm, Dmg, Pkg, Exe, Msi;
    val isCompatibleWithCurrentOS: Boolean
}

// Resource environment for localization
class ResourceEnvironment internal constructor(
    internal val language: LanguageQualifier,
    internal val region: RegionQualifier,
    internal val theme: ThemeQualifier,
    internal val density: DensityQualifier
)

// CSS units system
interface CSSUnit
interface CSSUnitLength : CSSUnit
val Number.px: CSSLengthValue
val Number.em: CSSLengthValue
val Number.percent: CSSPercentageValue