BHTML

Brinkee uses a custom server-side templating language called BHTML, that can be used to add dynamic content to your templates. BHTML uses a familiar double curly braces syntax, as seen in Vue.js and Handlebars.

We’re big fans of Vue.js, and use it to build www.brinkee.com as well as the frontend of your Brinkee platform.

Why even use BHTML?

Static content is great, but sometimes you can’t avoid the need for adding dynamic data to your HTML templates. Initially we used Handlebars to accomplish this, but the syntax is not nearly as intuitive as the syntax of Vue.js. In fact, someone who’s used to the simplicity of Vue.js, might actually get confused by Handlebars (e.g. looping over data is not very intuitive!). BHTML offers a subset of Vue.js features, that make sense in a server-side context.

Where can I use BHTML?

You can use BHTML everywhere you’d might expect to use dynamic values along side static content. The most common use cases are inside email or notification templates.

Supported Features

Text Interpolation
Javascript Expressions (inside curly brackets)
Conditional Rendering (b-if only)
List Rendering (item in list only)

Syntax

Text interpolation

Welcome {{ recipient.first_name }}
<!-- Outputs: -->
Welcome Laura

Javascript expressions

Description: {{ context.data.description.toUpperCase() }}
<!-- Outputs: -->
Description: DO SOMETHING FOR ME

Conditional rendering

Conditional rendering requires you to wrap your content in an HTML tag (e.g. <span>).

The <template> tag is not supported.
The b-if syntax will not be part of the parsed HTML.

<span b-if="context.data.active">This is rendered when the record is active!</span>
<!-- If `context.data.active` is truthy this will be the output: -->
<span>This is rendered when the ticket is active!</span>

<span b-if="!!recipient.last_name">We know the recipient's last name</span>
<!-- If `recipient.last_name` is truthy this will be the output: -->
<span>We know the recipient's last name</span>

You and also use Conditional Rendering in combination with text interpolation:

<strong b-if="context.data.number">{{ context.data.number }}</strong>
<!--  If `context.data.number` is truthy this will be the output: -->
<strong>TASK001003</strong>

List rendering

List rendering requires you to wrap your content in an HTML tag (e.g. <li>).
The b-for syntax will not be part of the parsed HTML.

<ul>
    <li b-for="user of users">{{ user.first_name }} {{ user.last_name.toUpperCase() }}</li>
</ul>
<!-- This will be the output: -->
<ul>
    <li>Marty MCFLY</li>
    <li>Emmet BROWN</li>
    <li>Biff TANNEN</li>
    <li>Jennifer PARKER</li>
</ul>

BHTML is designed to be easy to use and understand, even for those who are new to programming. It provides a straightforward way to add dynamic data to your templates without needing to learn complex programming concepts or syntax.