The "Silex CMS" feature empowers designers and no-code developers to seamlessly integrate dynamic content into their websites using a variety of CMS or APIs. Ideal for creating data driven websites, Silex CMS emphasizes a community-driven approach, encouraging users to contribute and enhance its evolving ecosystem.
This page is a work in progress, help needed: add screenshots. Silex is free/libre software which means you need to contribute.
Developers: read more about the Silex CMS plugin
¶ Compatible Headless CMS
First let's see which CMS or API one can integrate with Silex. You can create one website with several of them, and with custom API you develop.
| CMS or API | Category | Website | Model | Docs | Maintainer |
|---|---|---|---|---|---|
| WordPress | Headless CMS | wordpress.org | Free/Libre. | WordPress integration guide | @lexoyo |
| Strapi | Headless CMS | strapi.io | Open Source with paid SaaS | feature request | ? |
| Squidex | Headless CMS | squidex.io | Open Source with paid SaaS + free plan | ? | @lexoyo |
| KeystoneJS | Headless CMS | keystonejs.com | Free/Libre, Open Source | ? | |
| Supabase | Database | supabase.com | Free/Libre, Open Source | ? | |
| GetCockpit | Headless CMS | getcockpit.com | Free/Libre, Open Source | ? | |
| Directus | Headless CMS | directus.io | Closed Source with paid SaaS + self hostable | ? | ? |
| Sanity | Headless CMS | sanity.io | Closed Source with Free Plan | feature request | @lexoyo |
| Saleor | E-commerce | saleor.io | Open Source + SaaS with free plan for tests only + free self hosting | ? | @lexoyo |
| Contentful | Headless CMS | contentful.com | Closed Source with paid SaaS | ? | |
| Prismic | Headless CMS | prismic.io | Closed Source with paid SaaS | ? | |
| Nhost | Headless CMS | nhost.io | Closed Source with Free Plan | ? | |
| Hashnode | Headless CMS | hashnode.com | Freemium | ? |
APIs that will not work properly
| CMS or API | Category | Website | Model | Docs | Tested by |
|---|---|---|---|---|---|
| Hygraph | Headless CMS | hygraph.com | Closed Source with Free Plan | ✗ | @lexoyo |
Help testing various CMS and API. Write your name in place of mine (@lexoyo) or in an empty spot and test the CMS/API every time there is a new Silex release. Or let's discuss this in the forums
Any third party software should be supported as long as they have a GraphQL API
For software with a REST API you can use make it GraphQL with GraphQL Mesh or Graphweaver
¶ Getting Started with Silex CMS
Here is a tutorial showing how to test Silex CMS and build a web page showing a list of countries
- Login to Silex editor
- Open an existing or create a new website
- Once you are in the editor, click on the settings (the wheel ⚙️ in the left side bar)
From there you can edit the CMS settings to configure a new data source (a CMS or API or Database). For testing purposes let's create a data source with these info:
- Name: Countries API
- URL: https://countries.trevorblades.com/graphql
- Method: POST
Cool tip: 8 Free to Use GraphQL APIs for Your Projects and Demos
Now click apply to close the settings dialog and go back to the editor.
- add a text field on the canvas
- in the right side bar, open the properties of the text field by clicking on the wheel ⚙️
- in the text field properties, scroll to the bottom to find look for the "Loop" property, click "expression" then "+" then "Continents"
- then in the property "inner HTML" select "expression" then "+" then "Loop data" then "name"
Development Warning: The GitLab Pages integration, which facilitates publishing websites and building with 11ty, is currently under development and is expected to be available in June 2024. For those interested in supporting this feature and receiving updates, please visit our feature roadmap and subscribe to our newsletter for the latest information.
Now click publish from the top horizontal bar and wait for the site to be built on gitlab. Then open your website and you will see a list of continent names. Here is the page about publishing
¶ Termsefinitions
¶ Expressions
Expressions are made of tokens, which are the building blocks of the expressions. Tokens are the properties of the data source, like post.data.attributes.title or post.data.attributes.content.
Expressions are created with clicks in a no-code style. They can consist of:
- Custom states that you define
- Data from the GraphQL API
- The
paginationobject of 11ty for pagination in collection pages. Check 11ty's docs about available data here - Liquid filters for data manipulation, check liquid filters in liquidjs documentation
Liquid filters may have options that you can edit with the "..." icon, and they may let you select custom states in them like this:
Click on the "..." to edit filter options:
¶ States
States belong to a component, they are expressions which are not output in the final website, they are made to be included in other expressions. Also they are used in the generated GraphQL query.
¶ Attributes
Attributes are the HTML attributes of a component, like src or href or any other attribute. Special attributes are class and style which if you put several of them will not override each other but will be merged.
¶ Properties
Properties are the dynamic properties of a component which include the HTML content (innerHTML), the visibility (a condition to show or hide the component), a loop property (to repeat the component for each item in a list).
¶ Data source
Data source is a service which provides the data to the editor. For now it has to be a GraphQL API, maybe I'll add open API later.
¶ Included UI elements
¶ Expressions UI
This UI is used to manage the states, attributes and dynamic properties of the components. It is a panel which shows the expressions of the selected component and allows the user to add, edit, and remove them.
¶ Settings dialog
This dialog is used to manage the data sources. It allows the user to add, edit, and remove data sources. It also allows the user to test the data sources and (comming in v2) see the data they provide.
¶ Element properties
Change properties like innerHTML, title, className, style, src, href, and alt using expressions.
¶ Making Collection Pages
- In the page settings, edit the "pagination data" expression for defining how data is paginated. Check 11ty's docs about pagination here
- Set the pagination size and permalink, e.g. size =>
1and permalink =>/{{ pagination.items[0].name | slugify }}/ - Collection pages will be duplicated for each element in the pagination data.
- Publish your website and build it with 11ty
¶ Publishing and building
- Publish: Publish your website with the publish button on the top right of Silex UI. It will generate 11ty pages with your design and 11ty data files.
- Build: Add the published files to an 11ty website and build it with 11ty CLI to generate a static webiste (with only CSS and HTML files)
¶ Liquid code (optional low code feature)
You can use liquid to output dynamic data from a data source
- in the head editor
- in custom code blocks
¶ Step 1: write the code
Add a custom code block to your website, or open the page settings or the website settings (code tab)
Type your liquid code, e.g
<p>
{%- assign firstItem = directus.my_collection | first -%}
{{ firstItem.title }}
</p>
Here is what you can use:
- Data from your data sources, scoped with the data source ID (directus.my_collection)
- 11ty supplied data
- Liquid filters
¶ Step 2: let Silex know what you need
In order to query the data you need from your data sources, Silex needs to know what you need. For each data you use - e.g directus.my_collection and then .title, you will need a custom state (on the body or anywhere) with a value which uses the data, e.g directus.my_collection > first > title