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.
At design-time, data flows like this: GraphQL API → expression engine → component states → live preview on canvas. You don't need to understand all the technical steps — just that when you add a data source, Silex fetches available data, you bind it to components, and you see the result immediately.
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. But Silex works with any GraphQL API: Strapi, Supabase, Directus, or any custom backend.
Compatible backends¶
Any API that exposes a GraphQL endpoint can work as a data source. These backends have been tested by the community:
| Backend | Type | Status |
|---|---|---|
| WordPress | Self-hosted CMS | Fully documented (see WordPress setup) |
| Strapi | Self-hosted headless CMS | Compatible |
| Directus | Self-hosted data platform | Compatible |
| Supabase | Hosted database + API | Compatible (see connecting a data source) |
| Squidex | Self-hosted headless CMS | Compatible |
| KeystoneJS | Node.js headless CMS | Compatible |
| GetCockpit | Self-hosted headless CMS | Compatible |
| Sanity | Hosted headless CMS | Compatible |
| Contentful | Hosted headless CMS | Compatible |
| Prismic | Hosted headless CMS | Compatible |
| Saleor | E-commerce GraphQL API | Compatible |
| Nhost | Open-source Firebase alternative | Compatible |
| Hashnode | Blog platform | Compatible (read-only GraphQL API) |
| Hygraph | Hosted headless CMS | Not compatible — known issues with GraphQL schema |
For backends not listed here, if the service provides a standard GraphQL endpoint, you can try connecting it. For REST-only APIs, use GraphQL Mesh to add a GraphQL layer.
When you add a data source in Silex, you provide the URL to the GraphQL endpoint — something like https://yoursite.com/graphql. 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 components¶
A state is a named expression attached to a component. Once you create a state on one component (e.g., "Post title"), other components can reference it.
States come in two flavors:
- Public states: visible to child components. Good for sharing data hierarchies.
- Private states: only for this component. Good for temporary logic like "innerHTML" (the HTML content of the element) or "condition" (whether to show/hide the element).
Live preview on canvas¶
When you bind data to a component 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 component), 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. The endpoint is usually
https://yoursite.com/graphql. - 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 Pods and WPGraphQL
- Connecting a data source — adding your API to Silex
- Binding data — creating states and binding them to components
- 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) The root URL of your WordPress install +
/graphql(e.g.,https://yoursite.com/graphql) - C) It's randomly generated and Silex will find it automatically
Answer
B) The root URL of your WordPress install + /graphql — The API endpoint is a specific URL, usually the site root followed by /graphql. The admin dashboard is for managing WordPress, not for accessing APIs.
Q2: You're looking at your component 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: Which of these is NOT a GraphQL backend that Silex can connect to?
- A) WordPress (with WPGraphQL)
- B) Strapi
- C) Shopify (without a GraphQL adapter)
Answer
C) Shopify (without a GraphQL adapter) — Silex supports WordPress, Strapi, Supabase, and generic GraphQL APIs. Shopify does have a GraphQL API, but it's not in the list of pre-configured backends; you'd need to set it up as generic or via a custom adapter.
Q4: 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.