Templating

Basic Concepts

‘tpl’ – The Template

tpl is the most important part of a Jet component.
It defines the HTML that your component will render.

You write it as plain HTML inside backticks ` and can use:

• Interpolated values ({{ title }})
• Jet directives like j-if, j-for, j-load or component ‘j-for’

How to write tpl

Technically, tpl is just a component property.
It can be written in three ways:

• A string → simple and direct
• A function → recommended
• A function using `html“ → for clean formatting with Prettier / VS Code

Examples

// As a plain string
tpl: `<h1>Bazinga!</h1>`

// As a function
tpl() {
  return `<h1>Bazinga!</h1>`
}

// With tagged template for formatting
tpl() {
  return html`
    <h1>Bazinga!</h1>
  `
}

Why use a function?

Using a function gives you more flexibility:

• You can add logic before rendering (e.g. anything you can’t do with interpolation, directives and binding)
• You can format HTML better with tools like Prettier
• You can return different HTML based on state or props

While plain strings are fine for simple layouts, functions give you power when things grow