Reusable Components with UI Toolkit | Editor Scripting Unity Tutorial

This week you'll learn how to use UI Toolkit to create reusable components that encapsulate behaviors and interactions. We're creating a custom Visual Element for use in the Editor, but the same concept can be applied to runtime GUIs. Making reusable components reduces duplication of effort and unifies user interaction with your controls!

📚 Resources:

🧡 Believe in LlamAcademy's mission and have received value from the videos? Here's how you can show your support:
📚 Take my Unity ShaderGraph Course:

Some links may be affiliate links, which at no additional cost to you, gives me a small portion of the purchase.

Chapters:
00:00 Topic Introduction
00:32 What we'll make
01:03 Create the Template with UXML
03:10 Create the backing class
04:43 Initialization Options
05:17 Property Binding (Editor Only)
06:00 Drag and Drop your control in the UI Builder
06:30 Support LlamAcademy

[lluisvinent]

I wish I had discovered your channel before starting a giant open source project. Now that it's in production and there are multiple people working on it, it's harder to change the workflow. We all know the programmer's motto: If something works, don't touch it!

Thank you very much for your videos! They are great, and you give me a very good vibe! ❤

[captainnoyaux]

The UI Toolkit seems very interesting (maybe because I'm coming from web development haha). I'm subscribing in case you make more videos on this super interesting subject !

[petermills]

Some dumb mistakes I made because I'm very new to this you may want to avoid

1. 1:15 After setting "Editor Extension Authoring" to true, my default theme was "Default Unity Runtime Theme" not "Active Editor Theme". Made everything look weird. Swap your theme in the top right of the viewport.
2. 2:00 when adding my slider and float field to the visual element, they kept stretching vertically to fill the space. Somehow the visual element had ended up with a flex grow value of 1. I needed to set it back to 0.
3. 4:50 The project panel in the library has dropdowns for both UI Documents and Custom Controls. I named my C# script the same as my uxml, and accidently dragged in the c# script and was very confused I couldn't see anything.,

[ruchirraj]

This video was really helpful, could you also show some of the other custom controls that you had made, it would be great reference, as I have been struggling with something similar for quite some time.

[LostStylus]

Will this approach wok for runtime UI? Or is it for editor UI only?

[DanMitchell-cklj]

Could you provide an example of using this control? I am unsure of how to use the Property variable.

[WelshGuitarDude]

So does the uxml file have to have same name as the script file that inherited from visual element? How do they link to each other

[StarkTech]

To start, very nice video, I did not know that was possible to create my own element. I am currenty doing it, a basic element which as an ObjectField and a Toggle to display the inspector of the object in a visual element under.
I am surprised cause I can not set my VisualTreeElement as SerializeField like in Editor scripts to click on the script and assign the document to it. Is it mandatory to use AssetDataBase cause if you change the path of the document, the script won't be able to load the document isn't it.

[kadircalloglu]

Are u recommend this uı toolkit because we are using too much string filed it can be performans issue

[DavonAllen]

How do you handle Buttons in this case?
Theres got to be a better way to find the asset outside of a potentially error prone string

[lornemalvo]

How to use Sprite Atlas with UI Toolkit?

[bortokan]

Hey liam i would like to ask you regarding DOTS and what the different between the one we using and keep up the good work

[thethingofstuff]

When I drag it into the UI Builder, it's completely blank?