Object oriented web framework for Kotlin/JS.

KVision allows you to build modern web applications with the Kotlin language, without any use of HTML, CSS or JavaScript.

It gives you a hierarchy of almost 100 ready to use GUI components, which can be used as a builder blocks for the application UI. Hundreds of features are available with easy to learn and consistent API.

KVision fully supports both reactive and imperative programming models. It gives you everything you may need for the state management of your apps. From simple observables to advanced redux stores. From simple event callbacks to functional event flows.

KVision contains innovative connectivity interface for Ktor, Jooby, Spring Boot, Javalin, Vert.x and Micronaut frameworks on the server side, which allows to build fullstack applications with shared code for data model and business logic.

KVision's basic design is quite similar to many non-web UI programming libraries including Swing, JavaFX, QT, WinForms and Flutter.

KVision applications are already running on production websites used by hundreds of users every day. Visit these example sites to see it in action:

• PeUP - Platforma e-Usług Publicznych
• Rejestr Zamówień Publicznych Powiatu Zwoleńskiego
• Rejestry publiczne Powiatu Kołobrzeskiego

KVision is being actively developed. Please create an issue for any bugs or feature requests.

• 100% type safe and fully compiled dev environment.

• Type safe DSL builders.

• Based on Bootstrap styles, typography and components.

• Utilizes Snabbdom fast virtual DOM implementation.

• Integrates with a lot of libraries and components:

  • Font awesome
  • Bootstrap Select (with AJAX extension)
  • Awesome Bootstrap Checkbox
  • Trix editor
  • Bootstrap Datetime picker
  • Bootstrap touchspin
  • Bootstrap File Input
  • Bootstrap Typeahead
  • Handlebars
  • Chart.js
  • Tabulator
  • Redux
  • ReduxKotlin
  • Navigo
  • Moment.js
  • Pace
  • Leaflet
  • Toastr
  • Print.js

• Includes sophisticated layout containers, including CSS flexbox, CSS grid and Bootstrap responsive 12 columns grid.

• Includes convenient forms implementation, with support for many different input components and easy to use validation.

• Support for observer pattern, data binding, event Flows and StateFlow for observables.

• Supports React components with KVision DSL and built-in state management.

• Full support for Onsen UI mobile web components with type-safe Kotlin API and DSL builders.

• Internationalization support based on gettext translations and gettext.js library.

• Easy to use Drag & Drop support.

• Support for jQuery animations and effects.

• Type-safe REST connectivity.

• Innovative integration interface for Ktor, Jooby, Spring Boot, Javalin, Vert.x and Micronaut frameworks on the server side, including support for type-safe websockets connections.

• Support for building hybrid mobile applications with Apache Cordova.

• Support for building cross-platform, desktop applications with Electron.

• KVision applications are built with Gradle with support for Webpack's Hot Module Replacement (HMR) and Kotlin JavaScript DCE (dead code elimination). Kotlin compiler plugin for Gradle is available to automatically generate boilerplate code for server-side interfaces.

• Karma testing framework support.

• IDE support (IntelliJ IDEA Community Edition).

Ready to explore, rich set of KVision examples is available in the separate project.

See also the complete frontend implementation of RealWorld example application and a fullstack version built with Spring Webflux and R2DBC.

The comprehensive KVision guide is published on GitBook.

Since version 3.13.0 the API documentation, generated with new Dokka 1.4, is available at https://rjaros.github.io/kvision/kvision/index.html.

Older API documentation is still available at https://rjaros.github.io/kvision/api/.

You can also look at KVision blog posts at dev.to and you can talk with KVision developers on Kotlin Slack #kvision channel.

If you are interested in the documentation for KVision 1.x (based on Bootstrap 3), you can find the guide here and the API docs here.

1. Download KVision examples from GitHub:

    git clone https://github.com/rjaros/kvision-examples.git
   

2. Enter one of the examples directory:

    cd kvision-examples/showcase                        (on Linux)
    cd kvision-examples\showcase                        (on Windows)
   

3. Run Gradle incremental build with:

    ./gradlew -t run                                    (on Linux)
    gradlew.bat -t run                                  (on Windows)
   

4. Open http://localhost:3000/ in your browser.

5. Play with the code and see your changes immediately in the browser.

To build complete application optimized for production run:

    ./gradlew zip                       (on Linux)
    gradlew.bat zip                     (on Windows)

Application package will be saved as build/libs/showcase-1.0.0-SNAPSHOT.zip.

        root("root") {
            span("Hello world!")
        }

        root("root") {
            hPanel(spacing = 20, alignItems = FlexAlignItems.CENTER) {
                val label = span("Not yet clicked.")
                var count = 0
                button("Click me").onClick {
                    label.content = "You clicked the button ${++count} times."
                }
            }
        }

        val firstPanel = Div("First")
        val secondPanel = Div("Second")
        val thirdPanel = Div("Third")

        root("root") {
            tabPanel {
                addTab("First", firstPanel, route = "/first")
                addTab("Second", secondPanel, route = "/second")
                addTab("Third", thirdPanel, route = "/third")
            }
        }

        @Serializable
        data class Model(val username: String? = null, val password: String? = null)

        root("root") {
            formPanel {
                add(Model::username, Text(label = "Username"), required = true)
                add(Model::password, Password(label = "Password"), required = true)
                add(Button("OK").onClick {
                    val data: Model = this@FormPanel.getData()
                    println("Username: ${data.username}")
                    println("Password: ${data.password}")
                })
            }
        }

        root("root") {
            vPanel(spacing = 10) {
                val state = ObservableValue("Hello world")
                div(state) {
                    +it
                }
                button("Add dot").onClick {
                    state.value += "."
                }
            }
        }