I see that kvision has generated the bindings: https://github.com/rjaros/kvision/tree/master/kvision-modules/kvision-chart

But I don't want to pull that in just to show a chart.

At runtime, I get this error:

(Let's create a thread and keep the discussion in there)

Using Chart.js in Kobweb 🧵

@David Herman I wonder if you could possibly help me with something else. I'm trying to make a fullstack app, and am encountering an issue if I ever use the

@Api

annotation.

I am trying out kobweb. It looks really great so far. Is it possible to render a navigation menu with access to the router (possible to change route) without being in a @Page context? I can only do this by putting the navigation into each page. I noticed that the whole html re-renders in the browser even if it does not change. Having something like nested routes would be nice.

I found this framework because I am looking for a way to migrate my TypeScript React components to Kotlin. I do not want to use the Kotlin-React wrappers, as I dislike the React-specific overhead (compared to function calls with named arguments in Compose). Everything except the React components has already been migrated to Kotlin (Redux reducer, actions, state, side effects, API client) because it is reused in Compose Multiplatform for Android, iOS, and desktop. This all works very well, but the remaining TypeScript files are starting to annoy me — mainly because refactoring the Kotlin parts requires manual updates to the TypeScript files. So far, I am considering kobweb/compose-html) as an alternative for the React parts — though I still need to check what third-party libraries I would need to replace and how (for example, react-virtualized). On a more general level, I would prefer if the framework allowed for a less opinionated setup. For example, I would like to control the app’s entry point and set up the router myself. Currently, my entry point is already a

@Composable

. Ideally, I would like something similar to an

Application

class that I fully control. Comparing this to React, where you explicitly call the initial render function:

ReactDOM.createRoot(document.getElementById("root")).render(...);

I am also looking into the Kilua project and I prefer its approach: https://github.com/rjaros/kilua/blob/main/examples/todomvc/src/commonMain/kotlin/TodoApp.kt In Kilua, you own the entry point, and you can set up dependencies like

ApiClient

and

Storage

classes outside of any

@Composable

. Routes are described as part of your app’s component tree, and nested routes are supported (e.g., for a navigation bar, main/details view). One important use case for this is passing the router into a DI container and using it inside side effects (such as Redux-Observables) to programmatically change the user’s route (for example, redirecting to the login screen on any “forbidden” response). Right now, this kind of navigation is only possible inside a page’s content.

🕸️ Latest Kobwebs v0.22.0 🕸️ https://github.com/varabyte/kobweb/releases/tag/v0.22.0 This release introduces layouts. In short, you can now set up your site in a way that stateful UI in your layout composables now survive across page navigations without needing to use local storage tricks. There's an important warning, which is discussed in the release notes but I'll repeat again in the thread 🧵

Less than a week left for KotlinConf! If folks here weren't aware, I'll be speaking this year. https://kotlinconf.com/schedule/?day=2025-05-23&session=99af26ce-5c63-5ff5-a013-efcb16da833b I don't think there will be a livestream, but there will be a recording. Of course, if you are going to be there, please reach out to me and say hi in person!

I have been working as an Android dev for a few years, but have 0 experience with web development. I am hoping to use my Kotlin knowledge and some good vibes to build pet projects kodee happy I just created a sample project (

kobweb create app

), did some minor updates and added configuration to build and deploy to GitHub Pages. This is not all I want to do, but first I would like to fix some simple issues. State such as color mode and menu state (when the available width is small) does not seem to work when the app is deployed, but it works when running it locally. Is this some kind of known issue?

How can add sitemap.xml in kobweb if possible

Update: Nevermind, I found this https://github.com/varabyte/kobweb/blob/main/frontend/silk-widgets/README.md Hi friends, is there some guidance available on how to add Kobweb into an existing Compose HTML project? I'd like to explore the possibility of using Kobweb to create Google Chrome Extensions. I know it's possible with Compose HTML and Kobweb is based upon it, so was wondering if someone has already tried doing this?

Just want to share a LinkedIn post one of our users shared on our Discord about their Kotlin multiplatform project ExpensePal. It uses Kobweb for the web portion and Compose Multiplatform for mobile OSes: https://www.linkedin.com/posts/dhavalshah53_kobweb-composemultiplatform-kotlinmultiplatform-activity-7337360426235576320-GNWL and the link has a nice embedded demo video which shows their project off with simultaneous Android / iOS / web views.

KotlinConf talks are up! Here's my talk on Kobweb. https://kotlinconf.com/talks/774286/

If anyone in here wanted to use Kobweb with Kotlin 2.2.0, you can try it out a little early with 0.23.0-SNAPSHOT

kobweb = "0.23.0-SNAPSHOT"
kotlin = "2.2.0"

I've exported and deployed a static site with some markdown pages following the default example. I'm getting 404 responses when accessing those pages (https://my-app.com/about). However, if I go to my home page then click on a link to navigate there ( go to https://my-app.com then click on a link for https://my-app.com/about).... the pages are found! Curious if this sounds like an export configuration I'm missing in kobweb, or if I'm just having DNS issues

Hello all, Is there a rich text editor built into Kobweb or Kotlin JS that exists as an open-source project? potentially one that I can add a dependency to my project and create a blog of some sort. Thanks in advance cc @David Herman

🕸️ Latest Kobwebs v0.23.0 🕸️ https://github.com/varabyte/kobweb/releases/tag/v0.23.0 First release since KotlinConf! Mostly a bunch of misc stuff (check out the release notes for details!), but we now officially support Kotlin 2.2.0.

Are there any kobweb templates, libraries, or sample projects which support "blog" style content? i.e., something which would bootstrap the following: 1. Date and tag-based content directories 2. Date-based page routing 3. Content rendering from an intermediate format like Markdown 4. Truncating content for previews or directory listings

Any tips for sorting out content shift? It's a bit foreign to me, as its usually not such a consideration with the compose-style

is there any way to get the processed or raw string of markdown files content ? i'd love to get them just like this

val markdownContent = ctx.markdown!!.frontMatter["content"]

or even better, if, I can have this:

@Layout
@Composable
fun MarkdownLayout(content: (String) -> Unit)

beside this:

@Layout
@Composable
fun MarkdownLayout(content: @Composable () -> Unit)

how can we set the color for when the user overscrolls? I thought this was just the html backgound color - however the silk init from the demo/default app seems to not affect the overscroll areas

@InitSilk
fun initTheme(ctx: InitSilkContext) {
    ctx.theme.palettes.light.background = Colors.Blue
}

How can we add inline script's to our head (without a src)? I'm finding the kotlin html dsl rather enigmatic.... I'm trying to embed a typical email list signup form

<script>
    (function(......
</script>

Hi there! Is there a way to pass a parameter to a Kobweb call when using Markdown? What I would like to achieve is something like: Markdown:

{{{ start .some.package.CustomComponent }}}

## My subtitle
**bunch** of text with *different* ~styles~

{{{ end .some.package.CustomComponent }}}

Rest of the markdown file

Composable:

@Composable
fun CustomComponent(content: @Composable () -> Unit) {
    Div(attrs = CustomComponentStyle.toAttrs()) {
        // other custom stuff
        content()
    }
}

And in the generated file, it would call the custom component something like this:

@Page("/awesome-markdown")
@Layout(".MarkdownLayout")
@Composable
fun Awesome_markdown() {
    project.some.package.CustomComponent {
        org.jetbrains.compose.web.dom.P {
            org.jetbrains.compose.web.dom.B {
                org.jetbrains.compose.web.dom.Text("bunch")
            }
            org.jetbrains.compose.web.dom.Text(" of text with ")
            org.jetbrains.compose.web.dom.Em {
                org.jetbrains.compose.web.dom.Text("different")
            }
            org.jetbrains.compose.web.dom.Text(" ~styles~")
        }
    }
    // Rest of the markdown file parsed
}

Would that be possible?

Hey, I'm trying to learn kobweb by converting a super basic old react/ts website to kobweb. It's using react-toastify, and I'm not really sure how to translate that over to kobweb. Is there a way to utilize react library components or do I have to rewrite it from scratch? The website doesn't seem to mention js library interop at all (though It was a bulletpoint in the kotlinconf talk).

On a slightly related note, is there any examples of using an npm library like ol (openlayers map https://openlayers.org/doc/quickstart.html) in kobweb?

Question: Has anyone run across this error before when building their app (kobweb run --path=site):

> Task :site:kspKotlinJs FAILED
e: java.lang.IllegalStateException: Storage for [/Users/ryan/repos/ryan/fsryan/consulting/wagemix/monolith/site/build/kspCaches/js/jsMain/symbolLookups/file-to-id.tab] is already registered

🕸️ Latest Kobwebs v0.23.1 🕸️ https://github.com/varabyte/kobweb/releases/tag/v0.23.1 A bunch of misc stuff (check out the release notes for details!), plus we now officially support Kotlin 2.2.10.

Is it possible that something like this

.form-floating>.form-select:hover~label

is not supported in a

CssRule

? I'm trying to create something akin to the Bootstrap floating label but this selector

~

doesn't seem to work when I add it. Even when adding it manually in the

inspector-stylesheet

in my browser itself, it does not seem to work. 😅