---
description: What to know when customizing the web view.
---

# Web View

The [web-view-ugui](../../editors/components/ugui/web-view-ugui "mention") can be customized through the hierarchy like any other UI object. Ensure the component's required properties have valid references.

## Required Properties

* All properties under "Testing" are not required.&#x20;
* The skill node properties under "Prefabs" are required as needed by all the skills in the specific graph you will load. For example, if the size "Giant" is not used by any skill, you technically don't need to set a value for it in the inspector.
* Having at least 1 reference in the "Connection Prefabs" list is required.
* Everything under "Other" is required. The default way those objects are set up is recommended.&#x20;

## Customization Examples

{% hint style="info" %}
If you'd like an object to move along with the graph, make it a child of the "GraphContent" object.
{% endhint %}

### Sword Mastery Demo

<div><figure><img src="https://392044090-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIqJrdJaq2UvKp4GciM41%2Fuploads%2FBR6iID5nsu1ZiKgCXVHs%2Fimage.png?alt=media&#x26;token=af344305-20e5-41f1-a9d7-f7091eb0f2c5" alt=""><figcaption></figcaption></figure> <figure><img src="https://392044090-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIqJrdJaq2UvKp4GciM41%2Fuploads%2FPb6xFXUcPWP22YuSzsUB%2Fimage_2025-05-08_134045883.png?alt=media&#x26;token=b4babd7c-179a-4ba4-97b8-00b88da9241d" alt=""><figcaption></figcaption></figure></div>

In the main demo scene, a bunch of buttons were added to the bottom of the screen to simply make the user know what some of the controls are.

### Runes Demo

<div><figure><img src="https://392044090-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIqJrdJaq2UvKp4GciM41%2Fuploads%2FbvGRzdrN5IPIcK2XdWd3%2Fimage.png?alt=media&#x26;token=bd6a97c6-33b3-46b2-86a2-2eae63fdaab7" alt=""><figcaption></figcaption></figure> <figure><img src="https://392044090-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIqJrdJaq2UvKp4GciM41%2Fuploads%2FKbAwEb7XCgEMJO0oUq2H%2Fimage_2025-05-08_134513381.png?alt=media&#x26;token=b54fa3e0-913f-4ea2-9b28-a38e8e8545a1" alt=""><figcaption></figcaption></figure></div>

In the Runes demo scene, only a single image was added as the central "Core" of the graph. The image was placed as a child of the "GraphContent" object so that it moves along with the graph. The lines connected to it are created through code. You can read more about it in [runes-demo-walkthrough](../../tutorials/runes-demo-walkthrough "mention").
