https://github.com/jwstegemann/fritz2

Easily build reactive web-apps in Kotlin based on flows and coroutines.
https://github.com/jwstegemann/fritz2

binding framework frontend html5 kotlin kotlin-coroutines kotlin-js reactive

Last synced: 15 days ago
JSON representation

Easily build reactive web-apps in Kotlin based on flows and coroutines.

• Host: GitHub
• URL: https://github.com/jwstegemann/fritz2
• Owner: jwstegemann
• License: mit
• Created: 2019-12-29T10:01:07.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2025-04-08T16:03:30.000Z (about 2 months ago)
• Last Synced: 2025-04-13T18:44:34.320Z (about 2 months ago)
• Topics: binding, framework, frontend, html5, kotlin, kotlin-coroutines, kotlin-js, reactive
• Language: Kotlin
• Homepage: https://www.fritz2.dev
• Size: 22.5 MB
• Stars: 687
• Watchers: 13
• Forks: 29
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

• awesome-list - jwstegemann/fritz2 - Easily build reactive web-apps in Kotlin based on flows and coroutines. (Kotlin)

README

        
![fritz2](https://www.fritz2.dev/img/fritz2_header.png)

[![Actions Status](https://github.com/jwstegemann/fritz2/workflows/build/badge.svg)](https://github.com/jwstegemann/fritz2/actions)

[![Awesome Kotlin Badge](https://kotlin.link/awesome-kotlin.svg)](https://github.com/KotlinBy/awesome-kotlin)

[![Download](https://img.shields.io/maven-central/v/dev.fritz2/core)](https://search.maven.org/search?q=g:dev.fritz2)

[![IR](https://img.shields.io/badge/Kotlin%2FJS-IR%20supported-yellow)](https://kotl.in/jsirsupported)

[![Examples](https://img.shields.io/badge/examples-showcase-yellow)](/examples)

[![API](https://img.shields.io/badge/API-dokka-green)](https://fritz2.dev/api)

[![Docs](https://img.shields.io/badge/docs-online-violet)](https://fritz2.dev/docs)

[![Slack chat](https://img.shields.io/badge/kotlinlang-%23fritz2-B37700?logo=slack)](https://kotlinlang.slack.com/messages/fritz2)

fritz2 is an ***extremely lightweight***, well-performing, independent library for building

reactive web apps in ***Kotlin***, heavily depending on coroutines and flows.

fritz2 includes an intuitive way to build and render HTML elements using a type-safe dsl. 

You can easily create lightweight **reactive** HTML components which are bound to an underlying model 

and **automatically** change whenever the model data changes:

```kotlin

render {

    val model = storeOf("init value")

    

    div("some-css-class") {

        input {

            value(model.data)

            changes.values() handledBy model.update 

        }

        p {

            +"model value = "

            model.data.renderText()

        }

    }

}

```

fritz2 implements **precise data binding**. This means that when parts of your data model change, 

**exactly those** and only those DOM-nodes depending on the changed parts will automatically change as well. 

No intermediate layer (like a virtual DOM) is needed. fritz2 requires no additional methods to decide 

which parts of your component have to be re-rendered. 

fritz2 also supports **two-way data binding** out-of-the-box to update your model by listening on events:

[//]: # (![State management in fritz2](https://fritz2.dev/img/fritz2_cycle_of_life.png))

![State management in fritz2](https://raw.githubusercontent.com/jwstegemann/fritz2/gh-pages/img/fritz2_cycle_of_life.png)

Utilizing Kotlin's multiplatform-abilities, you'll write the code of your data classes only once and use 

it on your client and server (i.e. in a [SpringBoot](https://github.com/jamowei/fritz2-spring-todomvc)- or 

[Ktor](https://github.com/jamowei/fritz2-ktor-todomvc)-Backend). 

This is also true for your model-validation-code, which can quickly become far more complex than your data model.

## Key Features

- easy reactive one- and two-way data binding (even for lists and deep nested structures)

- hassle-free state-handling

- model-validation and message handling

- http and websockets

- hash-based routing

- history / undo

- processing state ("spinning wheel")

- webcomponents

- easy to learn

- [documentation](https://fritz2.dev/docs)

- [examples](/examples) i.e. implementing the specification of [TodoMVC](http://todomvc.com/)

## How to try it?

* Take a look at our hosted [examples](https://www.fritz2.dev/examples/)

* Or set up a new project on your own, following our [documentation](https://www.fritz2.dev/docs/start/)

## Overall Goals

- staying lightweight

- keeping dependencies as low as possible

- providing tags, attributes, events for HTML from specification (w3c, mozilla, ...)

- making it as easy as possible to write reactive web-apps in pure kotlin

## Inspiration

fritz2 is hugely inspired by the great [Binding.scala](https://github.com/ThoughtWorksInc/Binding.scala) framework. 

Later we discovered that a lot of those concepts are described independently in [Meiosis](https://meiosis.js.org/).

Also, fritz2 relies heavily on the great Kotlin [coroutines](https://github.com/Kotlin/kotlinx.coroutines) library.

## Leave us a star...

If you like the idea of a lightweight pure Kotlin implementation for building reactive web-apps, 

please give us a star. Thank you!