> For the complete documentation index, see [llms.txt](https://docs.flatredball.com/gum/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.flatredball.com/gum/code/gum-tool-code-contributing-and-plugins/elementsave/tographicaluielement.md).

# ToGraphicalUiElement

## Introduction

ToGraphicalUiElement creates a new GraphicalUiElement (visual Gum object) from the calling ElementSave. This method is typically used to create new Screen or Component instances from a Gum project.

The conversion of a GraphicalUiElement can optionally add the resulting GraphicalUiElement to manager, but this is considered an advance approach. Almost all cases should use the no-argument version of ToGraphicalUiElement.

## Code Example - ToGraphicalUiElement on Screen

The following code can be used to convert a Screen named "MainMenu" to a GraphicalUiElement. In this case, the MainMenu is obtained from a loaded Gum project:

```csharp
// assuming gumProject is a valid Gum project:

var screen = gumProject.Screens.Find(item => item.Name == "MainMenu");
// Calling ToGraphicalUiElement creates the visuals for the screen
var graphicalUiElement = screen.ToGraphicalUiElement();
graphicalUiElement.AddToRoot();
```

## Code Example - ToGraphicalUiElement on Component

The following code creates components and adds them to an existing ScrollViewer. The ScrollViewer could be created in code or also in Gum (as part of a screen).

```csharp
// assuming gumProject is a valid Gum project
// and that ScrollViewerInstance is also a valid ScrollViewer:

var component = gumProject.Components.Find(item => item.Name == "CustomButton");

// Calling ToGraphicalUiElement creates an instance of the compnent. This can be
// called multiple times:
for(int i = 0; i < 10; i++)
{
    var customButtonInstance = component.ToGraphicalUiElement();
    ScrollViewerInstance.AddChild(customButtonInstance);
}
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.flatredball.com/gum/code/gum-tool-code-contributing-and-plugins/elementsave/tographicaluielement.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.