---
title: "Fluid Syntax: Escaping"
manual: "Fluid Explained"
version: "main"
permalink: "https://docs.typo3.org/permalink/fluid:escaping-syntax"
source: "Syntax/Escaping.rst"
rendered: "2026-09-26T08:24:58+00:00"
---

# Fluid Syntax: Escaping {#escaping-syntax}

## Escaping behavior in inline syntax {#escaping-behavior}

At a certain nesting level, single quotes `'` required for the
inline syntax need to be escaped with a backslash:

```xml
<f:render partial="MyPartial" arguments="{
    myArgument: '{f:format.trim(value: \'{f:format.case(mode: \\\'upper\\\', value: \\\'{myVariable}\\\')}\')}',
}" />
```

While escaping cannot be avoided in all cases, alternatives should always be
preferred to improve the readability of templates. Depending on the use cases, there
are different approaches to achieve this.

### Passing variables to inline ViewHelpers {#passing-variables-to-inline-viewhelpers}

If only a variable is passed as a ViewHelper argument, the single quotes `'`
and curly braces `{}` can be omitted:

```xml
{f:format.case(mode: 'upper', value: myVariable)}
```

### Using ViewHelper chaining if possible {#using-viewhelper-chaining-if-possible}

Many ViewHelpers that perform changes on a single value also accept that value as a
child value. This allows a much cleaner syntax if you combine multiple ViewHelpers for
one value:

```xml
{myVariable -> f:format.case(mode: 'upper') -> f:format.trim()}
```

## Avoiding syntax collision with JS and CSS {#escaping-workarounds}

While it is generally advisable to avoid inline JavaScript and CSS code within
Fluid templates, sometimes it may be unavoidable. This can lead to collisions
between Fluid's inline or variable syntax and the curly braces `{}`
syntax characters used in JavaScript and CSS.

There are two approaches how these collisions can be avoided:

### f:format.json ViewHelper {#escaping-collisions-json}

If your goal is to create JSON in your template, you can create an object in Fluid
and then use the [\<f:format.json> ViewHelper](https://docs.typo3.org/permalink/fluid:typo3fluid-fluid-format-json)
to generate valid JSON:

```xml
<div data-value="{f:format.json(value: {foo: 'bar', bar: 'baz'})}">
```

This can also be used directly in JavaScript code that doesn't use any curly braces
itself:

```xml
<script>
let data = {f:format.json(value: {foo: 'bar', bar: 'baz'}) -> f:format.raw()};
```

### CDATA sections {#escaping-collisions-cdata}

<!-- TODO: no Markdown rendering for "versionadded" -->

CDATA sections can be used to avoid syntax collisions. For Fluid 4 and below,
workarounds are documented in older versions of this documentation.

CDATA sections can be used in Fluid templates to partially switch off the Fluid
parser and to alter the syntax for variables, expressions and inline ViewHelpers.
This makes it possible to mix CSS or JS with certain Fluid features.

The following syntax rules apply to text wrapped with `<![CDATA[ ]]>` in
Fluid templates:

-   ViewHelper tag syntax is ignored: ViewHelper tags will not be interpreted and
    will just remain as-is.
-   ViewHelper inline syntax, variables and expressions are only interpreted if
    they are using three curly braces `{{{ }}}` instead of just one `{ }`.
-   The `<![CDATA[ ]]>` keyword will be removed. If you want the CDATA to remain
    in the output, consider using the
    [\<f:format.cdata> ViewHelper](https://docs.typo3.org/permalink/fluid:typo3fluid-fluid-format-cdata).

Note that there might still be syntax overlaps if your CSS or JS uses three
curly braces that shouldn't be interpreted by Fluid.

Examples:

**Avoiding collisions in HTML attribute**

```xml
<f:variable name="test" value="bar" />
<![CDATA[
<div
    x-data="{
        test: null,
        init() {
            test = 'foo';
        }
    }"
>
    {{{test}}}
</div>
]]>
```

**Avoiding collisions in inline CSS**

```xml
<f:variable name="color" value="red" />
<style>
<![CDATA[
    @media (min-width: 1000px) {
        p {
            background-color: {{{color}}};
        }
    }
]]>
</style>
```

**Avoiding collisions in inline JS**

```xml
<f:variable name="countries" value="{
    0: {key: 'de', name: 'Germany', short: 'DE'},
    1: {key: 'us', name: 'United States of America', short: 'US'},
}" />
<script>
<![CDATA[
    const settings = {
        countries: {{{countries -> f:format.json() -> f:format.raw()}}},
    };
]]>
</script>
```