Vtpl is a PHP template engine designed to keep HTML clean, readable, and free of embedded logic. Instead of mixing PHP code directly into HTML, Vtpl uses CSS selectors to define where dynamic content should be inserted. This separation of concerns makes templates easier to maintain, theme, and redesign, especially in CMS environments where HTML changes frequently.

With Vtpl, templates are simply lists of rules that map:

CSS selector  →  PHP variable or PHP code

Because the HTML remains untouched, designers can modify layouts freely while developers maintain logic independently. This approach enables systems like Vvveb CMS, where any HTML file can be replaced or redesigned without breaking dynamic content rendering.

Including HTML from Other Templates

Vtpl supports reusing HTML fragments using the from directive. This is useful for shared elements like headers, footers, or repeated UI blocks.

div#top > div.header = from(homepage.html|div#top > div.header)

If no selector is provided, Vtpl assumes the same selector (eg div#top > div.header):

div#top > div.header = from(homepage.html)

This ensures consistent markup across templates without duplicating HTML.

Modifiers

Modifiers change how Vtpl inserts content into the selected elements.

innerHTML (default)

Replaces the inside of the element.

div#id > span.title = "Lorem ipsum"
div#id > span.title|innerHTML = "Lorem ipsum"

outerHTML

To replace the entire elements with the specified code use outerHTML modifier

div#id > span.title|outerHTML = "Lorem ipsum"

innerText

To replace only the first text inside element but leave other elements intact

div#id > span.title|innerText = "Lorem ipsum"

before

Inserts content before the element.

div#id > span.class a|before = "lorem ipsum"

prepend

Inserts content at the beginning of the element.

div#id > span.class a|prepend = "lorem ipsum"

after

Inserts content after the element.

div#id > span.class a|after = "lorem ipsum"

append

Inserts content at the end of the element.

div#id > span.class a|append = "lorem ipsum"

deleteAllButFirst

Keeps only the first matched element, useful when designers include multiple mock elements but we only need one to iterate.

div.items a|deleteAllButFirst

Example:

<!-- Original -->
<div class="items">
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
</div>

<!-- After deleteAllButFirst -->
<div class="items">
  <a href="#">1</a>
</div<

hide (conditional rendering)

Removes elements if a variable is empty or false.

div.articles|if_exists = $articles

delete

Removes the selected elements entirely.

div.ad-banner|delete

Attribute insert

To modify an attribute, specify it as a modifier:

a.button|href = $url
a.button|title = "Go to page"

Additional Commands

import

Includes another Vtpl file. Useful for splitting large templates into smaller, maintainable parts.

import(profile/activity_tab.tpl)

Comments

Vtpl supports both single‑line and multi‑line comments:

// Single line comment

/* 
Multi-line
comment
*/

Debugging

Enable debugging inside a Vtpl file:

debug = true

Disable it:

debug = false

When debugging is enabled, Vtpl outputs a list of all template inserts, helping you understand exactly how the HTML was transformed.

Vtpl’s CSS‑selector‑based approach keeps HTML clean, separates logic from presentation, and makes large CMS systems easier to theme and maintain.