UI can be a pain to write and maintain, so there is a lot of helper and utility code available for you. Everything revolves around the `UIElement` class. This class is abstract, meaning you'll need to derive your own class from it: ```cs public class ExampleBox : UIElement { protected override void Plan() { // (100, 100) position, 200x200 size FillRectangle(100, 100, 200, 200, Color.Green); } } ``` Within the `Plan` function, you'll specify everything that you want to draw. This doesn't actually draw anything yet. Instead, it builds up a list of [[PaintCommand]] objects that are handled in the next step: Painting. ## Painting Rendering UI can be slow when text and SVGs are involved, so the bitmap painting process occurs on a background thread. First, your list of paint commands will be analysed to figure out how big the bitmap needs to be. Then a [[Bitmap]] is created and each [[PaintCommand]] is painted onto it. Next, the bitmap data is copied to an OpenGL [[Texture]] on the [[Background OpenGL Context]]. This is completely separate to the rest of your game's rendering and allows texture transfers to occur in parallel without causing your game to stutter. ## Rendering The last step is to render your UI element to the screen by calling the `Draw` function: ```cs public class ExampleClient : Client { ExampleUI box; protected override void OnLoad() { box = new(); } protected override void OnRenderUI() { box.Draw(); } } ```