Silex vs Webstudio, side by side: building the same CMS page in both

We built the same page in Silex and in Webstudio, on the same day: a grid of characters from the public Rick and Morty GraphQL API, each card with an image, a name, a species and a link. This is not a tutorial. It is what we saw along the way, step by step, with screenshots of both tools side by side.

Watch the demo

The whole build, Silex then Webstudio, in under seven minutes (no sound, English and French subtitles, chapters for each step).

You do not even need an account to start with Silex: Silex Desktop runs on your computer and keeps your sites in local folders. An account only comes in when you want to put the site online.

1. Connecting the data

Both tools reach modern headless CMSs. Silex speaks GraphQL (a REST API plugs in through a GraphQL layer), Webstudio accepts REST and GraphQL. In Silex, you paste the API URL and the editor reads the schema on its own: it found 17 types in the Rick and Morty API, and from there every field is offered in menus. There is no query to write, and you can untick the types you do not want to see. Presets exist for WordPress, GitLab, Strapi and Supabase (in beta). In Webstudio, you create a Resource variable and write the GraphQL query by hand, then check the JSON preview on the right to see what came back.

2. Seeing real data while you design

This one is a tie. Once the data source is connected, both editors fill the canvas with real data from the API while you work, so you design on actual content instead of placeholder text. Binding the name to a text element is a couple of clicks in Silex and a short expression (collectionItem.name) in Webstudio.

3. Composing values: alt text and permalinks

Real pages need composed values, not just raw fields. We built an alt text made of the name and the species. In Silex, you pick the loop item, then the name field, then add two append filters (one for ", ", one for the species) from menus. These are Liquid filters, but you never type Liquid. Webstudio uses a subset of JavaScript, here a template literal: `${collectionItem.name}, ${collectionItem.species}`. Both give the same result: "Rick Sanchez, Human".

For the link to each character page, Silex chains the slugify filter and a prepend, which gives /character/rick-sanchez. In Webstudio we wrote toLowerCase().replace(" ", "-"). It works for names with a single space, but replace only replaces the first one, the editor refused replaceAll, and we did not find a slug helper in the editor. So "Abadango Cluster Princess" becomes abadango-cluster princess, with a space left in the URL.

4. What it costs

On Webstudio Cloud's free plan, Resources, GraphQL, dynamic routes and CMS pages are marked "staging only": you can build and preview them, but not put them in production. The editor shows a "Pro" badge next to Resource and GraphQL. Running a CMS-connected site on your own domain requires the Pro plan, at 15 USD per month billed yearly, which includes 100,000 page views per month, then 20 USD per extra 100,000. If you self-host Webstudio, its FAQ states that CMS integrations are free. Silex has no paid plan. Every feature, CMS included, is free for everyone.

5. Publishing

Silex publishes to GitLab Pages, FTP, Framagit or a zip file. At publication, an Eleventy build queries your API and writes plain HTML. We checked the published page: it contains no script and makes no call to the API, the alt texts and links are written into the HTML. Visitors never query your API. The other side of this: content is as fresh as the last publication, so you trigger a rebuild (usually with a webhook) when the content changes. Webstudio publishes to its own cloud, on a wstd.io subdomain in the free plan or on your domain with Pro, and can also build and download a static site, or deploy through its CLI to Docker, Vercel or Netlify.

In short

	Silex	Webstudio
Connecting the data	Schema read automatically, no query to write	GraphQL query written by hand (or REST call)
Composing values	Menus and Liquid filters, no code	JavaScript subset
CMS on your own domain	Free	Pro plan on Webstudio Cloud, free if self-hosted
Published site	Static HTML, no script, no API call	Hosted on Webstudio Cloud, or exported (static, Docker, Vercel, Netlify)
Model	Fully free software, non-profit	AGPL builder, open core, some proprietary parts

6. Free software vs open core

Both builders are released under the AGPL, and Webstudio is a good tool, carefully built. Its model is open core, as it openly states. The "Pro" locks we saw are not hidden: they are a configuration setting in the public AGPL code, which anyone who self-hosts can legally switch off. Some parts are not free software, though: the optional animation package is proprietary and ships under a separate EULA, as the project README states, the marketplace is not open source per its founder, and the team itself calls self-hosting the builder in production "currently not the recommended path". Webstudio, Inc. is also a venture-backed company: Dealroom lists a 1.2 million USD seed round in 2022, with Seedcamp among the investors. Silex is free software all the way down. It has been developed since 2009 by Silex Labs, a non-profit association, with no paid tier and no proprietary module. If that matters to you, try the editor, follow the getting started with a CMS guide, read the CMS docs, and come say hello in the community. To make up your own mind, Webstudio's documentation is a good read too.