Compose Multiplatform is a framework for creating user interfaces on desktop, web, and mobile devices. It extends Android’s Jetpack Compose and allows you to use a familiar API to develop apps for iOS and desktop.
A new technology for building desktop apps on Java and Kotlin is always great news for us. We have already developed a web view for JavaFX, Swing, and SWT. And now, we present a web view for Compose Multiplatform on the desktop.
The state of web views
Jetpack Compose doesn’t have a web view component. Instead, developers use
Android’s native WebView. Which is part of the older View system —
a UI technology that preceded Compose.
Compose Multiplatform doesn’t have a web view component either. Instead, developers must rely on the components available on a platform. Or, more precisely, multiple platforms: two on mobile and three on desktop.
Everything is fine on mobile. Compose Multiplatform apps can use WebView on
Android and a component called WKWebView on iOS. But on a good old desktop,
things get more complicated.
Desktop platforms also provide native web views, but they’re unavailable in Compose Multiplatform. However, as Compose has interop with Swing and theoretically with JavaFX, developers could use web view components for those classic desktop toolkits. That was the only option until October 2024.
In October 2024, we released JxBrowser 8.0.0, the first web view component for Compose Multiplatform for all desktop platforms. All three, Windows, macOS, and Linux. JxBrowser works directly with Compose and doesn’t use the Swing interop layer.
What is JxBrowser
JxBrowser is a commercial web view component. It’s based on Chromium and also available for Swing, JavaFX, and SWT.
JxBrowser is designed for companies with critical use cases, deadlines, and high standards for third-party software and vendors. The software comes with confidential technical support directly from the product engineers. The guaranteed first response time, or SLA, is one business day. JxBrowser keeps Chromium up-to-date with the latest security patches.
Using web view in Compose
JxBrowser provides an idiomatic Kotlin API and is easy to include to an existing desktop application. The following code snippet shows how to add a web view to a Compose Multiplatform application:
fun main() {
// Create and run the Chromium engine.
val engine = Engine(RenderingMode.OFF_SCREEN)
val browser = engine.newBrowser()
singleWindowApplication(
title = "Compose Desktop BrowserView",
state = WindowState(width = 800.dp, height = 600.dp),
) {
// Creating a Compose component for rendering web content
// loaded in the given Browser instance.
BrowserView(browser)
DisposableEffect(Unit) {
browser.navigation.loadUrl("https://html5test.teamdev.com")
onDispose {
// Close the engine when the app window leaves the composition.
engine.close()
}
}
}
}
You can find the corresponding Gradle configuration and full code in the Quick Start guide.
A browser view for Compose in action.
In the code above, we create instances of Engine and Browser. These classes
represent actual Chromium entities: the Chromium main process and one of
the browsers. Neither the Engine nor the Browser participates in
the composition, but you have a fully functional browser as soon as you
create them. You can also create as many engines and browsers as you need.
To learn more about where and how, consider reading our guide on
the JxBrowser architecture.
To add the actual web view to the composition, you need to call BrowserView
composable for a browser you want to show in your application.
Kotlin-JavaScript bridge
The main feature of any web view is calling JavaScript from Kotlin and back. In JxBrowser, you can obtain JavaScript objects and access their properties and methods directly from your Kotlin code:
val shoppingCart = frame.executeJavaScript<JsObject>("window.shoppingCart")
val items: JsArray = shoppingCart.call("getItems")
That includes the DOM nodes:
val body = frame.executeJavaScript<Element>("document.body")
val bodyClone = body.call("cloneNode")
Similarly, you can inject any Kotlin object to JavaScript and call it from the page:
class KotlinObject {
@JsAccessible
fun sayHelloTo(firstName: String) = "Hello $firstName!"
}
// This callback is executed before the page executes its own scripts.
browser.register(InjectJsCallback { params ->
val window = params.frame().executeJavaScript<JsObject>("window")
window?.putProperty("kotlin", KotlinObject())
InjectJsCallback.Response.proceed()
})
On every call between the Kotlin and JavaScript worlds, JxBrowser performs an automatic type conversion. You can read more about the Kotlin-JavaScript bridge and how the type conversion works in the JavaScript guide.
Other JxBrowser features
JxBrowser is your bridge to all functionality available out-of-the-box for web developers but not in desktop Kotlin. For example, check out our detailed tutorial on remote screen sharing in Compose Desktop.
The web view is a common choice when you need to generate beautiful PDF files. When you have a template for your PDF file in HTML and CSS, you can load it in JxBrowser and generate a PDF file.
Similar to Android’s WebView, JxBrowser allows you to take a screenshot of
the browser. With utilities provided by any JRE, you can
take a screenshot and save it to a PNG image file.
In enterprise environments, authentication is crucial. JxBrowser supports the same authentication protocols as Chromium, and allows you to use Kerberos, WebAuthn, U2F, and other authentication technologies.
Besides that, JxBrowser offers a fine-grained control over the network traffic, advanced printing API, Chrome extensions, proprietary codecs support, proxy, and many other features. Consider reading our guides to find exactly what you need.
Sending…
Sorry, the sending was interrupted
Please try again. If the issue persists, contact us at info@teamdev.com.
Your personal JxBrowser trial key and quick start guide will arrive in your Email Inbox in a few minutes.