Syntax Guide

Syntax guide gives you a brief overview of how Edge templates work. Checkout syntax reference for the list of available tags or globals. Also in order to keep learning curve small, edge makes use of vanilla Javascript syntax.

Interpolation

Interpolation is a way to define dynamic blocks of code inside your HTML structure. Edge makes use of Mustache like syntax for same.

<h2> You are logged in as {{ username }} </h2>

Everything inside {{ }} will escape HTML and in order to write raw HTML, you must wrap it inside {{{ }}}

{{{ '<h2> Render as h2 </h2>' }}}

Also, you can instruct Edge to not process the content inside mustache braces. This is likely to be done when you are using some front-end framework like VueJs and want Vue to process it.

@{{ 'I will not be processed' }}

Tags

Tags let you add behavior to your code. There are two types of tags called Inline tags and Block tags. Inline tags are closed within the same line, whereas block tags are closed with an explicit end statement.

Inline Tags

Below is the list of examples

@include('partials.users')

Or

@layout('master')

Block Tags

Block-level tags allow you define content within the body of the tag. Each block-level needs to be closed explicitly with end statement

@component('alert') (1)
@endcomponent (2)
1 The first statement is to start a tag by calling the tag name after by @ symbol.
2 In order to end the tag, we write @end followed by the tag name. It is important to close the block level tags, otherwise, the edge will throw an exception.

Self closing tags

Block-level tags can also be self-closed based upon their nature. For example, the @component tag makes it optional to override the @slots, which means you can self-close when you do not want to override a slot.

@!component('alert')

The @! is the expression to self-close a block level tag.

Passing Parameters

You can pass parameters to any tag (only if they support it) by passing a plain object or key/value pairs. For example:

@component('alert', type = 'success')

Or

@component('alert', { type: 'success' })

Rest…​

You are free to call any javascript function by passing it via data object or defining a global.

Defining the count global
edge.global('count', function (collection) {
  return collection.length
})
Using the count global
{{ count(users) }}

Also Edge allows you to write almost all Javascript expressions inside your templates. For example:

{{ 'virk'.includes('v') }}

Or

{{ ['virk', 'nikk'].indexOf('virk') }}