forest

foo.tmpl

{* Example of template processing an article *}
{article: Article}
li class="article {article.featured ? 'featured'}" /view.root
  a href="/details"
    | {article.name} /data.name
  span.actions
    button type=button /view.editBtn | Edit
    button type=button /view.deleteBtn | Delete

invoke.js

var result = foo({
  article: {
    featured: true,
    name: 'Bar'
  }
});

console.log(result);
// {
//   view: {
//     root: HTMLLiElement,
//     editBtn: HTMLButtonElement,
//     deleteBtn: HTMLButtonElement
//   },
//   data: {
//     name: "Bar"
//   }
// }

console.log(result.root.outerHTML);
// <li class="article featured">
//   <a href="/details">Bar</a>
//   <span class="actions">
//     <button type="button">Edit</button>
//     <button type="button">Delete</button>
//   </span>
// </li>

invoke.scala

case class Article(name: String, featured: Boolean)

print(foo(Article("Baz", false)))

// <li class="article">
//   <a href="/details">Baz</a>
//   <span class="actions">
//     <button type="button">Edit</button>
//     <button type="button">Delete</button>
//   </span>
// </li>