# Web View

The [web-view-ugui](https://stylishesper.gitbook.io/skill-web/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 "Web Name" property is required **if you are not loading a web through code**. In this case, "Load On Start" **should be enabled**.
* 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 "Components" **is required**. The default way those objects are set up **is recommended**.&#x20;
* Disable "Clamp Inside Screen" **if the web should be clamped inside the content object instead**.

## 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](https://stylishesper.gitbook.io/skill-web/tutorials/runes-demo-walkthrough "mention").

### Fully Masked Web And Screen Space Canvas Support

By default Unity's LineRenderer component cannot be masked and does not support Screen Space - Canvas. Skill Web has a custom component called UILineRenderer which supports both Screen Space - Canvas and is maskable.

Follow the steps below to ensure your web supports Scren Space - Canvas and masking:

1. For connections, use UILineRenderer instead of LineRenderer. A default one is provided to you in **Assets/StylishEsper/SkillWeb/Resources/Prefabs/uGUI**. Set the UILineRenderer prefab in the WebViewUGUI component.

   <figure><img src="https://392044090-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIqJrdJaq2UvKp4GciM41%2Fuploads%2FvNizUe98dxC0vrZuChAd%2Fimage_2025-10-24_132608105.png?alt=media&#x26;token=0c596b61-99bc-438d-8185-c4e488dd42b2" alt="" width="377"><figcaption></figcaption></figure>
2. The **WebView** game object has a child object named "**Content";** give this object the **Mask** component.
3. The **Content** game object has a child object named "**GraphContent";** disable the **Override Sorting** in its **Canvas** component.

At this point, the web UI should be fully masked.
