How to Connect WeWeb to a Headless CMS (Strapi, Contentful, Sanity)

In your WeWeb editor, open the left sidebar and click the plug icon to open the Plugins panel. Under the 'Data sources' section click 'REST API' and then click 'Add'. The REST API plugin requires no additional configuration at the plugin level — it just enables the REST API collection type. Once added you will see 'REST API' listed under your data sources. If you plan to use a GraphQL-native CMS like Sanity with GROQ, install the 'GraphQL' plugin instead in the same panel.

Open the Data panel (database icon in the left sidebar). Click '+ New' to add a collection. Select 'REST API' as the source. A configuration panel opens — this is where you specify the CMS endpoint. For Strapi: set Method to GET, URL to `https://your-strapi-url/api/articles` (replace 'articles' with your content type), add an Authorization header with value `Bearer YOUR_STRAPI_TOKEN`, and set the Result key to `data` (Strapi wraps results in a data array). For Contentful: URL is `https://cdn.contentful.com/spaces/SPACE_ID/environments/master/entries?content_type=blogPost`, add header `Authorization: Bearer YOUR_DELIVERY_TOKEN`, Result key is `items`. For Sanity: URL is `https://PROJECT_ID.api.sanity.io/v2021-10-21/data/query/production?query=*[_type==%22post%22]`, and the Result key is `result`. Name your collection descriptively (e.g. 'cms-articles') and click Save.

1// Strapi REST API collection config (reference, not code)
2// Method: GET
3// URL: https://your-strapi-url/api/articles?populate=*
4// Headers:
5//   Authorization: Bearer YOUR_STRAPI_API_TOKEN
6// Result key: data
7
8// Contentful config
9// URL: https://cdn.contentful.com/spaces/SPACE_ID/environments/master/entries?content_type=blogPost
10// Headers:
11//   Authorization: Bearer YOUR_DELIVERY_TOKEN
12// Result key: items
13
14// Sanity GROQ config
15// URL: https://PROJECT_ID.api.sanity.io/v2021-10-21/data/query/production
16// Query param: query = *[_type == "post"]{_id, title, slug, body, mainImage}
17// Result key: result

Most headless CMSes support URL query parameters for pagination and filtering. In your collection config (Data panel → select your collection → Edit), add Query Parameters below the URL. For Strapi add `pagination[page]` and `pagination[pageSize]` to control how many items load. For Contentful add `limit` (max 1000) and `skip`. You can bind these values to WeWeb variables — open the formula editor by clicking the plug icon next to any parameter field, then reference a variable like `currentPage`. This lets you build paginated content lists. Also add `populate=*` for Strapi to include relationships like author and featured image in the response.

Add a Container element to your page canvas (click the + in the left panel → Layout → Container). With the container selected, go to the Settings panel (right sidebar, Settings tab). Find the 'Repeat items' property and click the plug icon next to it. In the formula editor, select your CMS collection: type the collection name (e.g. `cms-articles.data`). The container will now duplicate itself for each item in the array. Add a Text element inside the container. Select it, go to the Settings tab, find the Text property, click the plug icon, and reference `item.attributes.title` for Strapi or `item.fields.title` for Contentful. Add an Image element and bind its Src property to `item.attributes.featuredImage.data.attributes.url` (Strapi) or `'https:' + item.fields.thumbnail.fields.file.url` (Contentful — note the protocol prefix needed for Contentful URLs).

In the Pages panel (page icon in left sidebar), click '+ New page'. Name it 'Article' and set its path to `/articles/:slug`. The `:slug` part is a URL path parameter. Now create a second collection (Data panel → + New) for a single item. Configure it just like your list collection but add a filter: for Strapi, append `?filters[slug][$eq]={slug}` to the URL and bind `{slug}` to the URL parameter (`wwPage.params.slug` in the formula editor). For Contentful, add query param `fields.slug` bound to `wwPage.params.slug`. Name this collection 'cms-article-detail'. On the Article page, bind all element content to this single-item collection. Set the collection fetch mode to 'On page load' so it fires as soon as the user navigates to the page.

Headless CMS rich text fields return HTML strings (Contentful via contentful-rich-text renderer, Strapi as HTML). In WeWeb, do NOT bind rich text HTML to a standard Text element — it will display raw HTML tags. Instead, add a Rich Text element (click + in the left panel → Display → Rich Text). Select it, go to Settings, and bind the 'Content' property to the rich text field from your collection item. For Contentful, the rich text field is a JSON structure — you need to first convert it. In a Page workflow (trigger: On page load → action: Custom JavaScript), convert the Contentful rich text object to HTML using the `@contentful/rich-text-html-renderer` package (install via the NPM plugin), store the result in a page variable, and bind the Rich Text element to that variable.

Images from different CMSes come in different formats. Contentful image URLs start with `//` (no protocol) — prepend `https:` in a formula: `concat('https:', item.fields.image.fields.file.url)`. Sanity images use a CDN URL builder — the asset reference ID must be converted to a full URL using the pattern `https://cdn.sanity.io/images/PROJECT_ID/DATASET/IMAGE_ID-WxH.jpg`. For Strapi, if self-hosted, the image URL is relative (`/uploads/image.jpg`) — prepend your Strapi base URL. Set your list collection's fetch trigger to 'On page load' via the collection's Settings. For the detail collection, set it to 'On page load' as well but ensure the URL parameter is available first (it always will be on a page load). Verify everything works by navigating to a list page, clicking an item, and confirming the detail page loads the correct CMS entry.