@raw

Disable template processing for a section of content

The @raw directive prevents the Elements template engine from processing content within its block. This is essential when you need to output literal {{ and }} syntax, such as when integrating with external templating systems like Elements CMS or JavaScript templating libraries.

Syntax

@raw()
    <!-- Content here will not be processed by Elements -->
@endraw

Use Cases

Elements CMS Integration

When using Elements CMS, you need to output CMS template syntax that uses the same {{}} delimiters as the Elements templating language. Wrap CMS-specific code in @raw to prevent Elements from processing it:

@raw()
    <div class="text-sm text-black-600">{{item.title}}</div>
@endraw

Without @raw, Elements would try to find a property called item.title and replace it. With @raw, the literal text {{item.title}} is output for the CMS to process at runtime.

CMS Loop Syntax

Preserve CMS loop syntax in your templates:

@raw()
    {% for image in item.gallery %}
        <img src="{{image.src}}" alt="{{image.alt}}" />
    {% endfor %}
@endraw

Mixing Elements and CMS Syntax

You can exit and re-enter @raw blocks to mix Elements properties with CMS syntax:

@each(image in images.resources)
    <div class="slide">
        <img src="{{image.image}}" />
    </div>
@endeach

@else

@raw()
    {% for image in item.@endraw{{cmsField}}@raw() %}
        <div class="slide">
            <img src="{{image.src}}" />
        </div>
    {% endfor %}
@endraw

In this example:

• Elements processes {{cmsField}} to insert the field name

• The CMS processes the rest at runtime

JavaScript Template Literals

When using JavaScript templating libraries that use similar syntax:

@raw()
    <script type="text/template" id="my-template">
        <div class="item">
            <h2>{{title}}</h2>
            <p>{{description}}</p>
        </div>
    </script>
@endraw

Vue.js or Similar Frameworks

Preserve Vue.js mustache syntax:

@raw()
    <div id="app">
        <p>{{ message }}</p>
        <ul>
            <li v-for="item in items">{{ item.name }}</li>
        </ul>
    </div>
@endraw

Combining with Elements Properties

You can use Elements properties outside @raw blocks to inject dynamic values into CMS templates:

<div class="{{classes.wrapper}}">
    @raw()
        {% for item in collection %}
            <article class="@endraw{{classes.item}}@raw()">
                <h2>{{item.title}}</h2>
            </article>
        {% endfor %}
    @endraw
</div>

This outputs:

• {{classes.wrapper}} - Replaced by Elements with the actual class names

• {{classes.item}} - Also replaced by Elements

• {{item.title}} - Preserved literally for CMS processing

Best Practices

1. Use for external templating only - Only use @raw when integrating with external systems that use {{}} syntax.

2. Keep raw blocks focused - Include only the content that needs to be preserved; exit @raw when you need Elements processing.

3. Document CMS dependencies - When your component uses @raw for CMS integration, document this clearly for users.

4. Test both modes - Test your component with and without CMS data to ensure proper fallback behavior.

Related

• Elements CMS Documentation - External CMS integration