# @raw

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

```html
@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:

```html
@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:

```html
@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:

```html
@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:

```html
@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:

```html
@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:

```html
<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](https://docs.realmacsoftware.com/elements-docs/cms/) - External CMS integration


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.realmacsoftware.com/elements-docs/elements-language/component/language/raw.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.