Druid - Component GUI Framework

Jay_Cee · September 10, 2025, 1:59am

Thank you for Druid. If I have never mentioned to you before. I used it in my game and it works well.

Lodrasyll · October 20, 2025, 3:53pm

Hello!use druid frist time and beginner defold and programing rookie how can I creat multiple drag node and use them and work？
this is correct? just think（must be error ）

for i = 1, 5 do
		local node_id = 'command_frag_'..i
		local drag = self.druid:new_drag(node_id, function(_, dx, dy)
			local position_x = gui.get(node_id, 'position.x')
			local position_y = gui.get(node_id, 'position.y')
			gui.set(node_id, 'position.x', position_x + dx)
			gui.set(node_id, 'position.y', position_y + dy)
		end)
	end

Lodrasyll · October 21, 2025, 7:02am

I‘m glad to solve this problem/question with gpt together thanks druid!

by the way, it works. But i want to ask if this is a relatively good method?

- 创建多个节点，用字名字数组一次性声明 --
	local item_names = {
		'command_frag_1',
		'command_frag_2',
		'command_frag_3',
		'command_frag_4',
		'command_frag_5',
	}
	self.items = {}
	for i, name in ipairs(item_names) do
		local node = gui.get_node(name)
		-- 记录初始位置（作为回弹位置） --
		local start_positon = gui.get_position(node)
		self.items[i] = {
			name = name, 
			node = node,
			start_positon = start_positon,
		}
	end

	-- 创建每个item的drag组件（循环创建）--
	for i, item in ipairs(self.items) do
		local node = item.node
		local item_index = i
		local start_position = item.start_position

		local drag = self.druid:new_drag(node, function(_, dx, dy) 
			local px = gui.get(node, 'position.x')
			local py = gui.get(node, 'position.y')
			gui.set(node, 'position.x', px + dx)
			gui.set(node, 'position.y', py + dy)
		end)
	end

Lodrasyll · October 21, 2025, 9:38am

I’m reading drag_to_node exmple to achive my systeam. What are some effective methods to achieve drag and drop functionality onto another gui node/ rectangle?

Insality · October 23, 2025, 11:27pm

The example is okay to use, do you face any issues with it?

About question how to do “in a good way” - it’s good if it’s working for you

For drag-n-drop, as in example, you need to check a position of dragged node and check if is it overlap with any of yours desired position (ex. slots)

link for this example - Druid 1.1.0

Lodrasyll · January 11, 2026, 3:18pm

0.0 hey~ I have a quesetion about widgets
create a gui template and use druid editor script create a widget
but how to connect with them and how to use them in my main gui?
I don t understand they relationship…how to use and conect methods… thanks!orz!
for my example:

i want to create a selections widget and reuse other screen gui

Eren · January 11, 2026, 3:42pm

Have you had a chance to watch this video? It was very helpful for me in understanding Druid

Lodrasyll · January 11, 2026, 4:34pm

thanks！I watched before but I might have forgotten. I’ll go through it again.

Lodrasyll · January 12, 2026, 7:45am

Thanks Insality useful tools and clearly druid workshop introduction.

I sponsored you a liitle money to express my feeling~

Insality · January 12, 2026, 6:13pm

Thank you so much! I’m glad these tools help you

About widgets, lua and gui_script files:
Your gui component (a top level GUI, which is attached to Game Object) should have a gui_script. You create a Druid instance here and setup a lifecycle functions

Widgets created inside this gui_script or inside other widgets, so in druid:new_widget you will pass the GUI template name and a Lua module with a widget code

Some info you can read here - druid/wiki/widgets.md at master · Insality/druid · GitHub

Lodrasyll · January 13, 2026, 5:17pm

Thanks! I ve gradually understood through keeping try again!And if druid can support cursor navigation or in menu can use keyborad or gamepad move focus feature that will be good！

Insality · January 13, 2026, 6:35pm

Currently, cursor navigation is handled on the user side, as there are many different ways to implement it.

There is a widget called Navigation Handler by @NaakkaDev:

github.com/Insality/asset-store

widget/NaakkaDev/navigation_handler/navigation_handler.lua

main

-- Title: Navigation Handler
-- Description: Adds support for navigating with keyboard and gamepad.
-- Author: NaakkaDev <https://github.com/NaakkaDev>
-- Widget: navigation_handler
-- Tags: input
-- Version: 1


local event = require("event.event")
local const = require("druid.const")


---Widget force handling GUI navigation via keyboard/gamepad.
---
---### Setup
---Loads the widget module:
---`local navigation_handler = require("druid.widgets.navigation_handler.navigation_handler")`
---
---Create the new widget instance:
---`self.nav = self.druid:new_widget(navigation_handler)`

This file has been truncated. show original

It should work with buttons and sliders but I don’t test it much by myself yet

Lodrasyll · January 13, 2026, 6:45pm

Cool!I will try it!

Lodrasyll · January 14, 2026, 7:11am

I can’t use asset store to download this widget. My project no like [asset store]widget option.

and second I try to download and run this example: key_left and key_right it works but up and down it doesn’t work.It is missing druid const about up and down? I guess?

Insality · January 14, 2026, 8:05am

Yea, it’s not ready to use yet and not public

Shared this sources more as reference than a plug-n-play solution, so probably you need to make some adjustments inside. Like to replace up, down and space keys inside this widget

hope this helps

Lodrasyll · January 14, 2026, 8:50am

sure, of course! thanks! you help me a lot!
and also look forword asset store!

Insality · February 17, 2026, 4:05pm

Hello! I’m glad to share with you the Druid Widget Asset Store! I want to try this place as a source of examples and useful widgets for the community.

Publishing widgets through the Druid dependency is quite inconvenient, since I can’t adjust them easily, it’s hard to maintain them to not make a breaking changes and I don’t like when you install Druid and you have a bunch of GUI files to select inside your freshly installed project.

So this way seems a good way to get only the widgets you need. With ability to easily adjust and fix them for your needs.

Here is how it looks now:

With the next Druid release, I will remove all current built-in widgets from the Druid dependency. All current built-in widgets already moved to the Asset Store. To migrate on them, you need to download them and just replace links for the templates and lua widget files.

For the Properties Panel widget from Asset Store it requires to use the newest Druid version:

https://github.com/Insality/druid/archive/refs/tags/1.1.7.zip

Druid 1.2.0

He-he-hello! It’s a new Druid update! Not so many big changes this time, but a lot of small improvements and fixes!

The Asset Store extension is now available and contains a Druid Widget Store! There is a place where we can all share our widgets and easily install them in your projects. It’s not a dependency and these widgets will be downloaded as files, so you can easily edit and adjust them for your needs. It also reduces the risk of breaking something while updating the Druid library, since these files become a part of your project.

This new Druid Widget Store contains several widgets, like the previously included widgets (properties_panel, fps_panel, memory_panel, mini_graph). Also it contains some new widgets, like on_screen_joystick, external_image, tiling_node and others. You can inspect live example of each widget, for example on_screen_joystick

The Druid Color module is now available! It’s a module which contains various color functions and utilities, plus palette management. If you wish you can use it to convert hex colors easily and also use a nice color lerp function.

I also finally had time to go through Druid’s issues to make some fixes and improvements.

Thanks for the attention and your support!

Changelog 1.2.0

[Widgets] Removed all included widgets from the Druid library. Now you need to install them from the Druid Asset Store extension.
- Read the migration section below to learn how to migrate to the new widgets.
[Color] Add Druid Color module
- Use local color = require("druid.color") to access the module
- Use color.get_color(color_id) to get color by ID from palette, hex string, or return vector as-is.
- Use color.set_color(gui_node, color_id) to set color to the GUI node directly, not touching the alpha channel.
- Use color.lerp(t, color1, color2) to interpolate between two colors using HSB space (better visual results than RGB).
- Use color.add_palette(palette_data) to add colors to the palette. Colors can be hex strings or vector4 values.
- And various conversion functions between colors.
- Palette can be loaded at init step from the JSON file by path druid.palette_path in your game.project file.
[Layout] Add layout:set_position_function function, similar to the Grid component
[Scroll] Add scroll:scroll_to_make_node_visible function
- This scrolls to the element so it will be visible in the scroll view. If the element is already visible, nothing will happen.
[Blocker] Fix for internal is_enabled state
- Before, if the blocker node was disabled at init step and then enabled later, it kept the internal is_enabled state as false and had to be fixed by calling blocker:set_enabled(true) to make it work. Now it’s fixed and the blocker will work as expected.
[Button] Expose all click functions for the button
- Now you can call the button:button_click(), button:button_double_click(), button:button_long_click() etc.
[Container] Fix for container stretch mode
- stretch and fit were not initialized correctly in the init function arguments
[Rich Text] Using color names from the palette
[Rich Text] Add rich_text:set_split_to_characters(true) to split each letter node separately
- With this option, each letter will be a separate node, which can be useful for some animations or other effects.
- Example: Druid 1.2.0
[Rich Text] Add set_width and set_height functions
- Example: Druid 1.2.0
[Rich Text] Add rich_text:set_pivot function to adjust the alignment of the text inside the text area.
[Slider] Add slider:set_end_pos function to adjust the end position of the slider
[System] Migrated to gui.cancel_animations instead of gui.cancel_animation
[Examples] Add more Rich Text examples
[GO Widgets] Now passes events in addition to functions from the widget to the GO context
#286 Fix style button on_disabled call in HTML5 button mode
#289 Multiple Input field management + fixes on web input component.
- Fix for Button on_click_outside event. It should now always be triggered on user click. Before, it did not always trigger when input was consumed by some other component.
#291 Add on_init for button and input style callback
- Using this style callback, you can add additional fields which can be used in other style callbacks for more flexibility.
#297 Rich input hover animation fix for rich_input:select() function.
#316 Button on_hold_callback can now be used without on_long_click callback
- Before, the hold callback was required to be used with on_long_click callback. Now it’s not required and can be used alone.
- If hold_callback exists, the user can press and hold the button to trigger the hold callback.
- The button’s usual callback will not be triggered in this case.
- If both on_long_click and on_hold_callback callbacks exist, the user can press and hold the button to trigger the hold callback until the long click callback is triggered (time is adjusted by AUTOHOLD_TRIGGER style parameter).
#320 Set inherit alpha for rich text images to true by default
#329 Allow numeric characters in RichText tags
#333 Add settings to enable/disable Editor Scripts for the Druid
#335 Add slider default steps into slider’s style

Druid Widget Store

All Druid widgets were moved from the Druid library to the Druid Asset Store extension.
Several more widgets were also added to the Asset Store extension. Check it out!

Migration

If you are using the properties_panel, fps_panel, memory_panel, mini_graph widgets, you need to migrate to the Druid Asset Store extension.

To do that you should open the Asset Store extension and install them. After that you need to update GUI paths and require paths from druid.widget.* to widget.*

A big thanks to my Github supporters:

And all my other supporters! Much appreciated!

Support

Please support me if you like this project! It will help me keep engaged to update Druid and make it even better!