Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
sz21106677 opened this issue May 16, 2023 · 4 comments
Open

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

sz21106677 opened this issue May 16, 2023 · 4 comments
Assignees
@eymar
Labels
enhancement New feature or request to be considered web

Comments

@sz21106677
Copy link

sz21106677 commented May 16, 2023 •
edited
Loading

Is there any existing method to insert HTML native tags in Compose?
@alexzhirkevich
Copy link
Contributor

alexzhirkevich commented May 16, 2023 •
edited
Loading

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

@alexzhirkevich
Copy link
Contributor

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

@eymar eymar added enhancement New feature or request web to be considered labels May 17, 2023
@eymar
Copy link
Collaborator

eymar commented May 17, 2023

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

@eymar eymar self-assigned this May 17, 2023
@sc941737
Copy link

sc941737 commented Sep 8, 2023 •
edited
Loading

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
    }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@eymar eymar

Labels
enhancement New feature or request to be considered web
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@eymar @sz21106677 @sc941737 @alexzhirkevich