Use HTML tag in Compose for web / Kotlin Wasm

sz21106677 commented 1 year ago

Is there any existing method to insert HTML native tags in Compose?

alexzhirkevich commented 1 year ago

You probably can add html with absolute position next to the compose render canvas and set its position from compose wasm code

alexzhirkevich commented 1 year ago

Can be a great enhancement to have an HTMLView wasm composable that will allow to seamlessly use compose-html inside of it

eymar commented 1 year ago

There is no such API out of a box for now.

sc941737 commented 10 months ago

You probably can add html with absolute position next to the compose render canvas and set its position from compose wasm code

I've been doing this, works for me for now.

Code sample:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sample</title>
    <script src="skiko.js"></script>
</head>
<body>
<div id="root" style="z-index: 1"></div>
<main>
    <canvas id="ComposeTarget" width="800" height="600"></canvas>
</main>
</body>
</html>

Main.kt

fun main() {
    // Inject viewModel etc.
    onWasmReady {
        @OptIn(ExperimentalComposeUiApi::class)
        CanvasBasedWindow(title = "Sample") {
            val someSharedState by viewModel.someSharedState.collectAsState()
            // Canvas UI
        }
    }
    renderComposable(rootElementId = "root") {
        val someSharedState by viewModel.someSharedState.collectAsState()
        // HTML UI
    }
}

okushnikov commented 11 hours ago

Please check the following ticket on YouTrack for follow-ups to this issue. GitHub issues will be closed in the coming weeks.

JetBrains / compose-multiplatform

Use HTML tag in Compose for web / Kotlin Wasm #3172