3. Variables

Hylia introduces Variables, a core component in many code languages not present in HTML. To create a variable, we can use the <var> tag. A <var> tag is structured as follows:

<var name="CoolVariable">CoolValue</var>

Now how do we use these variables?

We can use {{VarName}} to call them. That's the variable name wrapped in two curly brackets {{ }}

Here is a basic Hylia file using them.

<hylia>
    <element name="head">
        <title>Hello Hylia!</title>
    </element>
    <var name="testvar">Hi!</var>
    <element name="body">
            <h1>Hello Hylia!</h1>
            <p>This is an example content.</p>
            {{testvar}}
    </element>
</hylia>

When the file is compiled, It replaces {{testvar}} with the value of the testvar variable. Variables can contain tags, as long as they're oneliners: <var name="testvar"><h1>Hello!</h1></var>

<hylia>
    <element name="head">
        <title>Hello Hylia!</title>
    </element>
    <var name="testvar"><h1>Hello!</h1></var>
    <element name="body">
            <h1>Hello Hylia!</h1>
            <p>This is an example content.</p>
            {{testvar}}
    </element>
</hylia>

Compiling this file will replace {{testvar}} with <h1>Hello!</h1> in the output.

1. Basic Hylia Syntax

2. Outside the body

3. Variables