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
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 | Supported | Tester |
---|---|---|---|---|---|
KeystoneJS | Headless CMS | keystonejs.com | Free/Libre, Open Source | ✓ | @lexoyo |
Strapi | Headless CMS | strapi.io | Open Source with paid SaaS | ✓ | @lexoyo |
Directus | Headless CMS | directus.io | Mostly Open Source with paid SaaS | ✓ | @lexoyo |
Sanity | Headless CMS | sanity.io | Closed Source with Free Plan | ✓ | @lexoyo |
Hygraph | Headless CMS | hygraph.com | Closed Source with Free Plan | ✓ | @lexoyo |
Saleor | E-commerce | saleor.io | Open source + SaaS with free plan for tests only + free self hosting | ✓ | @lexoyo |
WordPress | Headless CMS | wordpress.org | WordPress itself is free and open source. To make it work with Silex CMS you will need to install the WPGraphQL WordPress plugin (open source) and to make it more powerful ACL / Advanced Custom Fields (freemium) + WPGraphQL for ACL (open source). | Coming soon (here is the feature request) | @lexoyo |
Contentful | Headless CMS | contentful.com | |||
Prismic | Headless CMS | prismic.io | |||
GetCockpit | Headless CMS | getcockpit.com | |||
Supabase | Database | supabase.com | |||
Squidex | Headless CMS | squidex.io | Open Source with paid SaaS + free plan | ||
Nhost | Headless CMS | nhost.io | |||
Hashnode | Headless CMS | hashnode.com | freemium |
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
Here is how to easily test Silex CMS
From there you can use 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:
Cool tip: 8 Free to Use GraphQL APIs for Your Projects and Demos
Now click apply to go back to the editor.
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 you can publish and after the site is built on gitlab you will see a list of continent names
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:
pagination
object of 11ty for pagination in collection pages. Check 11ty's docs about available data hereNote: 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 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 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 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 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.
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.
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.
Change properties like innerHTML, title, className, style, src, href, and alt using expressions.
1
and permalink => /{{ pagination.items[0].name | slugify }}/
You can use liquid to output dynamic data from a data source
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:
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