Overview

Templates (or views) are HTML files that would be displayed when a specific URL is accessed. The files are placed in the views/ directory of the project.

File Naming Convention

• View file: views/contact.html
  This would be displayed at the /contact URL
• View file: views/about-us.html
  This would be displayed at the /about-us URL

Sub-sections

Subsections are smaller parts of a template that can be included in other templates to avoid repetition and improve organization.

Important: If the path starts with a slash (e.g. /sections/header.html) it would be considered relative to the top views/ directory. If it doesn't start with a slash (e.g. sections/header.html) it would be considered relative to the current template file.

Use the following syntax to include files in the main template:

<!--include:sections/common/header.html-->
<!--include:/sections/common/header.html-->

Sub-sections with variables

Variables can be passed to the included template:

<!--include:sections/header.html ["something" => "value"]-->
<!--include:/sections/header.html ["something" => "value"]-->

With that example there would be a variable named something available in the included template with the value value. It can be used with <!--$something--> in the sections/header.html

It's important to note that variables passed from the actions would overwrite the variables passed to the included template.

Layouts

Layouts allow defining a common structure for templates, enabling code reuse and maintaining a consistent look and feel across the application. Layouts serve as a wrapper around content.

Layouts are optional. Almost everything is possible to be done without them, but it's nice to have feature.

Layouts reside in the layouts/ directory of the project

To define a layout for a template, use the following syntax at the very top of the template file:

<!--layout:/main-layout.html-->

The path starting with / would be relative to the top layouts/ directory.

The layout file should contain a special placeholder where the content of the child template will be injected. Use the following syntax for the placeholder:

<!--layout-content-->

When the template is rendered, the content of the child template will replace the <!--layout-content--> placeholder in the layout file.

Variables can also be passed from the child template to the layout. For example:

<!--layout:/main-layout.html ["key" => "Value"]-->

In the layout, the normal variable notation <!--$key--> can be used to display the value.

The variables would be overwritten from the action variables if they are present.

In the layout, include statements, conditional statements, and variables can be used.

Simple Variables

Use <!--$variable--> to display simple values:

<h1><!--$title--></h1>
<p>Total items: <!--$count--></p>

Raw Variables

By default the variable values are converted into HTML entities. To output raw variable values without any escaping, use the following syntax:

<!--($raw)-->
//outputs raw variable value e.g. <h1>Hello</h1>

This is useful if the variable contains HTML content that should be rendered as-is without escaping.

Warning: Be cautious when using raw variables from user's input to avoid XSS vulnerabilities.

Array Access

Access array elements using <!--$array["key"]-->:

<p>Name: <!--$user["name"]--></p>
<p>Email: <!--$user["email"]--></p>

.env parameters

Use the following to display parameters in the templates:

<!--e("PARAMETER_NAME")-->

Foreach Loops

Loop through arrays using <!--foreach()-->:

Simple Loop (Value Only)

<!--foreach($products as $product)-->
    <div>
    <h3><!--$product[name]--></h3>
    <p><!--$product[price]--></p>
    </div>
<!--endforeach-->

Loop with Key and Value

<!--foreach($items as $key=>$value)-->
<p>Item #<!--$key-->: <!--$value[name]--></p>
<!--endforeach-->

If Statements

Show or hide content based on conditions:

Positive Condition (if truthy)

<!--if($user_logged_in)-->
    <p>Welcome back!</p>
<!--endif-->

Negative Condition (if falsy)

<!--if(!$error)-->
    <p>Everything looks good!</p>
<!--endif-->

With Array Access

<!--if($user["premium"])-->
    <p>Premium features unlocked!</p>
<!--endif-->

<!--if(!$user["verified"])-->
    <p>Please verify your email</p>
<!--endif-->

Truthiness rules:

• Truthy: non-empty strings, numbers (including 0), true, non-empty arrays
• Falsy: empty strings, null, false, undefined variables

Helpers

<form action="/contact">
    <!--csrf-->
    <input type="email" name="email" />
    <input type="submit" value="Submit" />
</form>

<!--csrf_token-->

<!--flush-->     // Display all flash messages
<!--flush:key--> // Display flash messages of a specific type

<div class="flash-success">Success message here</div>

<!--date-->               // Current date/time in default format
<!--date Y-->             // Just the year
<!--date d/m/Y-->         // Date in day/month/year format
<!--date F j, Y-->       // Full month name, day, year
<!--date l, F j, Y-->    // Day of week, full month name, day, year

<!--date-->               - Returns current date/time in default format: 2026-01-08 14:30:45
<!--date Y-->             - Returns just the year: 2026
<!--date d/m/Y-->         - Returns date in day/month/year format: 08/01/2026
<!--date F j, Y-->       - Returns: January 8, 2026
<!--date l, F j, Y-->    - Returns: Wednesday, January 8, 2026

<!--pagination-->   // Pagination with default 10 items per page
<!--pagination 50-->   // Pagination with 50 items per page