Skip to main content
Expressions support the standard set of operators for arithmetic, comparison, boolean logic, and conditional selection. They follow conventional precedence rules — multiplication before addition, comparison before logic — and parentheses override everything.

​
Arithmetic

The four basic operations work on numeric values: 
{{ price * quantity }}
{{ total - discount }}
{{ count + 1 }}
{{ amount / 2 }}
Arithmetic combined with SetState is how you build interactive counters and quantity selectors without a server call:

​
Unary Operators

Prefix - negates a value, prefix + coerces to number: 
{{ -score }}
{{ -(a + b) }}

​
String Concatenation

The + operator does double duty: if either side is a string, it concatenates. Otherwise it adds numerically. 
{{ 2 + 3 }}                   → 5
{{ 'hello' + ' ' + 'world' }} → "hello world"
{{ 'count: ' + 42 }}          → "count: 42"
This is how you build composed strings from multiple state values:

​
Comparison

Six comparison operators, all returning booleans:
OperatorMeaning
==Equal (loose)
!=Not equal
>Greater than
>=Greater than or equal
<Less than
<=Less than or equal
{{ count > 0 }}
{{ status == 'active' }}
{{ items.length != 1 }}
{{ value == null }}
Comparisons are commonly used in conditional rendering to show or hide elements based on state: 
with If("inventory == 0"):
    Alert("Out of stock", variant="destructive")
with Elif("inventory > 0 && inventory < 10"):
    Alert("Low stock")

​
Logical

Boolean operators for combining conditions:
OperatorMeaning
&&Logical AND
||Logical OR
!Logical NOT
These use short-circuit evaluation, just like JavaScript: && returns the first falsy value (or the last value if all truthy), || returns the first truthy value (or the last value if all falsy). This makes || useful as a default mechanism: 
{{ name || 'Anonymous' }}
If name is undefined, empty, or any other falsy value, the result is 'Anonymous'.

​
Ternary

The ternary operator condition ? ifTrue : ifFalse selects between two values. It’s useful for producing conditional text inline: Ternaries nest for multi-way selection: 
{{ score > 90 ? 'A' : score > 80 ? 'B' : score > 70 ? 'C' : 'F' }}
A common pattern is pluralization: 
{{ count }} item{{ count != 1 ? 's' : '' }}

​
Precedence

From lowest (loosest binding) to highest (tightest binding):
PrecedenceOperators
Pipe|
Ternary? :
Logical OR||
Logical AND&&
Logical NOT!
Comparison== != > < >= <=
Addition+ -
Multiplication* /
Unary- +
This means price * quantity | currency evaluates as (price * quantity) | currency — the arithmetic happens first, then the pipe formats the result. Use parentheses to override: (a + b) * c.