> 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.