Silex CMS uses Liquid filters and Eleventy filters to manipulate data in a no-code way. Filters are applied to tokens (building blocks of expressions), such as GraphQL data, custom states, or pagination objects. Users can add filters through an intuitive UI and configure their options by clicking the “...” icon.
For more information:
Expressions in Silex CMS are made of tokens and filters, assembled in a no-code fashion. You can:
For detailed examples, see the Silex CMS documentation.
Filters from @silexlabs/grapesjs-data-source are sourced from the GrapesJS plugin and are available in the grapesjs-data-source repository.
Filters from @silexlabs/silex-cms are added by the Silex CMS plugin, available in the silex-cms repository. They require that you install 11ty plugins
strip_htmlRemoves HTML tags from a string.
string containing HTML.string.<h1>Title</h1>TitleappendAppends a string to the input.
string.value (the suffix to append).string.Hello{ value: ' World' }Hello WorldprependPrepends a string to the input.
string.value (the prefix to prepend).string.World{ value: 'Hello ' }Hello WorldwhereFilters an array of objects by a key-value pair.
key (the object key to filter on), value (the value to match).[ { id: 1 }, { id: 2 } ]{ key: 'id', value: 1 }[ { id: 1 } ]findFinds the first object in an array that matches a key-value pair.
key (the object key to filter on), value (the value to match).[ { id: 1 }, { id: 2 } ]{ key: 'id', value: 2 }{ id: 2 }firstGets the first item in an array.
[1, 2, 3]1lastGets the last item in an array.
[1, 2, 3]3joinJoins an array of strings with a separator.
separator (default: ,).['a', 'b', 'c']{ separator: '-' }a-b-csplitSplits a string into an array using a separator.
string.separator (default: ,).a,b,c{ separator: ',' }[ 'a', 'b', 'c' ]mapMaps an array of objects to a specific key.
key (the key to map).[ { id: 1 }, { id: 2 } ]{ key: 'id' }[ 1, 2 ]reverseReverses the order of an array.
[1, 2, 3][3, 2, 1]logLogs the input to the console.
HelloHelloHelloslugifyConverts a string to a URL-friendly slug.
string.string.Hello Worldhello-worldimageGenerates an HTML <img> tag for a given image URL.
alt (alt text), sizes (image sizes), widths (image widths).<img> tag as a string.photo.jpg{ alt: 'Photo', sizes: '100vw' }<img src="photo.jpg" alt="Photo" sizes="100vw" />locale_urlGenerates a localized URL.
string (URL).locale (language locale)./about{ locale: 'fr' }/fr/aboutlocale_linksGenerates links for all available locales.
string (URL)./about[
{ "url": "/about", "lang": "en", "label": "English" },
{ "url": "/fr/about", "lang": "fr", "label": "Français" }
]