KVision Framework Documentation

The core of KVision is built around the Widget class and various container modules:

• io.kvision.core: Contains the base Widget class, core interfaces, and CSS enums for colors, borders, backgrounds, fonts, and positioning.
• io.kvision.panel: Provides container classes for layouts, including CSS Flexbox, CSS Grid, and Bootstrap's 12-column responsive grid.
• io.kvision.html: Provides components for standard HTML tags, including dedicated classes for buttons, images, links, lists, and iframes, with Handlebars.js template support.
• io.kvision.navbar, io.kvision.offcanvas, and io.kvision.dropdown: Provide Bootstrap-based navigation and menu components.

KVision provides a comprehensive form system with built-in validation support. Modules include:

• io.kvision.form: The main entry point for form implementations.
• io.kvision.form.text: Text inputs, including password, text area, rich text area, and typeahead.
• io.kvision.form.number: Numeric inputs with range selection and spinners.
• io.kvision.form.select: Select components, including those with remote data source support.
• io.kvision.form.check: Checkboxes, radio buttons, and radio button groups.
• io.kvision.form.time: Date and time input components.
• io.kvision.form.upload: File upload components with drag & drop, preview, and AJAX upload modes.

KVision is an object-oriented web framework for Kotlin/JS that allows building modern web applications without writing HTML, CSS, or JavaScript directly. It uses a rich hierarchy of GUI components and type-safe DSL builders.

Key architectural features include:

• Reactive Programming: Supports the observer pattern, data binding, and integration with Kotlin Flow and StateFlow for observables.
• Imperative Programming: Provides direct control over component manipulation.
• Virtual DOM: Utilizes the Snabbdom fast virtual DOM implementation for efficient rendering.
• Fullstack Capabilities: Integrates with Kilua RPC to allow shared data models and business logic between Kotlin/JS frontends and server-side frameworks like Ktor, Spring Boot, Micronaut, and more.

KVision offers several ways to manage application state and data flow:

• io.kvision.state: Implements the observer pattern, including observable lists.
• io.kvision.redux: Provides a predictable state container based on the Redux library.
• io.kvision.event: Provides extension functions to produce Kotlin Coroutines Flows from KVision events and data sources.
• io.kvision.rest: A RESTful API client supporting type-safe connectivity.
• io.kvision.routing: A simple wrapper for JavaScript routing.

KVision includes high-level wrappers for several popular JavaScript libraries:

• Charts: io.kvision.chart (based on chart.js).
• Data Grids: io.kvision.tabulator (based on Tabulator).
• Maps: io.kvision.maps (based on Leaflet).
• UI Frameworks: io.kvision.react (for embedding React components) and io.kvision.snabbdom (virtual DOM bindings).

For developers following Material Design, KVision provides a dedicated set of Material Web components under the io.kvision.material package. This includes:

• Buttons & Actions: button, iconbutton, fab (floating action button), and ripple.
• Selection & Input: checkbox, radio, select, slider, switch, and textfield (filled/outlined).
• Navigation & Layout: tabs, list, menu, and divider.
• Feedback & Containers: chips, dialog, progress (circular/linear), and icon.

To create an optimized production build of your KVision application, use the zip Gradle task. This will generate a compressed package containing the optimized application.

Run the following command:

./gradlew zip

The resulting application package will be located in build/libs/ (e.g., showcase-1.0.0-SNAPSHOT.zip).

To start developing with KVision, you can use the official examples repository to see the framework in action and test changes immediately using Hot Module Replacement (HMR).

1. Clone the examples repository:

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

2. Navigate to a showcase directory:

   cd kvision-examples/showcase

3. Run the Gradle incremental build task:

   ./gradlew -t run

4. Open http://localhost:3000/ in your browser to view the application.

The Root container is the entry point for your KVision application. It is bound to a specific element in your HTML file and is responsible for rendering the component tree and managing the Snabbdom virtual DOM. You can create a Root by targeting an element's id or by passing an HTMLElement directly.

Use the Application.root() extension function to initialize it.

This example demonstrates how to use ObservableValue to create a reactive UI. When the value of the state changes, the h1 component automatically updates to reflect the new content.

class App : Application() {

    val state = ObservableValue("Hello world")

    override fun start() {
        root("root") {
            vPanel {
                h1(state) {
                    +it
                }
                button("Add an exclamation mark").onClick {
                    state.value += "!"
                }
            }
        }
    }
}