Skip to content

Expressions

An expression is a sequence of tokens that evaluates to a single value — the content to display, the URL to use, or a condition to test.

Think of an expression as a recipe: each ingredient (token) transforms the data one step further. You read it left to right. posts → first → title means "get posts, take the first, extract the title."

Understanding tokens

There are four types of tokens — the building blocks of expressions.

Property tokens access a field from your GraphQL API. Examples: posts, title, featured_image, author_name. Every property token asks the API for a specific piece of data.

Filter tokens transform data using Liquid filters. Examples: upcase (make text uppercase), where (filter a list), first (get the first item). Filters are always applied to the output of the previous token.

State tokens reference a named state from another component. If another component has a state called "selected post", you can reference it to reuse its data.

Fixed tokens are hard-coded values you enter yourself — a string, number, or boolean. Useful for fallback values or static content.

How tokens chain together

Expressions work left to right. Each token takes the output from the previous token as input.

Example 1: Simple property chain 

Author → name
"Get the author object, then extract the name field."

Example 2: Property + filter 

Title → upcase
"Get the title, then apply the upcase filter to make it all capitals."

Example 3: Complex chain 

Posts → where (category = "news") → first → title
"Get posts, filter to only those where category equals 'news', take the first one, and extract its title."

This chain has four tokens:

  1. Property: posts — fetch all posts
  2. Filter: where — narrow down by category
  3. Filter: first — pick the first result
  4. Property: title — get the title field

Token input and output

Every token has a type of data it expects and a type it produces.

A property token that returns a list of posts has output type "list of posts". If you then apply the first filter, it outputs "one post" (an object). Then you can use the title property, which outputs "string".

When you're building an expression in the editor, Silex shows you which tokens are valid — it won't let you apply a filter designed for strings to a number, for example.

Fixed values

Sometimes you need to enter a static value — a piece of text, a number, or a URL slug.

A fixed token is just text or a number you type in. In an expression like:

Posts → where (status = "published")

The "published" is a fixed token — a hard-coded string. It's not coming from your API; you're telling Silex "match the status field against this exact string."

Public vs. private states

When you create a state on a component, you choose:

Public states are visible to child components of this component. Useful if you want a parent component to define data that children can access.

Private states are only used internally on this component. They include special states like:

  • innerHTML — the HTML content of the element
  • condition — a visibility rule (show/hide the element)
  • condition2 — second condition for more complex visibility logic
  • __data — the loop data (for repeating components)

Building your first expression

The expression editor shows you available tokens as you type. Start with a property (something from your API), then add filters to shape the data, then use it in your component.

If you want to display the title of the first blog post, your expression is:

  1. Select the posts property
  2. Add the first filter
  3. Add the title property
  4. The result: posts → first → title, which outputs a string (the title)

Bind that to the component's innerHTML state and the title appears on the canvas.

Common mistakes

  • Chaining incompatible tokens. A string filter won't work on a number. Silex will warn you — pay attention to the input/output types.
  • Forgetting the context. Some tokens only make sense inside a loop. The condition state is only checked when the component is part of a loop.
  • Using a fixed value when you meant a property. If you write "featured_image" as a fixed string, it displays the text "featured_image", not the actual image.
  • Building overly complex expressions. Keep them simple. If an expression gets hard to understand, break it into multiple states on different components.

Learn more

  • Binding data — practical steps to create and use expressions in the editor
  • Loops and lists — how the __data state repeats components for arrays
  • Conditions — visibility operators and how to show/hide based on data
  • Filters — complete reference of all available Liquid filters
  • WordPress setup — understanding the data structure you'll be working with

Quiz

Q1: You want to display the uppercase version of a post title. What tokens do you need?

  • A) posts → title → upcase
  • B) posts → upcase → title
  • C) upcase → posts → title
Answer

A) posts → title → upcase — You fetch posts, extract the title (a string), then apply upcase to make it uppercase. Filter tokens must come after the data they transform.

Q2: What is a fixed token?

  • A) A token that never changes
  • B) A hard-coded value you type in (not from your API)
  • C) A token that can only be used once per expression
Answer

B) A hard-coded value you type in (not from your API) — Fixed tokens are literal strings, numbers, or booleans that you enter directly, as opposed to property tokens that fetch data from your GraphQL API.

Q3: In the expression posts → where (status = "published") → first → title, what is "published"?

  • A) A property token
  • B) A filter token
  • C) A fixed token
Answer

C) A fixed token — You're comparing the status field against the exact string "published". That's a literal value you're entering, not fetching from the API.

Q4: Why does Silex prevent you from applying a string filter to a number?

  • A) It's a technical limitation
  • B) The filter wouldn't make sense or would produce an error
  • C) Silex wants to make the UI simpler
Answer

B) The filter wouldn't make sense or would produce an error — Filters are designed for specific data types. An uppercase filter expects text; applying it to a number doesn't make semantic sense and would fail.

Q5: You want the title of the first post to be visible to child components. Should you create a public or private state?

  • A) Private (because it's only used for this one component)
  • B) Public (because child components need to access it)
  • C) Either one works the same way
Answer

B) Public (because child components need to access it) — Private states are only for the component itself. Public states are exposed to children so they can reference them. For data to be available downstream, make it public.

Edit this page on GitLab