An introduction to KVision
Tags: kotlin, framework, webdev, kvision
Published: 2019-03-12 19:47:13

---
title: An introduction to KVision
published: true
description: KVision is an open source web framework created for Kotlin/JS. It allows developers to build modern web applications with the Kotlin language.
tags: kotlin,framework,webdev,kvision
---

[KVision](https://github.com/rjaros/kvision) is an open source web framework created for Kotlin/JS. It allows developers to build modern web applications with the [Kotlin](https://kotlinlang.org/) language.

It's a relatively new project (first version was published a year ago), but it's probably the most comprehensive and full-featured Kotlin framework targeting the frontend.

Certainly many of you wonder why anyone would like to work with frontend in Kotlin, since there are so many great tools and frameworks for JavaScript or TypeScript. You can read: {% link cassiozen/kotlin-for-js-devs-part-1-5bld %} article by Cássio Souza to find a lot of different reasons. I fully agree with them all.

## Why did I create a new framework?

I missed times when the user interface was built from objects. Not from files, templates or sheets, but with a hierarchy of reusable and extendable components. We don't do this in web development since the first HTML page was created, even though the whole world outside is doing just that for ages. [Turbo Vision](https://en.wikipedia.org/wiki/Turbo_Vision), [OWL](https://en.wikipedia.org/wiki/Object_Windows_Library), [VCL](https://en.wikipedia.org/wiki/Visual_Component_Library), [MFC](https://en.wikipedia.org/wiki/Microsoft_Foundation_Class_Library), [WinForms](https://en.wikipedia.org/wiki/Windows_Forms), [QT](https://en.wikipedia.org/wiki/Qt_(software)), [AWT](https://en.wikipedia.org/wiki/Abstract_Window_Toolkit), [Swing](https://en.wikipedia.org/wiki/Swing_(Java)), [JavaFX](https://en.wikipedia.org/wiki/JavaFX) or even the fresh born [Flutter](https://en.wikipedia.org/wiki/Flutter_(software)) - these are just a few examples from the history of OOP UI development. KVision follows that path - it's an object-oriented framework created for the fully object-oriented programming language.

## Noteworthy features

What KVision has to offer?

- 100% type safe and fully compiled working environment.
- Type safe DSL builders.
- Based on [Bootstrap](https://getbootstrap.com/) styles, typography and components.
- Utilizes [Snabbdom](https://github.com/snabbdom/snabbdom) fast virtual DOM implementation.
- Integrates with libraries and components from [Font awesome](https://fontawesome.com/), [Bootstrap Select](https://github.com/silviomoreto/bootstrap-select) (with [AJAX](https://github.com/truckingsim/Ajax-Bootstrap-Select) extension),
[Awesome Bootstrap Checkbox](https://github.com/flatlogic/awesome-bootstrap-checkbox), [Trix editor](https://trix-editor.org/), [Bootstrap Datetime picker](https://github.com/smalot/bootstrap-datetimepicker), 
[Bootstrap touchspin](https://github.com/istvan-ujjmeszaros/bootstrap-touchspin), [Bootstrap File Input](http://plugins.krajee.com/file-input),
 [Handlebars](http://handlebarsjs.com/), [Chart.js](https://www.chartjs.org/) and [Navigo](https://github.com/krasimir/navigo).
- 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.
- Data binding support for [observable](https://github.com/rjaros/kotlin-observable-js) data model.
- Internationalization support based on [Jed](http://messageformat.github.io/Jed/) library and [gettext](https://www.gnu.org/software/gettext/) translations. 
- Easy to use Drag & Drop.
- Type-safe REST connectivity.
- Innovative integration interface for [Ktor](https://ktor.io), [Jooby](https://jooby.org) and [Spring Boot](https://spring.io/projects/spring-boot) frameworks on the server side.
- Support for building cross-platform, desktop applications with [Electron](https://electronjs.org).

## One language to rule them all

You write applications in KVision with the Kotlin language only. There is no need for CSS, HTML or JavaScript. This paradigm is gaining popularity. You can find similar efforts in the Scala, Dart or Go language communities. But in my opinion you will not find anything so developer friendly and consistent as KVision. And working with Kotlin is really fast, efficient and fun!

## Hello World!

What would be the introduction without the "Hello World!" example. So here you have ;-)

```
div {
    +"Hello World!"
}
```

Of course it's just a snippet. You will find more examples at the [KVision GitHub page](https://github.com/rjaros/kvision) and in the [kvision-examples](https://github.com/rjaros/kvision-examples) repository. You can also look at the comprehensive [KVision guide](https://kvision.gitbook.io/kvision-guide/). 

If you like the idea - just play with the code, fork the project, fill an issue or create a pull request. And I plan to write more articles about KVision for Dev.to anytime soon!