Check out our latest project ✨ OpenChapter.io: free ebooks the way its meant to be 📖

UI Outline

An asset by eebon
The page banner background of a mountain and forest

Install Asset

Install via Godot

To maintain one source of truth, Godot Asset Library is just a mirror of the old asset library so you can download directly on Godot via the integrated asset library browser

Install Manually

You could also download the zip archive of the asset and manually install it into your addons/ folder

Report comment

Reason for reporting:
Character limit is 200 characters

Delete Comment

Are you sure you want to delete this Comment? This action can't be undone.

UI Outline hero image

Quick Information

0 ratings
UI Outline icon image
eebon
UI Outline

I have always struggled visualizing my UI elements as I am building them out. This lets you see all your UI Outlines at the same time so you have a clearer view. You can also highlight and see the names of specifc nodes. Works on all control nodes.Editor-only overlay: outlines all Control nodes in the 2D view, adds node-name labels with de-overlap, and highlights selected nodes above othersWhen you first enable it , may need to click on a different ui element to get it to load correctley the first time.

Supported Engine Version
4.5
Version String
1.0.2
License Version
MIT
Support Level
community
Modified Date
1 month ago
Git URL
Link to Git URL
Issue URL
Link to Issues URL

UI Outlines (Godot 4.5)

Editor-only overlay for the 2D view: draws outlines around Control nodes, shows optional name labels, and highlights selected nodes on top.

Install

  1. Copy to res://addons/ui_outlines/
  2. Enable in Project → Project Settings → Plugins → UI Outlines

Use

  • In the 2D editor toolbar:
    • UI Outlines: toggle outlines
    • Names: toggle labels
    • Labels: Selected / Leaves / All

Notes

  • Editor only (nothing shows in-game).
  • Works with Control nodes (Panels, Containers, Labels, etc.).

Customize

Open addons/ui_outlines/plugin.gd and tweak:

  • Colors/widths: _outline_color, _outline_color_selected, _outline_width
  • Label mode default: _labels_mode
  • Label behavior: _avoid_overlap, _label_bg, _label_text

I have always struggled visualizing my UI elements as I am building them out. This lets you see all your UI Outlines at the same time so you have a clearer view. You can also highlight and see the names of specifc nodes. Works on all control nodes.

Editor-only overlay: outlines all Control nodes in the 2D view, adds node-name labels with de-overlap, and highlights selected nodes above others

When you first enable it , may need to click on a different ui element to get it to load correctley the first time.

Reviews

0 ratings

Your Rating

Headline must be at least 3 characters but not more than 50
Review must be at least 5 characters but not more than 500
Please sign in to add a review

Quick Information

0 ratings
UI Outline icon image
eebon
UI Outline

I have always struggled visualizing my UI elements as I am building them out. This lets you see all your UI Outlines at the same time so you have a clearer view. You can also highlight and see the names of specifc nodes. Works on all control nodes.Editor-only overlay: outlines all Control nodes in the 2D view, adds node-name labels with de-overlap, and highlights selected nodes above othersWhen you first enable it , may need to click on a different ui element to get it to load correctley the first time.

Supported Engine Version
4.5
Version String
1.0.2
License Version
MIT
Support Level
community
Modified Date
1 month ago
Git URL
Link to Git URL
Issue URL
Link to Issues URL

Open Source

Released under the AGPLv3 license

Plug and Play

Browse assets directly from Godot

Community Driven

Created by developers for developers