How CMS works¶
Silex connects to any GraphQL API to pull live data into your pages, then displays it in the visual editor so you can see exactly what your site will look like before publishing.
Overview video:
In Silex, you use expressions to build your layouts with your data. It is visual: you add a data source, you pick fields, and you see the result on the canvas right away.
Note: This page covers the design workflow. Publishing and collection pages are covered in Publishing and Collection pages.
The GraphQL API¶
An API (Application Programming Interface) is a way for Silex to talk to a database and ask for content. Silex uses GraphQL — a standard query language that many CMS platforms support.
WordPress (with WPGraphQL plugin) is the primary CMS for Silex. Silex also works with Supabase, GitLab, and other GraphQL APIs.
Compatible backends¶
These backends have been tested with Silex:
| Backend | Type | Setup guide |
|---|---|---|
| WordPress | Self-hosted CMS | WordPress setup |
| Supabase | Hosted database + API | Supabase setup |
| GitLab | Code hosting platform | No guide yet |
Other services that provide a GraphQL API can also work. Choose the GraphQL backend type when you connect them.
When you add a data source in Silex, you provide the address of its GraphQL API. Each CMS shows this address. For WordPress, go to GraphQL > Settings and copy the address shown under the GraphQL Endpoint field (see WordPress setup). Silex asks the API "what types of data do you have?" and "what fields are in each type?" Then you can pick fields to display on your pages.
Expressions: chaining data fields¶
An expression is a chain of tokens that tells Silex which data to pull and how to transform it.
The simplest expression: posts → first → title. That means:
- "posts" — get a list of posts from the API
- "first" — take the first post in that list
- "title" — extract the title field
Each token in the chain transforms the data. You can add filters like "upcase" to make text uppercase, or "where" to filter a list by a condition.
This becomes clearer when you work through the next few pages — for now, just know that expressions let you navigate the structure of your data.
States: reusable values on elements¶
A state is a named expression attached to an element. Once you create a state on one element (e.g., "Post title"), other elements can reference it. See States to create one.
Live preview on canvas¶
When you bind data to an element in Silex, the preview updates in real-time. You see the actual content from your GraphQL API rendered on the canvas — not a placeholder or mockup.
If your WordPress API returns 5 blog posts, and you set up a "loop" (a repeating element), you'll see all 5 posts displayed right there while you design. This is why CMS integration in Silex is so powerful: you design with real data, not dummy text.
The preview pulls live data from your API each time you edit, so you're always seeing what your site will actually look like.
Common mistakes¶
- Assuming you need to understand GraphQL. You don't — Silex handles the GraphQL queries for you. Just think of it as "connect to my database."
- Using the wrong API endpoint. Your WordPress admin URL is not the API endpoint. In GraphQL > Settings, copy the address shown under the GraphQL Endpoint field.
- Forgetting to install WPGraphQL on WordPress. Without it, your WordPress site has no GraphQL API. The setup guide covers this.
- Thinking the preview is a mockup. It's real data. If it shows wrong content, your API or expression is wrong — not your design.
Learn more¶
- Expressions — how tokens work and how to chain them
- WordPress setup — installing WPGraphQL
- Connecting a data source — adding your API to Silex
- Binding data — creating states and binding them to elements
- Publishing — how data is baked into your static site when you publish
Quiz¶
Q1: Your WordPress site has a GraphQL API. Where do you find the endpoint URL?
- A) The WordPress admin dashboard URL (e.g.,
https://yoursite.com/wp-admin) - B) In the WordPress admin, in GraphQL > Settings, the address shown under the GraphQL Endpoint field
- C) It's randomly generated and Silex will find it automatically
Answer
B) In GraphQL > Settings, the address shown under the GraphQL Endpoint field: the field only holds the path (graphql), WPGraphQL shows the full address of your API under it. Copy it and paste it in Silex. The admin dashboard is for managing WordPress, not for accessing APIs.
Q2: You're looking at your element on the canvas and it shows real data from your WordPress API. What is that?
- A) A mockup or placeholder to show you how the layout works
- B) A preview of the live data from your GraphQL API
- C) Final output that doesn't change when you publish
Answer
B) A preview of the live data from your GraphQL API — When you bind data and enable the preview, Silex fetches real content from your API and displays it on the canvas. It's not a mockup; it's the actual data that will appear on your site.
Q3: You add a data source to Silex and select "WordPress" as the backend type. What does this do?
- A) Installs WordPress on your server
- B) Helps Silex understand the structure of WordPress data and gives you smart defaults
- C) Requires you to manually write GraphQL queries
Answer
B) Helps Silex understand the structure of WordPress data and gives you smart defaults — Selecting a backend type lets Silex tailor the experience to that platform. It doesn't install anything or require manual queries; it just optimizes the editor for that data structure.