Binding data

Once you've connected a data source, you bind it to components by creating states and expressions. This page shows you the step-by-step workflow in the editor.

The core idea: select a component, create a state (a named expression), and the data appears on the canvas in real-time.

Creating a state

1. Select a component on the canvas (text block, image, or container)
2. Open the Data panel in the right sidebar
3. Click Add State or the plus button
4. Enter a name (e.g., "Post title")
5. Choose Public or Private — usually Private for component-specific data
6. An expression editor opens

Building an expression with the visual editor

The expression editor is a flow of tokens that you build step by step.

Step 1: Choose a data source property - Click Add token - Select Property - From the list, pick a field from your API (e.g., Posts) - You now have the first token: posts

Step 2: Add filters or navigate deeper - Click Add token again - Select Filter to transform the data, or Property to navigate to a related field - Example: if posts is a list, add the first filter to get one post - Your expression is now: posts → first

Step 3: Keep chaining - Click Add token again - Add the title property to extract the post title - Final expression: posts → first → title

Live preview — As you build, Silex fetches live data from your API and shows you the result on the canvas.

Binding to innerHTML (displaying text)

The most common state is innerHTML — the HTML content of an element.

To display a blog post title:

1. Add a heading component to your canvas
2. Open the Data panel and click Add State
3. Name it innerHTML (this is a special state name that controls what text appears)
4. Build an expression: posts → first → title
5. As you finish, the heading on the canvas shows the actual title from your API

The heading now displays live data instead of placeholder text.

Binding to HTML attributes (links, images, alt text)

Beyond content, you can bind data to HTML attributes like href, src, and alt.

Binding a link: 1. Select a link component 2. Open the Data panel 3. Click Add State 4. Name it href (the state name matches the HTML attribute) 5. Build an expression that outputs a URL: posts → first → link 6. The link now points to real post URLs from your API

Binding an image source: 1. Select an image component 2. Create a state named src 3. Build an expression: posts → first → featured_image → url 4. The image now displays the featured image from your API

Binding alt text: 1. Create a state named alt 2. Build an expression: posts → first → featured_image → alt 3. Assistive technologies now have proper descriptions

Understanding state types

States can be:

Public states — visible and reusable by child components. Useful if you want a parent component to define data that child elements access.

Private states — only for this component. Most of your states will be private. Special private states include:

• innerHTML — controls the text/HTML content
• condition — controls visibility (show/hide)
• condition2 — another condition for combined logic
• __data — controls looping (see Loops)

Editing a state

Once created, you can edit the state expression anytime:

1. In the Data panel, find the state
2. Click the state name or an edit icon
3. The expression editor opens again
4. Change the tokens, add filters, rebuild the chain
5. Click Save
6. The preview updates immediately

Common workflow: showing post details

Scenario: you have a blog page. You want to show the title, date, and featured image of the most recent post.

1. Add a Heading to your page
2. Create a state innerHTML → expression: posts → first → title

3. The heading shows the post title

4. Add a Paragraph for the date

5. Create a state innerHTML → expression: posts → first → date

6. The paragraph shows the publication date

7. Add an Image

8. Create a state src → expression: posts → first → featured_image → url
9. Create a state alt → expression: posts → first → featured_image → alt
10. The image shows the featured image with proper alt text

All three elements are now bound to the same post (the first one) and update together if the post changes.

Enabling live preview

If you don't see live data on the canvas, the preview might be disabled:

1. Look for a preview toggle (usually in the toolbar or Data panel)
2. Click to enable it
3. Data from your API should appear immediately

The preview fetches real data from your API each time you edit, so you're designing with actual content.

Common mistakes

• Using the wrong state name. innerHTML is special and controls content; custom names like postTitle won't display anything unless you reference them elsewhere.
• Building an expression that returns the wrong type. If you bind a number to innerHTML, it displays "5", not an error — but visually it might not make sense. Check what type your expression produces.
• Forgetting to enable the preview. If you bind data but don't see it on the canvas, turn on the preview toggle.
• Creating duplicate states. Silex allows multiple states on one component, but each should have a unique name and purpose.

Learn more

• Expressions — understanding tokens and chains
• Loops and lists — repeating components with the __data state
• Conditions — showing/hiding components with condition
• Filters — reference of all available data transformation filters

---

Quiz

Q1: You want to display a post title as a heading. What state name do you create?

• A) postTitle
• B) innerHTML
• C) content

Answer

B) innerHTML — The innerHTML state controls the HTML content of an element. Custom names like postTitle don't automatically display anything; you'd need other components to reference them.

Q2: You're binding a blog post's featured image to an image component. How many states do you need to create?

• A) One state for the image URL
• B) Two states — one for the URL and one for alt text
• C) Three states — URL, alt, and title

Answer

B) Two states — one for the URL and one for alt text — Create a state named src with the image URL and a state named alt with the alt text. This covers display and accessibility.

Q3: You created a state, but live data isn't showing on the canvas. What's the first thing to check?

• A) The preview is disabled
• B) Your API is down
• C) You need to refresh the browser

Answer

A) The preview is disabled — Look for a preview toggle in the toolbar or Data panel. Without it enabled, expressions are saved but not evaluated against live data.

Q4: You want to make a state available to child components. Which type do you choose?

• A) Private
• B) Public
• C) Global

Answer

B) Public — Public states are exposed to child components. Private states are only for the component itself. If children need to access the data, make it public.

Q5: You created a state with the expression posts → first → author. What type of value does this return?

• A) A string (the author name)
• B) An object (the author with fields like name, email, bio)
• C) A list of authors

Answer

B) An object (the author with fields like name, email, bio) — The author field is likely an object with multiple sub-fields. To get the author's name specifically, you'd extend the expression: posts → first → author → name.