# Lighter weight declarative UI for Kotlin JS?

**URL:** <https://discuss.kotlinlang.org/t/lighter-weight-declarative-ui-for-kotlin-js/20985>\
**Category:** JavaScript\
**Created:** [February 26, 2021, 12:44am UTC](https://discuss.kotlinlang.org/t/lighter-weight-declarative-ui-for-kotlin-js/20985 "2021-02-26T00:44:24Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![rnikander](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.kotlinlang.org/rnikander/32/6881_2.png) [@rnikander](https://discuss.kotlinlang.org/u/rnikander)\
**Post date:** [February 26, 2021, 12:44am UTC](https://discuss.kotlinlang.org/t/lighter-weight-declarative-ui-for-kotlin-js/20985/1 "2021-02-26T00:44:24Z")

</div>

I know there is a React wrapper. I haven’t used it yet, but I don’t like the looks of it. Multiplatform has been tricky enough. I’m hesitant to add yet another layer and a lot of baggage from Javascript-world.

I’m wondering if anyone is working on something written in Kotlin, for Kotlin, that uses that same principle of declarative UI, for web apps.

---

<div class="post-metadata">

**Author:** ![arocnies](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.kotlinlang.org/arocnies/32/5143_2.png) [@arocnies](https://discuss.kotlinlang.org/u/arocnies)\
**Post date:** [February 26, 2021, 1:31am UTC](https://discuss.kotlinlang.org/t/lighter-weight-declarative-ui-for-kotlin-js/20985/2 "2021-02-26T01:31:11Z")

</div>

I’ve seen a few different Kotlin first UI frameworks. What kind are you looking for?  
You can use raw JS tools if your making something simple.

I personally like the object-style APIs instead of writing HTML-style code, like what’s found in [KVision](https://kvision.io/).

If you want easy serverside (but also client side\*) development, similar to Vaadin but much lighter, you can check out [Kweb](https://github.com/kwebio/kweb-core/).

There are more options but it really depends on what you need.

---

<div class="post-metadata">

**Author:** ![rnikander](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.kotlinlang.org/rnikander/32/6881_2.png) [@rnikander](https://discuss.kotlinlang.org/u/rnikander)\
**Post date:** [February 26, 2021, 2:15am UTC](https://discuss.kotlinlang.org/t/lighter-weight-declarative-ui-for-kotlin-js/20985/3 "2021-02-26T02:15:53Z")

</div>

Since I spend time with SwiftUI and Jetpack Compose, I’d like something with that declarative style (which React also has). Ideally I could just use one of those for web, but I won’t hold my breath for that.

I’ve written some pretty complicated UIs just with Kotlin/JS and OOP “controllers” that manipulate the DOM. But I like the code clarity of the declarative style.

---

<div class="post-metadata">

**Author:** ![bjonnh](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.kotlinlang.org/bjonnh/32/8106_2.png) [@bjonnh](https://discuss.kotlinlang.org/u/bjonnh)\
**Post date:** [February 27, 2021, 3:36am UTC](https://discuss.kotlinlang.org/t/lighter-weight-declarative-ui-for-kotlin-js/20985/4 "2021-02-27T03:36:19Z")

</div>

Have a look at KVision, it is pretty impressive.

---

<div class="post-metadata">

**Author:** ![darksnake](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.kotlinlang.org/darksnake/32/2479_2.png) [@darksnake](https://discuss.kotlinlang.org/u/darksnake)\
**Post date:** [February 27, 2021, 6:42am UTC](https://discuss.kotlinlang.org/t/lighter-weight-declarative-ui-for-kotlin-js/20985/5 "2021-02-27T06:42:48Z")

</div>

You can wait for Compose for Web as I do. Meanwhile, as they say, there are several Kotlin-first solutions. React covers most cases, but I am not happy with it (the JS part, not kotlin) and I want to try something else, but do not have time.

---

<div class="post-metadata">

**Author:** ![rnikander](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.kotlinlang.org/rnikander/32/6881_2.png) [@rnikander](https://discuss.kotlinlang.org/u/rnikander)\
**Post date:** [February 27, 2021, 2:56pm UTC](https://discuss.kotlinlang.org/t/lighter-weight-declarative-ui-for-kotlin-js/20985/6 "2021-02-27T14:56:20Z")

</div>

I wonder if the essential parts of React could be copied and used as a library and some design patterns in more traditional MVC code. What are these essential pieces? I can think of two at the moment…

1. The “reconciliation” algorithm - ie, taking the UI descriptions (generated by pure functions) and using them to update the browser DOM.
2. Imposing some global order on model change events, so that you don’t update UI that is about to be invalidated by another UI update further up the tree.

I may take a shot at this bare bones approach.

---

<div class="post-metadata">

**Author:** ![darksnake](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.kotlinlang.org/darksnake/32/2479_2.png) [@darksnake](https://discuss.kotlinlang.org/u/darksnake)\
**Post date:** [February 27, 2021, 3:29pm UTC](https://discuss.kotlinlang.org/t/lighter-weight-declarative-ui-for-kotlin-js/20985/7 "2021-02-27T15:29:33Z")

</div>

KVision does exactly that.

---

<div class="post-metadata">

**Author:** ![rnikander](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.kotlinlang.org/rnikander/32/6881_2.png) [@rnikander](https://discuss.kotlinlang.org/u/rnikander)\
**Post date:** [February 27, 2021, 3:48pm UTC](https://discuss.kotlinlang.org/t/lighter-weight-declarative-ui-for-kotlin-js/20985/8 "2021-02-27T15:48:38Z")

</div>

I looked superficially at KVision before. I’ll take another look. Are you using it? I thought not because you mentioned waiting for Compose.

I see KVision is using this [snabbdom](https://github.com/snabbdom/snabbdom) library which is part of what I had in mind above.

---

<div class="post-metadata">

**Author:** ![darksnake](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.kotlinlang.org/darksnake/32/2479_2.png) [@darksnake](https://discuss.kotlinlang.org/u/darksnake)\
**Post date:** [February 27, 2021, 3:55pm UTC](https://discuss.kotlinlang.org/t/lighter-weight-declarative-ui-for-kotlin-js/20985/9 "2021-02-27T15:55:02Z")

</div>

I am using react for now, but I am not happy with it. Don’t have time right now to experiment with a new technology, but I really like the compose prototype. And KVision is on my to-do list.

---

<div class="post-metadata">

**Author:** ![mpetuska](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.kotlinlang.org/mpetuska/32/8077_2.png) [@mpetuska](https://discuss.kotlinlang.org/u/mpetuska)\
**Post date:** [March 1, 2021, 8:46pm UTC](https://discuss.kotlinlang.org/t/lighter-weight-declarative-ui-for-kotlin-js/20985/10 "2021-03-01T20:46:19Z")

</div>

There’s also fritz2 and doodle. Both are written entirely in kotlin and do not use virtual dom at all

---

<div class="post-metadata">

**Author:** ![joe\_bloggs](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.kotlinlang.org/joe_bloggs/32/7668_2.png) [@joe\_bloggs](https://discuss.kotlinlang.org/u/joe_bloggs)\
**Post date:** [April 12, 2021, 4:52am UTC](https://discuss.kotlinlang.org/t/lighter-weight-declarative-ui-for-kotlin-js/20985/11 "2021-04-12T04:52:06Z")

</div>

I just released [Doodle 0.5.0](https://github.com/nacular/doodle/releases/tag/v0.5.0) as well. So it’s a good time to check it out if you’re still considering options.
