> For the complete documentation index, see [llms.txt](https://alec.gitbook.io/custom-machinery-botania-1.19/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://alec.gitbook.io/custom-machinery-botania-1.19/creating-custom-machines/machine-gui/mana-element.md).

# Mana element

Customize the mana bar of the machine gui.

The mana gui element is used to display the content of a [Mana Component](/custom-machinery-botania-1.19/creating-custom-machines/machine-components/mana-component.md) present in the machine.

Mana elements are defined in json with: `"type": "custommachinery:mana"` .

Note that if you didn't set a Mana Component in the machine json the Mana Element will still work but always show a value of 0 mana.

### Properties

The mana element has 3 mandatory properties and 5 optional properties:

#### Mandatory properties

```json5
"type": "custommachinery:mana" //Mandatory to define a mana element.
```

<details>

<summary>X</summary>

#### Name : `x`

#### Description :&#x20;

A positive integer value that define the x axis position of the element to be displayed on the Machine GUI.

#### Example :&#x20;

The element will be rendered 100px to the right from the top-left corner of the gui.

```json5
"x": 100
```

</details>

<details>

<summary>Y</summary>

#### Name : `y`

#### Description :&#x20;

A positive integer value that define the y axis position of the element to be displayed on the Machine GUI.

#### Example :&#x20;

The element will be rendered 100px to the bottom from the top-left corner of the gui.

```json5
"y": 100
```

</details>

#### Optional properties

<details>

<summary>Width</summary>

#### Name : `width`

#### Description :&#x20;

A positive integer value that define the width of the element on the Machine GUI.

#### Default :&#x20;

The same width as the texture specified in the `texture` property.

#### Example :&#x20;

The width of the element will be 100px.

```json5
"width": 100
```

</details>

<details>

<summary>Height</summary>

#### Name : `height`

#### Description :&#x20;

A positive integer value that define the height of the element on the Machine GUI.

#### Default :&#x20;

The same height as the texture specified in the `texture` property.

#### Example :&#x20;

The height of the element will be 100px.

```json5
"height": 100
```

</details>

<details>

<summary>Priority</summary>

#### Name : `priority`

#### Description :&#x20;

An integer property that define the priority of the Element to be rendered.&#x20;

Elements with higher priority will be rendered first. If 2 elements are at the same position the first to be rendered will be under and the last will be above.

#### Default : 0

#### Example :&#x20;

The element will be rendered under each element that have a priority lower than 1000.

```json5
"priority": 1000
```

</details>

<details>

<summary>Tooltips</summary>

#### Name : `tooltips`

#### Description :&#x20;

A list of [Text components](broken://pages/MUZmq7ib9IxDEIuy4mkL) that will be shown as tooltips when the player mouse cursor hover the element.

Each tooltips of the list will be a new line.

#### Example :&#x20;

Replace the default tooltips with a single line that say "Click me !" :&#x20;

```json
"tooltips": "Click me !"
```

</details>

<details>

<summary>Highlight</summary>

#### Name : `highlight`

#### Description :&#x20;

A boolean property, if true the element will highlight (become slightly brighter) when the player mouse hover it. If false the element will not highlight on mouse hover.

#### Default : true

#### Example :&#x20;

The element will not highlight on mouse hover :&#x20;

```json
"highlight": false
```

</details>

### Example

A typical Mana GUI Element:

```json
{
    "type": "custommachinery:mana",
    "x": 20,
    "y": 20
}
```

Result:

<div align="left" data-full-width="false"><figure><img src="https://339883037-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FI6N2mYai1Jt8PY0CdfuV%2Fuploads%2FsCSPTYI5w02Ck1ptYPYl%2FCaptura%20de%20pantalla%202024-01-28%20140022.png?alt=media&amp;token=f7dca454-3ad6-49e1-94c3-59f609982549" alt=""><figcaption><p>Mana element</p></figcaption></figure></div>