> For the complete documentation index, see [llms.txt](https://docs.justscripts.net/scripts/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.justscripts.net/scripts/justhud/custom-elements.md).

# Custom Elements

## Files

For creating a new element, you should create a folder in "elements" folder, the name of the folder would be your element's source ID. Each element can have 3 files: element.html, style.css, script.js

* Note: the styles in style.css will be loaded globally, so prevent duplicated class names.
* Note: the script.js content will be loaded upon element mount.

## Javascript globals

in Js file, you can access global data using `window.placeholderData` . This object will provide you an list of placeholder you defined (read [Placeholders](/scripts/justhud/elements.md) )

## Config

```lua
{
    id = "customelement-instance",
    type = "custom",
    source = "test-element",
    args = {
        data = "%time%"
    },
    show = {
        default = true,
        is_editable = true,
        settings_title = "Show custom",
        in_car = true,
        not_in_car = true,
    },
    position = {
        default = {
            bottom = 26,
            left = 26
        },
        is_editable = true
    },
    icon = "iconsax:Microphone2:Bold"
}
```

This is sample config, most of things are similar to other elements (read [Elements](/scripts/justhud/elements.md)).\
source - The source ID of your element (folder name)\
args - A table of data that can be used as placeholders<br>

## Sample

```html
<div class="test-element">
    <h1>
        %arg_data%
    </h1>
</div>
```

In this case, JustHud will first parse %arg\_data% which defined in Config above in args table, then the %time% placeholder will be replaced  as the final value.