brackets-curlyElements Language

Template syntax reference for RapidWeaver Elements components

The Elements Language is a lightweight yet powerful templating system built into RapidWeaver Elements. It uses {{…}} syntax for property insertion and provides expressive directives like @if, @each, and @include for dynamic content generation. The language is designed to keep your templates clean, intuitive, and focused on HTML structure.

Property Insertion

Use double curly braces to insert component properties, page data, or collection values directly into your markup:

<h2>{{title}}</h2>
<p>{{description}}</p>
<a href="{{link.href}}">{{link.title}}</a>

Access nested properties using dot notation:

<span>{{author.name}}</span>
<img src="{{image.resource.src}}" alt="{{image.alt}}" />

Directives Reference

Content Areas

Directive
Description
Documentation

@dropzone

Container for child elements

@text

Editable plain text area

@richtext

Editable styled text with Typography

@markdown

Editable Markdown text area

Control Flow

Directive
Description
Documentation

@if / @elseif / @else

Conditional rendering

@each

Iterate over collections

Code Organization

Directive
Description
Documentation

@include

Include external template file

@includeIf

Conditional template include

@template

Define inline reusable template

Page Integration

Directive
Description
Documentation

@portal

Transport content to page locations

@anchor

Create linkable anchor points

@raw

Disable template processing

Quick Examples

Editable Text Areas

Dropzones for Child Elements

Conditional Rendering

Looping Over Collections

Including Templates

Portals for Script Injection

Inline Templates

Anchor Points

Raw Output for CMS Integration

Best Practices

  1. Keep templates focused on HTML - Use the hooks file for complex logic, string manipulation, and data processing.

  2. Use meaningful property names - Choose descriptive names that indicate purpose: showHeader, buttonLabel, heroImage.

  3. Extract repeated patterns - Use @include or @template for reusable markup.

  4. Leverage conditionals for modes - Use edit and preview variables to show appropriate content in each mode.

  5. Organize portal content - Use includeOnce and consistent id values to prevent duplicate script/style injection.

Last updated

Was this helpful?