diff --git a/examples/web-skia/src/jsMain/kotlin/com/sample/Main.kt b/examples/web-skia/src/jsMain/kotlin/com/sample/Main.kt
index 2ade35038e..cd391fe342 100644
--- a/examples/web-skia/src/jsMain/kotlin/com/sample/Main.kt
+++ b/examples/web-skia/src/jsMain/kotlin/com/sample/Main.kt
@@ -1,15 +1,53 @@
package org.jetbrains.compose.sample
-import kotlinx.browser.window
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.Button
+import androidx.compose.material.Switch
+import androidx.compose.material.Text
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.ComposeCanvas
import org.jetbrains.compose.web.dom.Canvas
import org.jetbrains.compose.web.renderComposable
import org.jetbrains.skiko.wasm.onWasmReady
fun main() {
- renderComposable(rootElementId = "root") {
- Canvas {
- onWasmReady {
- window.alert("HEY!!!!!")
+ onWasmReady {
+ renderComposable(rootElementId = "root") {
+ var switched by remember { mutableStateOf(false) }
+ Canvas({
+ attr("width", "300")
+ attr("height", "300")
+ style {
+ property("outline", "1px solid black")
+ }
+ }) {
+ DomSideEffect { canvas ->
+ ComposeCanvas(canvas).apply {
+ setContent {
+ Column {
+ Button(
+ modifier = Modifier.padding(16.dp),
+ onClick = {
+ println("Button clicked!")
+ }
+ ) {
+ Text(if (switched) "🦑 press 🐙" else "Press me!")
+ }
+ Switch(
+ modifier = Modifier.padding(16.dp),
+ checked = switched,
+ onCheckedChange = { switched = it }
+ )
+ }
+ }
+ }
+ }
}
}
}
diff --git a/examples/web-skia/src/jsMain/resources/index.html b/examples/web-skia/src/jsMain/resources/index.html
index 903d7bae20..4a7b265d15 100644
--- a/examples/web-skia/src/jsMain/resources/index.html
+++ b/examples/web-skia/src/jsMain/resources/index.html
@@ -13,5 +13,6 @@
+