Начало работы с Kotlin/JS

В этом руководстве показано, как создать веб-приложение для браузера с помощью Kotlin/JavaScript (Kotlin/JS). Чтобы создать приложение, выберите инструмент, который лучше всего подходит для вашего рабочего процесса:

IntelliJ IDEA: клонируйте шаблон проекта из системы контроля версий и работайте с ним в IntelliJ IDEA.
Система сборки Gradle: создайте файлы сборки проекта вручную, чтобы лучше понять, как работает настройка.

Создание приложения в IntelliJ IDEA

Для создания веб-приложения на Kotlin/JS можно использовать IntelliJ IDEA.

Настройка среды

Скачайте и установите последнюю версию IntelliJ IDEA.
Установите плагин Kotlin Multiplatform для IDE (не путайте его с плагином Kotlin Multiplatform для Gradle).

Создание проекта

В IntelliJ IDEA выберите Файл | Создать | Проект из системы контроля версий.
Введите URL-адрес шаблона проекта Kotlin/JS:
```
https://github.com/Kotlin/kmp-js-wizard
```
Нажмите Клонировать.

Настройка проекта

Откройте файл kmp-js-wizard/gradle/libs.versions.toml. В нем находится каталог версий зависимостей проекта.
Убедитесь, что версия Kotlin соответствует версии плагина Kotlin Multiplatform для Gradle, который необходим для создания веб-приложения для Kotlin/JS:
```
[versions]
kotlin = "2.4.20"

[plugins]
kotlin-multiplatform = { id = "org.jetbrains.kotlin.multiplatform", version.ref = "kotlin" }
```
Синхронизируйте файлы Gradle (если вы обновили файл libs.versions.toml). Нажмите значок Загрузить изменения Gradle, который появится в файле сборки.

Также можно нажать кнопку обновления в окне инструмента Gradle.

Дополнительную информацию о конфигурации Gradle для мультиплатформенных проектов см. в справочнике по DSL Gradle для мультиплатформенных проектов.

Сборка и запуск приложения

Откройте файл src/jsMain/kotlin/Main.kt.
- В каталоге src/jsMain/kotlin/ находятся основные исходные файлы Kotlin для целевой платформы JavaScript вашего проекта.
- Файл Main.kt содержит код, который использует API kotlinx.browser, чтобы отобразить «Hello, Kotlin/JS!» на странице браузера.
Нажмите значок Запуск в функции main(), чтобы выполнить код.

Веб-приложение автоматически откроется в браузере. Кроме того, после завершения запуска можно открыть в браузере следующий URL-адрес:

   http://localhost:8080/

Веб-приложение будет выглядеть так:

После первого запуска приложения IntelliJ IDEA создаст соответствующую конфигурацию запуска (jsMain [js]) на верхней панели:

Включение непрерывной сборки

Gradle может автоматически пересобирать проект при каждом внесении изменений:

Выберите jsMain [js] в списке конфигураций запуска и нажмите Дополнительные действия | Изменить.
В диалоговом окне Конфигурации запуска/отладки введите jsBrowserDevelopmentRun --continuous в поле Запуск.
Нажмите OK.

Теперь при запуске приложения и внесении любых изменений Gradle будет автоматически выполнять инкрементальные сборки проекта и перезагружать страницу в браузере при каждом сохранении (Ctrl + S/Cmd + S) или изменении файла класса.

Изменение приложения

Измените приложение, добавив функцию подсчета количества букв в слове.

Добавление элемента ввода

Добавьте в файл src/jsMain/kotlin/Main.kt элемент ввода HTML с помощью функции-расширения, чтобы считывать ввод пользователя:
```
// Replace the Element.appendMessage() function
fun Element.appendInput() {
    val input = document.createElement("input")
    appendChild(input)
}
```
Вызовите функцию appendInput() в main(). Она отображает на странице элемент ввода:
```
fun main() {
    // Replace document.body!!.appendMessage(message)
    document.body?.appendInput()
}
```
Снова запустите приложение.

Приложение будет выглядеть так:

Обработка события ввода

Добавьте внутри функции appendInput() слушатель, который будет считывать введенное значение и реагировать на изменения:

// Replace the current appendInput() function
fun Element.appendInput(onChange: (String) -> Unit = {}) {
    val input = document.createElement("input").apply {
        addEventListener("change") { event ->
            onChange(event.target.unsafeCast<HTMLInputElement>().value)
        }
    }
    appendChild(input)
}

Следуйте подсказкам IDE, чтобы импортировать зависимость HTMLInputElement.
Вызовите функцию обратного вызова onChange в main(). Она считывает введенное значение и обрабатывает его:
```
fun main() {
    // Replace document.body?.appendInput()
    document.body?.appendInput(onChange = { println(it) })
}
```

Добавление элемента вывода

Добавьте текстовый элемент для отображения результата, определив функцию-расширение, которая создает абзац:
```
 fun Element.appendTextContainer(): Element {
     return document.createElement("p").also(::appendChild)
 }
```

Вызовите функцию appendTextContainer() в main(). Она создает элемент вывода:

 fun main() {
     // Creates a text container for our output
     // Replace val message = Message(topic = "Kotlin/JS", content = "Hello!")
     val output = document.body?.appendTextContainer()

     // Reads the input value
     document.body?.appendInput(onChange = { println(it) })
 }

Обработка ввода для подсчета букв

Обработайте введенное значение, удалив пробелы, и отобразите результат с количеством букв.

Добавьте следующий код в функцию appendInput() внутри функции main():

fun main() {
    // Creates a text container for our output
    val output = document.body?.appendTextContainer()

    // Reads the input value
    // Replace the current appendInput() function
    document.body?.appendInput(onChange = { name ->
        name.replace(" ", "").let {
            output?.textContent = "Your name contains ${it.length} letters"
        }
    })
}

В приведенном выше коде:

Функция replace() удаляет пробелы в имени.
Функция области видимости let{} выполняет функцию в контексте объекта.
Шаблон строки (${it.length}) подставляет длину слова в строку: перед значением ставится знак доллара ($), а само значение заключается в фигурные скобки ({}). При этом it — это имя параметра лямбда-выражения по умолчанию.

Запуск приложения

Запустите приложение.
Введите свое имя.
Нажмите Enter.

Вы увидите результат:

Обработка ввода для подсчета уникальных букв

В качестве дополнительного упражнения обработайте введенное значение, чтобы вычислить и отобразить количество уникальных букв в слове:

В файле src/jsMain/kotlin/Main.kt добавьте функцию-расширение .countDistinctCharacters() для String:
```
fun String.countDistinctCharacters() = lowercase().toList().distinct().count()
```
В приведенном выше коде:
- Функция .lowercase() преобразует имя в нижний регистр.
- Функция toList() преобразует введенную строку в список символов.
- Функция distinct() выбирает из слова только уникальные символы.
- Функция count() подсчитывает уникальные символы.

Вызовите функцию .countDistinctCharacters() в main(). Она подсчитывает уникальные буквы в вашем имени:

 fun main() {
     // Creates a text container for our output
     val output = document.body?.appendTextContainer()

     // Reads the input value
     document.body?.appendInput(onChange = { name ->
         name.replace(" ", "").let {
             // Prints the number of unique letters
             // Replace output?.textContent = "Your name contains ${it.length} letters"
             output?.textContent = "Your name contains ${it.countDistinctCharacters()} unique letters"
         }
     })
}

Выполните указания, чтобы запустить приложение и ввести свое имя.

Вы увидите результат:

Создание приложения с помощью Gradle

В этом разделе вы узнаете, как вручную создать приложение Kotlin/JS с помощью Gradle.

Gradle — это система сборки по умолчанию для проектов Kotlin/JS и Kotlin Multiplatform. Она также широко используется в Java, Android и других экосистемах.

Создание файлов проекта

Убедитесь, что используемая версия Gradle совместима с плагином Kotlin для Gradle (KGP). Дополнительную информацию см. в таблице совместимости.
Создайте пустой каталог для проекта с помощью файлового менеджера, командной строки или любого другого удобного инструмента.

В каталоге проекта создайте файл build.gradle.kts со следующим содержимым:

// build.gradle.kts
plugins {
    kotlin("multiplatform") version "2.4.20"
}

repositories {
    mavenCentral()
}

kotlin {
    js {
        // Use browser() for running in a browser or nodejs() for running in Node.js
        browser() 
        binaries.executable()
    }
}

// build.gradle
plugins {
    id 'org.jetbrains.kotlin.multiplatform' version '2.4.20'
}

repositories {
    mavenCentral()
}

kotlin {
    js {
        // Use browser() for running in a browser or nodejs() for running in Node.js
        browser() 
        binaries.executable()
    }
}

В каталоге проекта создайте пустой файл settings.gradle.kts.
В каталоге проекта создайте каталог src/jsMain/kotlin.
В каталоге src/jsMain/kotlin создайте файл hello.kt со следующим содержимым:
```
fun main() {
    println("Hello, Kotlin/JS!")
}
```
По соглашению все исходные файлы находятся в каталоге src/<target name>[Main|Test]/kotlin:
- Main — каталог для исходного кода.
- Test — каталог для тестов.
- <target name> соответствует целевой платформе (в данном случае js).

Для среды browser

В каталоге проекта создайте каталог src/jsMain/resources.

В каталоге src/jsMain/resources создайте файл index.html со следующим содержимым:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Application title</title>
</head>
<body>
    <script src="$NAME_OF_YOUR_PROJECT_DIRECTORY.js"></script>
</body>
</html>

Замените заполнитель <$NAME_OF_YOUR_PROJECT_DIRECTORY> именем каталога проекта.

Сборка и запуск проекта

Чтобы собрать проект, выполните следующую команду из корневого каталога проекта:

# For browser
gradle jsBrowserDevelopmentRun

# OR

# For Node.js
gradle jsNodeDevelopmentRun

Если вы используете среду browser, браузер откроет файл index.html и выведет "Hello, Kotlin/JS!" в консоль браузера. Открыть консоль можно с помощью сочетания клавиш Ctrl + Shift + J/Cmd + Option + J.

Если вы используете среду nodejs, в терминале появится "Hello, Kotlin/JS!".

Открытие проекта в IDE

Проект можно открыть в любой IDE с поддержкой Gradle.

Если вы используете IntelliJ IDEA:

Выберите Файл | Открыть.
Найдите каталог проекта.
Нажмите Открыть.

IntelliJ IDEA автоматически определит, является ли проект проектом Kotlin/JS. Если возникнет проблема с проектом, IntelliJ IDEA отобразит сообщение об ошибке на панели Сборка.

Что дальше?

Настройте проект Kotlin/JS.
Узнайте, как отлаживать приложения Kotlin/JS.
Узнайте, как писать и запускать тесты с Kotlin/JS.
Узнайте, как писать скрипты сборки Gradle для реальных проектов Kotlin/JS.
Подробнее о системе сборки Gradle.

21 мая 2026 г.

© 2010–2026 JetBrains s.r.o. and Kotlin Programming Language contributors
Licensed under the Apache License, Version 2.0.
https://kotlinlang.org/docs/js-get-started.html