Elements Language

Component Template Folder

The Elements Language (also known as the Elements API) is a lightweight yet powerful templating system built into RapidWeaver Elements. It uses {{…}} syntax for property insertion and offers expressive control structures like @if, all aimed at keeping your templates clean, intuitive, and logic-driven.

Property Insertion with {{…}}

Use the familiar {{…}} syntax to inject component or page data directly into your markup. It’s simple and intuitive. Values from properties or collections appear where needed:

<h2>{{title}}</h2>

@dropzone

A container you can drop other components into.

@dropzone("extraItems")

@text

Editable text areas.

@text("heading")

@richtext

Editable styled text area.

@richtext("heading", default: "Hello World!")

@if

Control block-level rendering with clear, condition-based syntax. Elements Language uses @if, @elseif, @else, and @endif choosing when to display content based on properties.

@if(condition)
  …
@elseif(otherCondition)
  …
@else
  …
@endif

@each

Iterate over a number of items, repeating content.

@each(item in items)
  <li>{{item.title}}</li>
@endeach

@include

Include the content from another template file.

@include("button")

@portal

Transport content to another area of the page.

@portal(pageStart)
<!-- Code here will be transported to the top of the page before the open HTML tag.-->
@endportal

@template

Define inline pieces of markup for reuse

@template("button")
  <button>{{label}}</button>
@endtemplate

Then include them

@include("button", label: "Buy Now")

@anchor

Instruct Elements to add a linkable anchor in Elements Link Panel.

<div id="@anchor("myAnchor")"></div>

@raw

Disables template processing.

@raw()
    ‹div class="text-sm text-black-600">{{message}}</div>
@endraw