Elements 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	Dropzones
@text	Editable plain text area	Text
@richtext	Editable styled text with Typography	Rich Text
@markdown	Editable Markdown text area	Markdown

Control Flow

Directive	Description	Documentation
@if / @elseif / @else	Conditional rendering	Conditionals
@each	Iterate over collections	Looping

Code Organization

Directive	Description	Documentation
@include	Include external template file	Includes
@includeIf	Conditional template include	Includes
@template	Define inline reusable template	Inline Templates

Page Integration

Directive	Description	Documentation
@portal	Transport content to page locations	Portals
@anchor	Create linkable anchor points	Anchors
@raw	Disable template processing	Raw Output

Quick Examples

Editable Text Areas

@text("heading", default: "Welcome")

@richtext("content", title: "Body Content")

@markdown("article", title: "Article", default: "Write your content here...")

Dropzones for Child Elements

@dropzone("content", title: "Container")

@dropzone(name: "items", title: "Grid Items", horizontal: true)

Conditional Rendering

@if(showHeader)
    <header>{{headerText}}</header>
@endif

@if(edit)
    <!-- Edit mode content -->
@elseif(preview)
    <!-- Preview mode content -->
@else
    <!-- Published content -->
@endif

Looping Over Collections

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

@each(page in pages)
    @if(page::isFirst)
        <li class="first">{{page.title}}</li>
    @else
        <li>{{page.title}}</li>
    @endif
@endeach

Including Templates

@include("button", label: "Click Me", style: "primary")

@includeIf(wantsLightbox, template: "lightbox")

Portals for Script Injection

@portal(bodyEnd, id: "my-script", includeOnce: true)
    <script src="library.js"></script>
@endportal

Inline Templates

@template("card")
    <div class="card">
        <h3>{{title}}</h3>
        <p>{{description}}</p>
    </div>
@endtemplate

@each(item in cards)
    @include("card", title: item.title, description: item.desc)
@endeach

Anchor Points

<section id="@anchor("features")">
    <h2>Features</h2>
</section>

Raw Output for CMS Integration

@raw()
    <div>{{cms.field}}</div>
@endraw

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.