Skip to content
Nubo

HTML Templating

Nubo supports HTML-like syntax directly in the language.

Basic Usage

Section titled “Basic Usage”

You can assign HTML content to variables:

let html = <div>Hello, World!</div>

Returning HTML

Section titled “Returning HTML”

You can return HTML from functions:

fn render() -> html {
  return <body>
    <h1>Welcome</h1>
  </body>
}

Embedding Expressions

Section titled “Embedding Expressions”

Insert variables inside HTML:

let name = "Martin"
let html = <h1>Hello, {name}!</h1>

Note: Nubo escapes HTML when inserting variables inside a template code.

Preventing Escaping

Section titled “Preventing Escaping”

Use @{} to embed raw HTML:

let html = <div>Safe</div>
return <body>
  @{html}
</body>

Attribute Binding

Section titled “Attribute Binding”

You can bind attributes in three ways:

  • attr="Value" → static string "Value"
  • :attr="expression" → dynamic binding to the evaluated expression
  • :attr → shorthand for binding the variable named attr directly
let id = "user-1"
let html = <div :id="id"></div>
// or
html = <div :id></div>

You can also manipulate attributes at runtime using built-in methods:

  • element.setAttribute("key", value) — sets or updates an attribute
  • element.getAttribute("key") — retrieves the attribute value
  • element.removeAttribute("key") — removes the attribute

Example:

welcome.setAttribute("dataAge", 19)
let age = welcome.getAttribute("dataAge")
welcome.removeAttribute("dataAge")

Note: Nubo converts any attribute names to a snake-case one.