title: Step 2 — Variables & Filters active_step: 2

Step 2 — Variables & Filters

Template variables with #hashtag# syntax and chainable filters.

Variable syntax

Variables are wrapped in # signs. They're replaced with their value at render time. They can come from sessions, URL params, fetched data, or app state. 

#session.visitor_name#      <!-- Session variable -->
#params.id#                 <!-- URL parameter -->
#user.email#                <!-- Authenticated user -->
#post.title#                <!-- Fetched data -->
#env.APP_NAME#              <!-- Environment variable -->

Filters

Append a filter with |filtername. Chain multiple filters. Arguments go after a colon.

Filter Example Output
uppercase #name|uppercase# ALICE
lowercase #name|lowercase# alice
truncate:N #bio|truncate:50# First 50 chars...
default:"val" #name|default:"stranger"# stranger (if empty) 
<!-- Chained filters -->
#session.bio|truncate:80|uppercase#

Interactive demo — type your name

Type your name below. The w-set attribute writes it to your session. The greeting above updates live — no JavaScript required.

Hello, #session.visitor_name|default:"stranger"#!

The value persists across page reloads because it's stored in your server-side session. 

<!-- The greeting -->
Hello, #session.visitor_name|default:"stranger"#!

<!-- The input that writes to session -->
<input
  type="text"
  w-set="session.visitor_name = $value"
>
What you learned