Nova™

Extensions

Readme

Twig for Nova 13

Twig template syntax extension for Nova editor with Craft CMS support. As the title say, should work in Nova 13.

Features

🎨 Rich Syntax Highlighting

  • Complete Twig syntax support (tags, variables, filters, tests, functions)
  • All Twig delimiters: {{}}, {%%}, {##} with whitespace control variants

🏷️ Comprehensive Tag Support

  • Control structures: if/endif, for/endfor, set/endset
  • Template inheritance: block/endblock, extends, include, embed
  • Macros: macro/endmacro with parameter support
  • Advanced tags: autoescape, apply, verbatim, cache, spaceless

🔧 Filter Recognition

  • All standard Twig filters: upper, lower, capitalize, truncate, date, default, escape, join, length, merge, raw, reverse, slice, sort, split, trim, replace, etc.
  • Craft CMS specific filters: camel, kebab, pascal, currency, filesize, datetime, hash, base64_encode, translate (t), append, prepend, where, group, indexBy, widont, parseRefs, and many more
  • Filter chaining with pipe operator |
  • Filter arguments with proper syntax highlighting

🚀 Craft CMS Support

  • JavaScript blocks: Full syntax highlighting for {% js %}...{% endjs %}
  • CSS blocks: Full syntax highlighting for {% css %}...{% endcss %}
  • Complete JavaScript and CSS language injection

Installation

From GitHub Release (Recommended)

  1. Download the latest twig-nova-treesitter.novaextension.zip from Releases
  2. Unzip and double-click the .novaextension folder
  3. Nova will automatically install the extension
  4. Open any .twig file to start using it

Manual Installation

  1. Clone this repository
  2. Open the cloned folder in Nova (File → Open)
  3. Extensions → Activate Project as Extension

For detailed installation instructions, see INSTALL.md.

Supported File Types

  • .twig files
  • .html.twig files

The syntax appears as "Twig-HTML" in Nova's syntax selector.

Examples

Basic Twig Syntax

{# This is a comment #}
{{ variable | upper }}

{% if user %}
    <h1>Hello {{ user.name | default('Guest') }}!</h1>
{% endif %}

{% for item in items | slice(0, 5) %}
    {{ loop.index }}: {{ item.title | truncate(50) }}
{% endfor %}

Craft CMS JS/CSS Blocks

{% js %}
console.log('JavaScript with full syntax highlighting');
const message = 'Variables, functions, everything works!';
document.querySelector('.container').classList.add('active');
{% endjs %}

{% css %}
.container {
    background-color: #f0f0f0;
    margin: 10px auto;
    border-radius: 8px;
}

#header {
    font-size: 24px;
    color: var(--primary-color);
}
{% endcss %}

Advanced Template Features

{% set items = [1, 2, 3, 4, 5] %}

{% macro render_field(field, options = {}) %}
    <div class="field {{ options.class | default('') }}">
        <label>{{ field.label }}</label>
        <input 
            name="{{ field.name }}" 
            value="{{ field.value | escape }}"
            type="{{ field.type | default('text') }}"
        >
    </div>
{% endmacro %}

{% autoescape 'html' %}
    {{ content | raw }}
{% endautoescape %}

Technical Details

  • Built on Tree-sitter for precise, fast parsing
  • Based on the excellent gbprod/tree-sitter-twig grammar
  • Extended with Craft CMS specific features

Development

Building from Source

# Install dependencies
npm install

# Generate parser
npm run generate

# Compile for macOS
npm run compile

# Run tests
npm test

Project Structure

twig-nova-treesitter.novaextension/
├── grammar.js              # Tree-sitter grammar
├── extension.json          # Nova extension manifest
├── extension.png           # Extension icon (256x256)
├── README.md               # Documentation
├── INSTALL.md              # Installation guide
├── CHANGELOG.md            # Version history
├── Scripts/
│   └── main.js            # Extension entry point
├── Syntaxes/
│   ├── Twig.xml           # Nova syntax configuration
│   └── libtree-sitter-twig.dylib  # Compiled parser
├── Queries/
│   ├── highlights.scm     # Syntax highlighting rules
│   ├── folds.scm         # Code folding rules
│   ├── injections.scm    # Language injections
│   ├── locals.scm        # Local scope rules
│   └── symbols.scm       # Symbol navigation
├── Tests/
│   ├── test.twig          # Basic test file
│   ├── test_filter.twig   # Filter tests
│   ├── test_craft_filters.twig  # Craft CMS filters
│   ├── test_js_css_blocks.twig  # Craft CMS blocks
│   └── minimal_filter.twig      # Minimal filter test
└── src/
    ├── parser.c           # Generated parser source
    ├── grammar.json       # Compiled grammar
    └── node-types.json    # AST node definitions

License

MIT License - see LICENSE file for details.

Acknowledgments

Changelog

Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

[0.1.5] - 2025-07-14

Changed

  • Renamed extension to "Twig for Nova 13" for better clarity
  • Updated description to highlight Craft CMS support
  • Improved README title and introduction

[0.1.4] - 2025-07-14

Documentation

  • Updated README.md with improved documentation formatting
  • Minor cleanup of documentation files

[0.1.1] - 2025-07-13

Added

  • Comprehensive Craft CMS filter support (camel, kebab, currency, datetime, etc.)
  • Test file for Craft CMS specific filters
  • Improved filter styling (now uses function style instead of processing)
  • Installation guide (INSTALL.md) with detailed setup instructions

Fixed

  • Filter recognition was showing in italic red - now displays with proper function styling

Documentation

  • Added comprehensive installation instructions for both GitHub release and manual installation
  • Clarified manual installation process with proper steps

[0.1.0] - 2025-07-13

Added

  • Initial release of Twig Tree-sitter extension for Nova
  • Complete Twig syntax highlighting with Tree-sitter parser
  • Support for all Twig delimiters: {{}}, {%%}, {##} with whitespace control
  • Comprehensive tag support: if/endif, for/endfor, set/endset, block/endblock, macro/endmacro
  • Filter recognition with pipe operator support
  • Craft CMS specific features:
  • JavaScript blocks ({% js %}...{% endjs %}) with full syntax highlighting
  • CSS blocks ({% css %}...{% endcss %}) with full syntax highlighting
  • Language injection for JS and CSS content
  • Code folding for blocks, comments, and JS/CSS sections
  • Symbol navigation for macros, variables, and blocks
  • Local scope definitions and references
  • Universal binary parser support (ARM64 + Intel)
  • HTML injection for template content

Technical Details

  • Built on gbprod/tree-sitter-twig grammar
  • Extended with Craft CMS block support
  • Optimized query files for Nova compatibility
  • Syntax appears as "Twig-HTML" in Nova's syntax selector

Files Structure

  • Tree-sitter grammar and compiled parser
  • Comprehensive query files (highlights, folds, injections, locals, symbols)
  • Nova syntax configuration
  • Test files for validation