Silex et Webstudio côte à côte : la même page CMS construite dans les deux

Nous avons construit la même page dans Silex et dans Webstudio, le même jour : une grille de personnages tirés de l'API GraphQL publique de Rick et Morty, chaque carte avec une image, un nom, une espèce et un lien. Ce n'est pas un tutoriel. C'est ce que nous avons constaté en chemin, étape par étape, avec des captures des deux outils côte à côte.

La démo en vidéo

Toute la construction, Silex puis Webstudio, en moins de sept minutes (sans son, sous-titres en français et en anglais, un chapitre par étape).

Avec Silex, il n'y a même pas besoin de compte pour commencer : Silex Desktop tourne sur votre ordinateur et garde vos sites dans des dossiers locaux. Le compte n'entre en jeu qu'au moment de mettre le site en ligne.

1. Brancher les données

Les deux outils savent parler aux CMS headless modernes. Silex parle GraphQL (une API REST se branche via une couche GraphQL), Webstudio accepte REST et GraphQL. Dans Silex, on colle l'URL de l'API et l'éditeur lit le schéma tout seul : il a trouvé 17 types dans l'API Rick et Morty, et à partir de là chaque champ est proposé dans des menus. Aucune requête à écrire, et on peut décocher les types qu'on ne veut pas voir. Des préréglages existent pour WordPress, GitLab, Strapi et Supabase (en bêta). Dans Webstudio, on crée une variable Resource et on écrit la requête GraphQL à la main, puis on vérifie dans l'aperçu JSON à droite ce qui est revenu.

2. Voir les vraies données pendant qu'on conçoit

Sur ce point, égalité. Une fois la source de données branchée, les deux éditeurs remplissent le canevas avec les vraies données de l'API pendant qu'on travaille : on conçoit sur du contenu réel plutôt que sur du texte de remplissage. Lier le nom à un élément texte se fait en deux clics dans Silex et avec une courte expression (collectionItem.name) dans Webstudio.

3. Composer des valeurs : texte alternatif et permaliens

Une vraie page a besoin de valeurs composées, pas seulement de champs bruts. Nous avons construit un texte alt fait du nom et de l'espèce. Dans Silex, on choisit l'élément de la boucle, puis le champ name, puis on ajoute deux filtres append (l'un pour ", ", l'autre pour l'espèce) depuis les menus. Ce sont des filtres Liquid, mais on ne tape jamais de Liquid. Webstudio utilise un sous-ensemble de JavaScript, ici un template literal : `${collectionItem.name}, ${collectionItem.species}`. Les deux donnent le même résultat : « Rick Sanchez, Human ».

Pour le lien vers la page de chaque personnage, Silex enchaîne le filtre slugify et un prepend, ce qui donne /character/rick-sanchez. Dans Webstudio, nous avons écrit toLowerCase().replace(" ", "-"). Ça marche pour les noms qui n'ont qu'une espace, mais replace ne remplace que la première, l'éditeur a refusé replaceAll, et nous n'avons pas trouvé de fonction de slug dans l'éditeur. Résultat : "Abadango Cluster Princess" devient abadango-cluster princess, avec une espace qui reste dans l'URL.

4. Ce que ça coûte

Sur l'offre gratuite de Webstudio Cloud, Resources, GraphQL, les routes dynamiques et les pages CMS sont marqués « staging only » (préproduction uniquement) : on peut les construire et les prévisualiser, mais pas les mettre en production. L'éditeur affiche un badge « Pro » à côté de Resource et de GraphQL. Faire tourner un site connecté à un CMS sur votre propre domaine demande l'offre Pro, à 15 USD par mois, facturés à l'année, qui inclut 100 000 pages vues par mois, puis 20 USD par tranche de 100 000 supplémentaires. Si vous auto-hébergez Webstudio, sa FAQ indique que les intégrations CMS sont gratuites. Silex n'a pas d'offre payante. Toutes les fonctionnalités, CMS compris, sont gratuites pour tout le monde.

5. Publier

Silex publie sur GitLab Pages, en FTP, sur Framagit ou dans un fichier zip. À la publication, un build Eleventy interroge votre API et écrit du HTML simple. Nous avons vérifié la page publiée : elle ne contient aucun script et ne fait aucun appel à l'API, les textes alternatifs et les liens sont écrits dans le HTML. Les personnes qui visitent le site n'interrogent jamais votre API. Le revers : le contenu est aussi frais que la dernière publication, il faut donc relancer un build (en général avec un webhook) quand le contenu change. Webstudio publie sur son propre cloud, sur un sous-domaine wstd.io avec l'offre gratuite ou sur votre domaine avec Pro, et peut aussi construire et télécharger un site statique, ou déployer via sa CLI vers Docker, Vercel ou Netlify.

En bref

	Silex	Webstudio
Brancher les données	Schéma lu automatiquement, aucune requête à écrire	Requête GraphQL écrite à la main (ou appel REST)
Composer des valeurs	Menus et filtres Liquid, sans code	Sous-ensemble de JavaScript
CMS sur votre propre domaine	Gratuit	Offre Pro sur Webstudio Cloud, gratuit en auto-hébergement
Site publié	HTML statique, aucun script, aucun appel API	Hébergé sur Webstudio Cloud, ou exporté (statique, Docker, Vercel, Netlify)
Modèle	Entièrement logiciel libre, association à but non lucratif	Éditeur sous AGPL, open core, certaines parties propriétaires

6. Logiciel libre ou open core

Les deux éditeurs sont publiés sous AGPL, et Webstudio est un bon outil, construit avec soin. Son modèle est l'open core, il l'assume ouvertement. Les verrous « Pro » que nous avons vus ne reposent pas sur du code fermé : c'est un réglage de configuration dans le code AGPL public, que toute personne qui auto-héberge peut légalement désactiver. Certaines parties ne sont pas du logiciel libre, en revanche : le paquet d'animation optionnel est propriétaire et distribué sous un CLUF séparé, comme l'indique le README du projet, la place de marché n'est pas open source selon son fondateur, et l'équipe elle-même qualifie l'auto-hébergement de l'éditeur en production de « currently not the recommended path » (pour l'instant déconseillé). Webstudio, Inc. est aussi une entreprise financée par du capital-risque : Dealroom recense une levée d'amorçage de 1,2 million de dollars en 2022, avec notamment Seedcamp parmi les investisseurs. Silex est du logiciel libre de bout en bout. Il est développé depuis 2009 par Silex Labs, une association à but non lucratif, sans offre payante ni module propriétaire. Si ça compte pour vous, essayez l'éditeur, suivez le guide premiers pas avec un CMS, lisez la documentation CMS, et venez dire bonjour dans la communauté. Pour vous faire votre propre avis, la documentation de Webstudio vaut aussi la lecture.