Getting Started

Following steps helps you getting started with your own Yested based project.
You can see the source code for this project on Yested GitHub:

1. Get the Intellij Idea

If you haven’t done so already, install Intellij IDEA by JetBrains.

2. Enable Kotlin plugin

Install Kotlin plugin into IDEA: File -> Settings -> Plugins -> Browse Repositories -> Kotlin (Custom Languages)

3. Create Kotlin Javascript Project

Create new Kotlin – Javascript project.

For Kotlin JS library click on Create and select Use library from plugin.

4. Add Yested library as a dependency

Get the latest binaries of Yested library (single jar file) and put it as a dependency to your project:

IDEA -> Project Structure -> Project Settings -> Modules -> [YOUR_PROJECT] -> Dependencies -> (plus on the right) JARs or directories.

5. Create HTML wrapper for your application

Now create a HTML page which will host your Kotlin/Yested application. Call file index.html and put into the root of your project.

File should have following content: Don’t worry you do not see the generated js files, we create them in next steps.

    <!-- Yested uses jQuery library a bit -->
    <script src=""></script>

    <!-- This is a JS implementation of Kotlin libraries - extracted by Intellij IDEA -->
    <script src="out/production/TestYestedProject/lib/kotlin.js"></script>

    <!-- This is Yested library - extracted by Intellij IDEA -->
    <script src="out/production/TestYestedProject/lib/Yested.js"></script>
    <!-- This DIV will host your whole Yested application -->
    <div id="app"></div>

    <!-- Finally import our compiled application -->
    <script src="out/production/TestYestedProject/TestYestedProject.js"></script>

6. Create a minimalistic Yested application

Create a file src/main/kotlin/main.kt with following content:

import net.yested.el
import net.yested.Div
import net.yested.with

fun main(args: Array) {

    //here we create some div with a header and a list
    val div = Div() with {
        h1 {
            +"Hello World" //plus add given text as textContent to HTML element (h1)
        ul {
            li {
                strong {
                    +"Bolded text"
            li {
                a(href = "") {
                    +"Link to Framework"

    //when we have constructed a DOM, we can take a parent element (via div.element)
    //and append it as a child to "app" div in HTML page


7. Build the project

Now build it via IDEA -> Build -> Make Project.
You should see following files in a Project View:

Project Structure

Project Structure

8. Run it

Let’s create a Run/Debug Configuration. IDEA -> Edit Configurations.
Add JavaScript Debug and set URL to index.html file. It is also handy to add Make to be executed Before launch.

Then you should see this: