Fusion Syntax

#Literals

fusion
bookTitle = 'The Guide'
chapterTitle = "Universe"
answer = 42
isAwesome = true

#Comments

fusion
// Line comment

# Another line comment

/*
* Multiline comment
*/

#Eel Expressions

fusion
calculated = ${'USD ' + 1337}
rounded = ${Math.floor(3.14)}

If you want to know more about what is possible inside the expressions, read the section about eel expressions and eel helpers.

#Objects

#Property Definition 

fusion
obj {
    someProperty = 'value' 
}
// is the same as
obj.someProperty = 'value'

#Clear property 

fusion
obj {
    myProp >
}
// is the same as
obj.myProp >

#Prototypes

#Definition 

fusion
prototype(MyCustomComponent) {
    myProp = 'Some value'
}

#Extension

fusion
prototype(MyCustomComponent) < prototype(Component) {
    …
}

#Hierarchical override 

fusion
prototype(Book) < prototype(Component) {
    prototype(Input).attributes.type = 'email'
}

Override type attribute of all Input Prototypes inside Book to "email"

#Basic decorators / meta properties 

For every property you can define some basic decorators / meta properties. For instance you can hide a property by defining an @if decorator and setting it to false:

#@if

#Example
fusion
prototype(MyComponent) < prototype(Neos.Fusion:Component) {
    myProp = 'value'
    myProp.@if.someKeyToIdentifyThisDecorator = false
    renderer = ${'String: ' + props.myProp}
}
#Preview
String:

#@process

Expressions or Fusion objects operating on the value of a given object or property. They can access the current Fusion object they are operating on as this.

#Example
fusion
prototype(Docs:Preview) < prototype(Neos.Fusion:Component) {
    calc = 5
    calc.@process.double = ${value * 2}
	calc.@process.subtract = ${value - 2}
	calc.@process.add = ${value + 100}
	calc.@process.add.@position = 'start'

    renderer = ${props.calc}
}
#Preview
208

As you can see in the example you can modify the order using the @position decorator.

#@position

@position can be used with sequential processed decorators and objects where the order is relevant. These include:

  • @process
  • @if
  • inside Neos.Fusion:Case
  • inside Neos.Fusion:Join

When the position of a prop is set, it uses the given position instead of the order they were defined in the document.

#@context

#@apply

Modify the object Fusion context.

#@path, @children & @key

Info

If you are looking for @path, @children or @key, you can find the definition in the AFX syntax, as they are only available inside AFX and are transpiled to Fusion.

#Special decorators / meta properties

#@private

This special decorator is only available in Neos.Fusion:Component.

Private props will be lazily evaluated and are available inside the current component’s scope under the context variable private.

#Example
fusion
prototype(MyComponent) < prototype(Neos.Fusion:Component) {
	label = 'Capacity: '

	variant = 'big'
	color = 'red'

	@private {
		id = ${props.variant + '_' + props.color}
		capacity = Neos.Fusion:Case {
			green {
				condition = ${private.id == 'small_green'}
				renderer = 5
			}
			default {
				condition = true
				renderer = ${props.variant}
			}
		}
	}

    renderer = ${props.label + private.capacity}
}
#Preview
Capacity: big

#@glue

This special decorator is only available in Neos.Fusion:Loop & Neos.Fusion:Join.

#Example
fusion
prototype(Docs:Preview) < prototype(Neos.Fusion:Component) {
    renderer = Neos.Fusion:Join {
        @glue = '-'
        key = 'intro'
        component = 'headline'
        content = 'welcome'
    }
}
#Preview
intro-headline-welcome