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.
If you spot a mistake in this table please fix it or let me know 🙏
CMS or API | Category | Website | Model | Docs | Maintainer |
---|---|---|---|---|---|
WordPress | Headless CMS | wordpress.org | Free/Libre. To make it work with Silex CMS: WPGraphQL + ACL + WPGraphQL for ACL. | Coming soon (feature request) | @lexoyo |
Strapi | Headless CMS | strapi.io | Open Source with paid SaaS | Coming soon (feature request) | @lexoyo |
Squidex | Headless CMS | squidex.io | Open Source with paid SaaS + free plan | Coming soon | @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 | Coming soon | @lexoyo |
Sanity | Headless CMS | sanity.io | Closed Source with Free Plan | Coming soon (feature request) | @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 |
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 | ? |
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
Here is a tutorial showing how to test Silex CMS and build a web page showing a list of countries
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:
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.
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
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 hereLiquid 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