WeWeb Dynamic Pages: URL Parameters, Routing, and CMS Content

In the left panel, click the Pages icon → click + New page. Give the page a name like 'Product Detail'. In the Page settings panel (right sidebar) → URL path field, type the path with a parameter segment: /products/:id. The colon prefix marks 'id' as a dynamic segment — WeWeb will extract whatever appears in that URL position as the value of the path parameter 'id'. Save the page. Now WeWeb automatically creates a Path variable in the page's Data panel named 'id' (matching the parameter name you used). If you named it ':slug', the variable would be named 'slug'. You can name the parameter anything — just be consistent. Check Data panel → Variables → path parameters section to confirm the variable was created. This variable's value is automatically set to whatever appears in the URL when the page loads.

With your dynamic page open, go to the Data panel → Collections → + New collection → select your data source (e.g., Supabase). Configure the collection to fetch a single record matching the URL parameter. For Supabase: select your table (e.g., 'products'), then in the collection configuration set a filter: id equals [plug icon] → select path variables → id. This tells WeWeb to fetch only the product whose id matches the URL parameter. Name this collection 'currentProduct'. Under Fetch mode, select 'Fetched on page load' so data is available immediately. In the Filters section of the collection, check 'Ignore if empty' — this prevents the collection from running before the path variable resolves. After saving, the collection exposes: currentProduct.data (array with the matched record), currentProduct.isFetching (loading boolean), and currentProduct.isFetched. Since you filtered for a single record, the data array will have one item: currentProduct.data[0].

Dynamic pages need to handle three states: loading (collection is fetching), data found (collection returned a record), and not found (no record matched). First, add a loading skeleton: drag a Skeleton Loader element onto the canvas. Select it → Settings → Conditional Rendering → bind to: currentProduct.isFetching. This shows the skeleton while data loads. Second, add a 'not found' section: create a Container with a '404 - Product not found' message. Bind its Conditional Rendering to: `currentProduct.isFetched && currentProduct.data.length === 0`. This appears only after the collection has finished fetching and returned empty results. Third, wrap all your main page content in a Container and bind its Conditional Rendering to: `currentProduct.isFetched && currentProduct.data.length > 0`. This ensures the real content only renders when data is available. This three-state approach prevents blank screens and confusing flashes of content.

With your content Container visible and the collection returning data, bind each page element to the corresponding field from currentProduct.data[0]. Select a heading element → click the plug icon (🔌) next to the text property in the Settings panel → formula editor opens → type: currentProduct.data[0].name (replace 'name' with your actual field name). Repeat for description, price, image, and any other fields. For the product image: select an Image element → plug icon next to the Source property → currentProduct.data[0].image_url. For a price formatted with currency: `'$' + currentProduct.data[0].price.toFixed(2)`. For a rich text field: use the Rich Text element and bind its content property to currentProduct.data[0].description. For dates: use the date formula functions to format `currentProduct.data[0].created_at`. Every element on the page can be bound this way — buttons, tags, status indicators — using formulas that reference the fetched record.

1// Injection point: binding formula in WeWeb formula editor
2// Access nested object fields:
3currentProduct.data[0].attributes.color
4
5// Conditional value with fallback:
6currentProduct.data[0].sale_price || currentProduct.data[0].price
7
8// Format date:
9format(parseISO(currentProduct.data[0].created_at), 'MMMM d, yyyy')
10
11// Concatenate fields:
12currentProduct.data[0].first_name + ' ' + currentProduct.data[0].last_name
13
14// Check boolean field:
15currentProduct.data[0].in_stock ? 'In Stock' : 'Out of Stock'
16
17// Array field rendered as comma-separated string:
18currentProduct.data[0].tags.join(', ')

Dynamic pages are only useful when something links to them. On your list page (e.g., /products), create a collection that fetches all products. In a Flexbox Container, bind the Repeat items property to your products collection's data array. Inside the repeated container, add a button or text link. Add a workflow to it: On click → Navigate → Dynamic page → select 'Product Detail' → in the path parameter mapping, bind 'id' to `item.id` (the current repeated item's ID). This generates the correct URL for each product. Alternatively, if you want the entire card to be clickable rather than just a button, add the workflow to the outer repeated container. Now when users click a product card, they navigate to /products/42 (or whatever that product's ID is), and the dynamic page loads the correct record.

In addition to path parameters (/products/:id), WeWeb supports Query variables for URL query strings (e.g., /products?tab=reviews&sort=recent). Query variables are available automatically for any page — go to Data panel → Variables → scroll to the Query variables section. Any query string key becomes an accessible variable. For example, if the URL is /products/42?tab=reviews, you can access the tab variable in formulas. Use case: tab navigation where each tab changes the URL query string for shareability. Create a Tabs component → bind the active tab to a Query variable named 'tab'. Add a workflow: On tab change → Change Query variable 'tab' → to the selected tab name. Now the URL updates when tabs switch and refreshing the page restores the correct tab. For search pages: bind a collection filter to a Query variable 'q' and update it when the search input changes.

WeWeb generates a Vue.js SPA with no server-side rendering (SSR). This means dynamic pages (/products/42) serve the same empty HTML shell to every URL — the actual content is injected by JavaScript after page load. Search engine crawlers (Googlebot) can eventually index JS-rendered content, but with delays. Social media crawlers (Facebook, Twitter/X, LinkedIn) typically cannot render JavaScript and will not see dynamic meta tags for Open Graph sharing. To set per-page meta tags for dynamic pages: go to Page settings → SEO & Meta Tags → bind Title Tag to `currentProduct.data[0].name + ' | Your Store'` and bind Meta Description to `currentProduct.data[0].description.substring(0, 155)`. This works for Google (with delay) but not for social sharing. For social sharing and reliable SEO: consider using Prerender.io ($9–99/mo) to serve pre-rendered HTML to crawlers, or host dynamic content pages on a separate SSR platform (Next.js, Nuxt.js) while keeping your WeWeb app for authenticated sections.