Custom Elements

Since version 2.1.1 JustHud allows you to create custom elements using your own source code !

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 )

Config

{
    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). source - The source ID of your element (folder name) args - A table of data that can be used as placeholders

Sample

<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.