RapidWeaver Elements
Syntax highlighting and code snippets for RapidWeaver Elements templates in VS Code and Cursor.
Installation
From Marketplace (Recommended)
- Open VS Code or Cursor
- Press
Cmd+Shift+X (Mac) or Ctrl+Shift+X (Windows/Linux) to open Extensions
- Search for "RapidWeaver Elements"
- 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
- Open any
.html or .php file in a templates/ folder
- The extension automatically activates with syntax highlighting
- 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
- Open any file
- Click the language indicator in the bottom-right corner
- Select "RapidWeaver Elements"
Requirements
- VS Code 1.60.0+ or Cursor (any version)
Support
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
License
MIT License - Copyright (c) Elements Platform
