nacular / doodle

A pure Kotlin UI framework for the Web and Desktop.

A pure Kotlin, UI framework

Doodle helps you create beautiful, modern apps entirely in Kotlin. Its render model is intuitive yet powerful, making it easy to achieve complex UIs with pixel level precision and layouts. This simplicity and power applies to everything from user input to drag and drop. Doodle lets you build and animate anything.

Start creating your app for Web and Desktop; just define your View hierarchy and business logic, and go.

card.mov

Hello World

import io.nacular.doodle.application.Application
import io.nacular.doodle.application.application
import io.nacular.doodle.core.Display
import io.nacular.doodle.core.plusAssign
import io.nacular.doodle.core.view
import io.nacular.doodle.drawing.Color.Companion.Black
import io.nacular.doodle.drawing.text
import org.kodein.di.instance

class HelloWorld(display: Display): Application {
    init {
        display += view {
            size   = display.size
            render = {
                text("Hello, world!", color = Black)
            }
        }
    }

    override fun shutdown() {}
}

fun main() {
    application {
        HelloWorld(display = instance())
    }
}

Examples and Documentation

Check out the documentation site for more details and examples. You can also find helpful tutorials at doodle-tutorials.

Doodle is still under active development, so there are going to be gaps and bugs. Please report issues, and submit feature requests.

You can also join the discussion on the #doodle Kotlin Slack channel. Go to http://slack.kotl.in for instructions on getting an invitation.

Leave a star

Let us know what you think by leaving a comment or a star ⭐️.

doodle's Issues

Not found docs source code

Documents not open source?

Horizontal scrollbars shouldn't appear in some examples

I noticed a consistent behavior with the scrollbars that might be not desireable in the UI Components overview (https://nacular.github.io/doodle/docs/ui_components/overview)

The examples that contain a vertical scroll the view's width is not well adjusted and an horizontal scrollbar appears.

On Windows 10, latest Firefox and Chrome

Adding Container to Display with += doesn't work.

The following raises a compile error because Container implements Iterator<View> and the compiler cannot decide which version of Display.plusAssign to pick.

display += container {}

zOrder not working as expected on Web

zOrder is intended to be scoped to a View's parent. Bu this isn't the case. In fact, setting a zOrder can allow a View to cover popups.

https://kotlinlang.slack.com/archives/C01CJM07MGV/p1683751622142289

SplitPanel does not properly support Horizontal

SplitPanel does not render its children correctly when its orientation is set to horizontal.

Forms example?

Hi, just wondering, but would you have an example with a form + layout? I'm looking for something like this, and I'm not sure if there's a formlayout or tablelayout which I could use for this?

Doodle vs Compose Multiplatform UI

Hi,
apologies for the newbie question. How is Doodle different from Compose Multiplatform?
https://www.jetbrains.com/lp/compose-multiplatform/
Thanks!

HelloWorld not working

Hi there, I've finally started with Doodle, so I setup my project and tried the HelloWorld, but it doesn't compile. Could you please fix it?

There are 2 issues:

• On line 23, there's a call to application. But there's no such thing as application. Maybe the import to import io.nacular.doodle.application.application is missing? Not sure.
• Another issue is: HelloWorld(display = instance()). What's instance()? It seems there's no reference to anything like instance(), and I can't find a suitable candidate.

Thanks,
Erik

Project status

What is the status of this project? Is it dead?

Search in documentation not working well

I'm not sure how the search works in the documentation, but it seems to not work well. When I search for "Layout", I'm getting a lot of 404 errors:

(The Buttons gives a 404, and so does Defining our application, The Application, etc)

Export image of the view

Hello,

Is it possible to export an image of the view as a png? Also Is it also possible to use doodle in conjunction with other libraries e.g. compose with a doodle view? If so can we get examples of these?

Thanks

How to make native window menus?

I'm trying to make an exclusive desktop app to handle some things on my pc, and would like for the app to have a menu bar at the top with some actions.

And I know there is a component called menu, it however draws to the canvas (feature that made me choose this lib over other options that use native API calls to draw components).

And while it is possible to manually draw the bar to the screen, I would like for this bar to specifically use the native menu API.

This way, the elements can appear at my system's top bar instead of being a bar below the system's top bar.

Is that possible? To have the application window to call the native system menu handler to add options?

BasicSwitchBehavior does not render text

Text set to a Switch is not rendered when BasicSwitchBehavior is applied.

Slider is unusable on Android

Testing on the UI Controls example page using two Android devices, it seems like the web vertical scroll is taking the input of the slider, unles you slide in a perfect horizontal movement.

https://nacular.github.io/doodle/#/controls

When running demos: Unable to load '@webpack-cli/serve' command - TypeError: options.forEach is not a function

I cloned the demos from github but I am unable to run them.

When running any of the jsBrowser*Run targets, I get the following error:

[webpack-cli] TypeError: options.forEach is not a function
[webpack-cli] TypeError: options.forEach is not a function
    at WebpackCLI.makeCommand (C:\Users\pauls\projects\kforum\build\js\node_modules\webpack-cli\lib\webpack-cli.js:173:21)
    at ServeCommand.apply (C:\Users\pauls\projects\kforum\build\js\node_modules\@webpack-cli\serve\lib\index.js:41:19)
    at loadCommandByName (C:\Users\pauls\projects\kforum\build\js\node_modules\webpack-cli\lib\webpack-cli.js:907:35)
    at async Command.<anonymous> (C:\Users\pauls\projects\kforum\build\js\node_modules\webpack-cli\lib\webpack-cli.js:1462:17)
    at async Promise.all (index 0)
    at async WebpackCLI.run (C:\Users\pauls\projects\kforum\build\js\node_modules\webpack-cli\lib\webpack-cli.js:1500:9)
    at async runCLI (C:\Users\pauls\projects\kforum\build\js\node_modules\webpack-cli\lib\bootstrap.js:11:9)```

I found [this stackoverflow](https://github.com/webpack/webpack/issues/14443) which seems to talk about the issue, but I don't know how to adjust the version of webpack that is being used by kotlin.

Can you guys repro and do you have any suggestions?

Is there a Dropdown component available?

I had a look at the documentation, and I was wondering if a dropdown component was available as an input?

I saw the list item, and input item, but no dropdown. Thanks!

Dragging tabs issues

In the Tabbed Panel example, tabs are coliding on the same place after dragging the tabs a few times.

https://nacular.github.io/doodle/#/controls?id=tabbedpanel

Readme.md pointing to wrong link

In the main readme, there's a link to Applications (first line). That results in a 404.

I cannot get the doodle-tutorials working

I am trying to run the CalculatorRunner jvm main instance, but without luck. I keep on getting:

Exception in thread "main" java.lang.ExceptionInInitializerError at org.jetbrains.skiko.SkiaWindow$1.invoke(SkiaWindow.kt:7) at org.jetbrains.skiko.SkiaWindow$1.invoke(SkiaWindow.kt:7) at org.jetbrains.skiko.SkiaWindow.<init>(SkiaWindow.kt:9) at org.jetbrains.skiko.SkiaWindow.<init>(SkiaWindow.kt:5) at io.nacular.doodle.application.ApplicationHolderImpl.<init>(Application.kt:86) at io.nacular.doodle.application.ApplicationHolderImpl.<init>(Application.kt:72) at io.nacular.doodle.application.ApplicationHolderImpl$Companion.invoke(Application.kt:168) at io.nacular.doodle.application.ApplicationKt.createApplication(Application.kt:70) at io.nacular.doodle.examples.MainKt.main(main.kt:21) at io.nacular.doodle.examples.MainKt.main(main.kt) Caused by: org.jetbrains.skiko.LibraryLoadException: Cannot find libskiko-linux-x64.so.sha256, proper native dependency missing. at org.jetbrains.skiko.Library.load(Library.kt:72) at org.jetbrains.skiko.SkiaLayer.<clinit>(SkiaLayer.kt:25) ... 10 more

I saw another issue which was resolved by adding the jetbrains repo, but this one is defined in the tutorials so that is not the problem.

My setup is Ubuntu 21.10 with IntelliJ IDEA 2021.3.1 (Community Edition).
I just cloned the doodle-tutorials repo and tried to run the example app. I also tried to look for this error but could not get any good working solution for my situation.

Really curious what I am doing wrong here.

org.jetbrains.skiko:skiko-jvm-runtime-macos-x64:0.4.7 missing

Hi, I'm still trying to run the HelloWorld class, but I'm failing due this error:

Execution failed for task ':compileKotlin'.
> Error while evaluating property 'filteredArgumentsMap' of task ':compileKotlin'
   > Could not resolve all files for configuration ':compileClasspath'.
      > Could not find org.jetbrains.skiko:skiko-jvm-runtime-macos-x64:0.4.7.
        Searched in the following locations:
          - https://repo.maven.apache.org/maven2/org/jetbrains/skiko/skiko-jvm-runtime-macos-x64/0.4.7/skiko-jvm-runtime-macos-x64-0.4.7.pom
        If the artifact you are trying to retrieve can be found in the repository but without metadata in 'Maven POM' format, you need to adjust the 'metadataSources { ... }' of the repository declaration.
        Required by:
            project : > io.nacular.doodle:desktop:0.6.0 > io.nacular.doodle:desktop-jvm:0.6.0

My build.gradle.kts looks like this:

plugins {
    id("org.jetbrains.kotlin.jvm") version "1.5.30"
    application
}

version = "1.0.0"
group = "com.my.cool.app"

repositories {
    mavenCentral()
}

kotlin {
    target.compilations.all {
        kotlinOptions {
            jvmTarget = "11"
        }
    }

    val doodleVersion = "0.6.0" // <--- Latest Doodle version

    dependencies {
        implementation("io.nacular.doodle:core:$doodleVersion")
        implementation("io.nacular.doodle:desktop:$doodleVersion")

        // Optional
        implementation("io.nacular.doodle:controls:$doodleVersion")
        implementation("io.nacular.doodle:animation:$doodleVersion")
        implementation("io.nacular.doodle:themes:$doodleVersion")
    }
}

application {
    mainClass.set("HelloWorld")
}

And the only code I have, my HelloWoorld, looks like this:

import io.nacular.doodle.application.Application
import io.nacular.doodle.application.application
import io.nacular.doodle.core.Display
import io.nacular.doodle.core.plusAssign
import io.nacular.doodle.core.view
import io.nacular.doodle.drawing.Color.Companion.Black
import io.nacular.doodle.drawing.text
import org.kodein.di.instance

class HelloWorld(display: Display): Application {
    init {
        display += view {
            size   = display.size
            render = {
                text("Hello, world!", color = Black)
            }
        }
    }

    override fun shutdown() {}
}

fun main() {
    application {
        HelloWorld(display = instance())
    }
}

Example gradle script from documentation is giving errors

I'm using the example script for multi-platform projects with Kotlin Gradle from https://nacular.github.io/doodle/#/installation.

e: /path/to/Doodle/build.gradle.kts:19:20: Unresolved reference. None of the following candidates is applicable because of receiver type mismatch: 
public fun Project.dependencies(configuration: DependencyHandlerScope.() -> Unit): Unit defined in org.gradle.kotlin.dsl

Using

plugins {
    id ("org.jetbrains.kotlin.multiplatform") version "1.4.21"
}

version = "1.0.0"
group   = "com.my.cool.app"

repositories {
    jcenter     ()
    mavenCentral()
}

val doodleVersion = "0.5.2" // <--- Latest Doodle version

kotlin {
    js {}

    sourceSets {
        commonMain.dependencies {
            implementation ("org.jetbrains.kotlin:kotlin-stdlib-common")

            implementation ("io.nacular.doodle:core:$doodleVersion")
            implementation ("io.nacular.doodle:browser:$doodleVersion")

            // Optional
            // implementation ("io.nacular.doodle:controls:$doodleVersion")
            // implementation ("io.nacular.doodle:animation:$doodleVersion")
            // implementation ("io.nacular.doodle:themes:$doodleVersion")
        }

        jsMain.dependencies {
            implementation ("org.jetbrains.kotlin:kotlin-stdlib-js")
        }
    }
}

optionalDropDown example not working

The optionalDropDown example is not working as expected in Windows 10 with latests versions of Firefox and Chrome

Steps to reproduce:
-Go to https://nacular.github.io/doodle/docs/ui_components/form_controls#optionaldropdown
-Click the dropdown and select the "Large" item.

The selection will appear as empty instead of "Large"

Native dependency missing

Using the sample code in the Application section of the Guide, a pure JVM Kotlin build script and the latest Intellij IDEA (IntelliJ IDEA Community Edition 2021.3.2) I get the following error when attempting to run the main class from Intellij:

Exception in thread "main" java.lang.ExceptionInInitializerError
at org.jetbrains.skiko.SkiaWindow$1.invoke(SkiaWindow.kt:7)
at org.jetbrains.skiko.SkiaWindow$1.invoke(SkiaWindow.kt:7)
at org.jetbrains.skiko.SkiaWindow.(SkiaWindow.kt:9)
at org.jetbrains.skiko.SkiaWindow.(SkiaWindow.kt:5)
at io.nacular.doodle.application.ApplicationHolderImpl.(Application.kt:86)
at io.nacular.doodle.application.ApplicationHolderImpl.(Application.kt:72)
at io.nacular.doodle.application.ApplicationHolderImpl$Companion.invoke(Application.kt:168)
at io.nacular.doodle.application.ApplicationKt.createApplication(Application.kt:70)
at MainKt.main(Main.kt:12)
at MainKt.main(Main.kt)
Caused by: org.jetbrains.skiko.LibraryLoadException: Cannot find skiko-windows-x64.dll.sha256, proper native dependency missing.
at org.jetbrains.skiko.Library.load(Library.kt:72)
at org.jetbrains.skiko.SkiaLayer.(SkiaLayer.kt:25)
... 10 more

Reinstalling Intellij has not fixed the problem.

Inputs not working on iPhone 6

Using an iPhone 6S 12.1.3, Chrome and Safari browsers.

It seems like the input is not working on any of the UI Components examples:
https://nacular.github.io/doodle/#/controls

[Feature Request] Create template

Please make a template for stupid people like me who always have problems working with gradle and other build systems.

Installation issue

Hi,

I've just found your project and I want to try it!
Unfortunately I can't install it. Both maven & jcenter are configured in repositories, but your artifacts can't be found.

I will try to install it as a third-party module and it should work.

Regards,

Slack locked to kotlinlang

You need an email ending on @jetbrains.com.

PointerEvent consume does not prevent Context Menu