Skip to main content

HTML

HTML is a generic component that allows users to write simple HTML code. It also allows templating of HTML code. The component is split into two parts: a visual and a HTML tab. The visual tab provides users with a preview of rendered HTML code. The HTML tab provides the user with an input area where the user can write HTML code.

HTML element

Templating​

Users can dynamically create content by writing it as a template using a specific syntax which will be rendered based on variable values. The syntax uses tags. Tag is indicated by the opening delimiter {{ and the closing delimiter }}. Content between the {{ }} delimiters may or may not contain a tag symbol at the beginning following by a tag key that represents a variable name. For example, {{#person}} is a tag that has a tag symbol # and a tag key person. There are several types of tags available.

Basic​

The basic tag type is defined with a single tag. Tag is rendered as the value of the variable. If the tag key is empty, or a variable with that name does not exist, nothing is rendered.

Variables:

{ 
  name: Michael
}

Template:

* {{name}}
* {{age}}

Output:

* Michael
*

If a variable is an object, you can access a specific property value by using dot notation.

Variables:

{ 
  person: {
    name: Michael
  }
}

Template:

* {{person.name}}

Output:

* Michael

If a variable is an array, the index and dot notation can refer to the specific item in the array.

Variables:

{ 
  people: [
    {
      name: Micahel
    },
    {
      name: John
    },
    {
      name: David
    }
  ]
}

Template:

* {{people.0.name}}

Output:

* Michael

Section​

Section tag type is defined with two tags. The first tag needs to have a symbol # followed by a variable name. The second tag needs to have a symbol / followed by the same variable name as in the first tag. The content between the two tags is referred to as that section block. The behavior of the section block is determined by the value of the variable.

False value​

If the variable does not exist or exists and has a false value (null, undefined, false, 0, NaN, empty string, or an empty array), the block will not be rendered.

Variables:

{ 
  person: false
}

Template:

* Shown 
{{#person}} 
* Hidden
{{/person}}

Output:

* Shown

True value​

If the variable exists and does not have a false value, the block will be rendered if the variable value is an array - with the block rendered once for each item in the array. The context of the block is set to the current item in the array for each iteration.

Variables:

{ 
  people: [
    {
      name: Micahel
    },
    {
      name: John
    },
    {
      name: David
    }
  ]
}

Template:

{{#people}} 
* {{name}}
{{/people}}

Output:

* Micahel
* John
* David

If a variable is an array of strings, a . can be used to refer to the current item in the array.

Variables:

{ 
  names: [Micahel, John, David]
}

Template:

{{#names}} 
* {{.}}
{{/people}}

Output:

* Micahel
* John
* David

Inverted section​

Inverted section tag type is defined with two tags. The first tag needs to have a symbol ^ followed by a variable name. The second tag needs to have a symbol / followed by the same variable name as in the tag. The content between the two tags is referred to as that section block. The block is rendered if the variable has a false value.

Variables:

{ 
  person: false
}

Template:

* Shown 
{{^person}} 
* Also shown
{{/person}}

Output:

* Shown
* Also shown
warning
Do not add <head> to html editor’!