RapidWeaver Elements

Syntax highlighting and code snippets for RapidWeaver Elements templates in VS Code and Cursor.

---

Installation

From Marketplace (Recommended)

1. Open VS Code or Cursor
2. Press Cmd+Shift+X (Mac) or Ctrl+Shift+X (Windows/Linux) to open Extensions
3. Search for "RapidWeaver Elements"
4. Click Install

From Command Line

# VS Code
code --install-extension elements-platform.rwelements

# Cursor
cursor --install-extension elements-platform.rwelements

Manual Install

Download the .vsix file from GitHub Releases and install via:

• VS Code/Cursor: Cmd+Shift+P → "Install from VSIX"

---

Quick Start

1. Open any .html or .php file in a templates/ folder
2. The extension automatically activates with syntax highlighting
3. Type rw- to see available snippets

That's it! Your RapidWeaver Elements code is now highlighted.

---

Features

Syntax Highlighting

Full syntax highlighting for all RapidWeaver Elements directives in HTML and PHP files:

Directive	Description
@if, @else, @elseif, @endif	Conditional rendering
@each, @endeach	Loop through collections
@template, @endtemplate	Define inline reusable templates
@include, @includeIf	Include templates with parameters
@text, @dropzone	Content directives
@portal, @endportal	Inject content to other locations
@raw, @endraw	Output raw template syntax
{{variable}}	Variable interpolation
{{item.property}}	Property access
{{item::isFirst}}	Iterator metadata

Code Snippets

Type a prefix and press Tab to insert a snippet:

Prefix	Output
rw-if	@if(condition)...@endif
rw-ifelse	@if...@else...@endif
rw-each	@each(item in collection)...@endeach
rw-template	@template("name")...@endtemplate
rw-include	@include("template", param: value)
rw-includeif	@includeIf(condition, template: "name")
rw-text	@text("name", title: "Title")
rw-dropzone	@dropzone("name", title: "Title")
rw-dropzone-h	Horizontal dropzone
rw-portal	@portal("bodyEnd")...@endportal
rw-portal-once	Portal with includeOnce option
rw-raw	@raw()...@endraw
rw-var	{{variable}}
rw-var-prop	{{object.property}}
rw-var-iter	{{item::isFirst}}
rw-classes	{{classes.className}}
rw-component	Full component scaffold
rw-alpine	Alpine.js component wrapper

Additional Features

• Code Folding - Collapse @if/@endif, @each/@endeach, @template/@endtemplate, @portal/@endportal blocks
• Auto-closing - {{ automatically closes with }}
• Bracket Matching - Proper matching for all directive pairs
• Indentation - Smart indentation for nested directives

---

Examples

Conditional Rendering

@if(showContent)
<div class="{{classes.wrapper}}">
    @dropzone("content", title: "Content")
</div>
@else
<p>No content available</p>
@endif

Loops

@each(item in items)
<div class="{{classes.item}}">
    <h3>{{item.title}}</h3>
    <p>{{item.description}}</p>
    @if(item::isFirst)
    <span class="badge">First!</span>
    @endif
</div>
@endeach

Inline Templates

@template("button")
<button class="{{classes.button}}">{{label}}</button>
@endtemplate

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

Portals

@portal("bodyEnd")
<script>
    // Script injected at end of body
</script>
@endportal

---

Configuration

Automatic Language Detection

Files in templates/ folders are automatically detected:

• **/templates/**/*.html
• **/templates/**/*.php

Custom File Associations

Add to your VS Code/Cursor settings (settings.json):

{
  "files.associations": {
    "*.elements.html": "rwelements",
    "**/my-templates/**/*.html": "rwelements"
  }
}

Manual Language Selection

1. Open any file
2. Click the language indicator in the bottom-right corner
3. Select "RapidWeaver Elements"

---

Requirements

• VS Code 1.60.0+ or Cursor (any version)

---

Support

• Report Issues: GitHub Issues
• RapidWeaver: realmacsoftware.com/rapidweaver

---

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

---

License

MIT License - Copyright (c) Elements Platform