Documentation

Version:
8.2.1 7.41.6
List icon Contents
Close
Gradle
Maven

JxBrowser in Compose Desktop

The easiest way to start working with JxBrowser in a Compose Gradle project is to clone the GitHub repository where everything is already set up and ready to go.

Prerequisites

Getting the project

Clone the GitHub repository using the following command:

git clone https://github.com/TeamDev-IP/JxBrowser-QuickStart-Gradle-Compose.git
cd JxBrowser-QuickStart-Gradle-Compose

Run the Compose application

Use the following command to build and run Compose application:

./gradlew run -Djxbrowser.license.key=<your_license_key>

Once launched, you will see a Compose application with a BrowserView component displaying https://html5test.teamdev.com:

BrowserView in Compose app

Project overview

This section explains how the Gradle project is configured to include JxBrowser and how a JxBrowser BrowserView component is embedded into a Compose Desktop scene to display content of the loaded web page.

Configuring the Gradle project

The Gradle project uses the JxBrowser Gradle plugin to add the necessary JxBrowser dependencies and fetch the Chromium binaries for the current platform.

Here’s how the build.gradle.kts file is configured:

Kotlin
plugins {
    java
    application
    kotlin("jvm") version "2.0.0"

    // Allows adding JxBrowser dependencies.
    id("com.teamdev.jxbrowser") version "1.2.1"

    // Adds the Compose plugins for easy configuration.
    id("org.jetbrains.compose") version "1.7.0-rc01"
    id("org.jetbrains.kotlin.plugin.compose") version "2.0.0"
}

repositories {
    google()
    mavenCentral()
}

jxbrowser {
    // Use the latest stable JxBrowser version.
    version = "8.2.1"
}

application {
    // Define the main class for the Kotlin application.
    mainClass.set("com.teamdev.jxbrowser.quickstart.gradle.compose.AppKt")
}

dependencies {
    // Detects the current platform and adds the corresponding Chromium binaries.
    implementation(jxbrowser.currentPlatform)

    // Adds dependency to the Compose Desktop UI toolkit integration.
    implementation(jxbrowser.compose)

    // Adds dependency to the Compose Desktop UI toolkit for the current platform.
    implementation(compose.desktop.currentOs)
}

tasks.withType<JavaExec> {
    // Assign all Java system properties from the command line to
    // the JavaExec task to pass the JxBrowser license key.
    systemProperties(System.getProperties().mapKeys { it.key as String })
}

Embedding JxBrowser into Compose

The Compose Desktop application is written in Kotlin and uses the Compose Desktop UI toolkit to create a window with a BrowserView component that displays the content of the loaded web page:

Kotlin
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.WindowState
import androidx.compose.ui.window.singleWindowApplication
import com.teamdev.jxbrowser.dsl.Engine
import com.teamdev.jxbrowser.dsl.browser.navigation
import com.teamdev.jxbrowser.engine.RenderingMode.OFF_SCREEN
import com.teamdev.jxbrowser.view.compose.BrowserView

fun main() = singleWindowApplication(
    title = "Compose Desktop BrowserView",
    state = WindowState(width = 700.dp, height = 500.dp),
) {
    val engine = remember { Engine(OFF_SCREEN) }
    val browser = remember { engine.newBrowser() }

    BrowserView(browser)

    LaunchedEffect(Unit) {
        browser.navigation.loadUrl("https://html5test.teamdev.com")
    }
}

What’s next

See the code