Vento Templating - Why It's the Perfect Fit for Static Sites

When building static sites, the templating engine you choose shapes your entire development experience. Vitto uses Vento, and here’s why that matters.

What is Vento?

Vento is a modern templating engine that compiles templates to JavaScript functions. It’s fast, expressive, and designed for HTML.

{{ layout "layouts/base.vto" }}

<main>
  <h1>{{ title }}</h1>
  {{ if showContent }}
    <p>{{ description }}</p>
  {{ /if }}
</main>

Why Vento Over JSX?

JSX is powerful, but it comes with baggage:

• Requires a build step (Babel or equivalent)
• Mixes logic and presentation heavily
• Tightly coupled to React or similar frameworks

Vento keeps things simpler:

• No build step beyond what Vite already provides
• Clean separation of logic and markup
• Framework-agnostic — use with any JS library

Filters and Pipes

Vento supports filter pipelines for transforming data:

{{ title |> uppercase }}
{{ date |> formatDate }}
{{ content |> safe }}

You can create custom filters too — just JavaScript functions.

Layouts and Includes

Compose pages using layouts and partials:

{{ layout "layouts/base.vto" }}
{{ include "partials/header.vto" }}
{{ content }}
{{ include "partials/footer.vto" }}

Performance

Vento compiles templates to optimized JavaScript functions. The overhead is minimal — often less than 1ms per render. For static sites (rendered at build time), this means zero runtime cost.