# How you do UI in Defold?

**URL:** <https://forum.defold.com/t/how-you-do-ui-in-defold/82705>\
**Category:** Questions\
**Created:** [April 28, 2026, 9:07am UTC](https://forum.defold.com/t/how-you-do-ui-in-defold/82705 "2026-04-28T09:07:56Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![yvan](https://forum-defold.b-cdn.net/letter_avatar_proxy/v4/letter/y/3ab097/32.png) [@yvan](https://forum.defold.com/u/yvan)\
**Post date:** [April 28, 2026, 9:07am UTC](https://forum.defold.com/t/how-you-do-ui-in-defold/82705/1 "2026-04-28T09:07:56Z")

</div>

All I know is CSS but I can do UI with math. I’m all in with Defold because its code-first, but UI is my biggest problem.

---

<div class="post-metadata">

**Author:** ![boruok](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/boruok/32/21851_2.png) [@boruok](https://forum.defold.com/u/boruok)\
**Post date:** [April 28, 2026, 9:10am UTC](https://forum.defold.com/t/how-you-do-ui-in-defold/82705/2 "2026-04-28T09:10:59Z")

</div>

> **[GitHub - Insality/druid: Powerful Defold UI component framework](https://github.com/Insality/druid)**
>
> Powerful Defold UI component framework

---

<div class="post-metadata">

**Author:** ![Sam](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/sam/32/41902_2.png) [@Sam](https://forum.defold.com/u/Sam)\
**Post date:** [April 28, 2026, 9:57am UTC](https://forum.defold.com/t/how-you-do-ui-in-defold/82705/3 "2026-04-28T09:57:04Z")

</div>

I use only the basic GUI nodes provided by the engine. You don’t need any extension unless you need very complex UI with grids, scrolling, sliders, dropdowns and etc. The “lack” of pre-made UI components forces you to think do you really need them at all.

---

<div class="post-metadata">

**Author:** ![Pawel](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/pawel/32/24623_2.png) [@Pawel](https://forum.defold.com/u/Pawel)\
**Post date:** [April 28, 2026, 1:21pm UTC](https://forum.defold.com/t/how-you-do-ui-in-defold/82705/4 "2026-04-28T13:21:17Z")

</div>

In Defold, UI is usually done with **GUI** component: consisting of nodes, layouts, and a GUI script. It is more code-driven than CSS/HTML, so positioning, scaling, anchoring, and state changes are typically handled in Lua, in the GUI script.

For simple UI, the built-in GUI system is enough. You have box nodes that support 9-slice, texutres, nodes support stencils, there are also radial pie nodes, and text nodes with any font. You can also use particles in GUI and spine animations (with Spine Extension).

For more structured UI, many people use libraries like the mentioned **Druid** or **Gooey** , which gives you ready components like buttons, grids, scrolls, sliders, data lists, etc. There is also one new approach to GUI in Defold - the “Flow” framework:

> **[GitHub - Pause-Games/flow: Flow is a pure Lua Flexbox-style UI library for...](https://github.com/Pause-Games/flow)**
>
> Flow is a pure Lua Flexbox-style UI library for Defold, with declarative components, stack-based navigation, markdown rendering, and runtime-built GUI nodes

Defold GUI Manual is a good starting point:

> **[GUI scenes in Defold](https://defold.com/manuals/gui/)**
>
> This manual goes through the Defold GUI editor, the various types of GUI nodes and GUI scripting.

Some good tips:

> [@How to GUI in Defold](https://forum.defold.com/t/how-to-gui-in-defold/73256):
>
> How to GUI in Defold Introglowing_star Hello! I’m Insality glowing_star In this thread, I’ll be sharing some notes on How to make GUI in Defold. I’ve been working with Defold for over 6 years now, and during this time, I’ve gained a lot of experience with GUI. I hope some of my notes can be helpful for you! Feel free to share your own tips and notes as well. A big part of this section will be about [Druid](https://github.com/Insality/druid), as I believe it can make your GUI life much easier if you use it correctly…

Video Tutorials about GUI:

[![](https://img.youtube.com/vi/1Zk6ZLMfEZU/maxresdefault.jpg "Simple Main Menu with Defold - Defold Tutorial") ](https://www.youtube.com/watch?v=1Zk6ZLMfEZU)

![](https://img.youtube.com/vi/CyLkc11IIGk/maxresdefault.jpg)https://www.youtube.com/embed/CyLkc11IIGk?feature=oembed&wmode=opaque&list=PL4_orbQ0JeQtiQMHMC4gFI5JhPGKHaVB_
