Verniz Views and Markup

A Verniz component is a Zolo function that returns View. There is no component base class, registration table or second expression language.

Markup is Zolo¶

use std::html::{article, h2, p, View}

fn PostCard(title: str, summary: str) -> View {
    <article class="post">
        <h2>{title}</h2>
        <p>{summary}</p>
    </article>
}

The parser lowers this to the same representation as builder syntax:

article(class: "post") {
    h2() { title }
    p() { summary }
}

Use whichever form is clearer. Components and HTML elements follow the same call rules, including named arguments and default parameters.

Text, expressions and control flow¶

Inside markup, text is literal. Braces return to the full Zolo language:

fn Results(items: [str], show_empty: bool) -> View {
    <section>
        {if items.len() == 0 && show_empty {
            <p>No results.</p>
        }}
        {for item in items {
            <p key={item}>{item}</p>
        }}
    </section>
}

Use HTML comments inside markup: <!-- note -->. Zolo // and /* */ comments are accepted between tag attributes, where the parser is back in tag syntax.

Safe by default¶

Interpolated text and attribute values are escaped. A title containing <script> becomes text, not executable markup. Use raw(value) only for HTML that has already crossed a trust boundary safely.

<p>{untrusted_text}</p>
{raw(trusted_fragment)}

Documents, fragments and route results¶

Use document, head and body for complete pages, or fragment for siblings without a wrapper. render(view) converts a View to a string when you need explicit serialization.

An HTTP route may return a View directly. The server renders it and sets the HTML content type. It also serves the Verniz client runtime at /_zolo/client.js when a page includes client_script().

Raw-text elements¶

The bodies of <style> and <script> are parsed as CSS and JavaScript text, not as markup. A static <style> inside a component is scoped and hoisted by default; write <style global> for document-wide CSS.

Next: Islands, Signals and Actions.