Frequently asked questions

Currently, Webstudio expressions support JavaScript ternary operators but not custom JavaScript functions with parameters. For complex logic like processing query strings for Google Ads landing pages, you would need to use HTML Embed components to implement custom JavaScript functions. This limitation means complex conditional logic beyond simple ternary operations requires custom code implementation.

Currently, you cannot directly use .env variables from exported apps as resource variables in the Webstudio builder. The builder and exported app environments are separate. However, this type of functionality for handling different environments (development, staging, production) with different API endpoints is being considered for future development.

Currently, Webstudio doesn't support expression editors for variables due to implementation complexity. You can only create variables using values from other variables in the resource URL context. For string manipulation and complex variable operations, you'll need to use custom JavaScript in HTML Embed components or handle the logic in your backend/CMS before sending data to Webstudio. Template literals in URLs might solve some use cases for assembling queries with variables.

To hide the current blog post from a collection of related posts, use the Show toggle with a binding condition. The expression should be: system.params.slug == Collection Item.data.slug ? false : true. This compares the current page slug with each collection item's slug - if they match, it hides the item (false), otherwise shows it (true). Apply this condition to individual collection items, not the entire collection.

Currently, to update an image used on multiple pages, you need to upload a new image, manually update all pages that use it, and delete the old image. For reusing elements/layout on different pages, you can use Slots. For single pieces of data like image URLs, you can use Data Variables. A feature for automatic image replacement across all instances (GitHub issue 3268) is planned for the future.

Server-side variables (like $origin) can only be accessed server-side. To use them in client-side JavaScript, inject them using the expression editor available directly in the HTML Embed code box. Use the expression editor to bind server-side variables to your JavaScript code, making them available on the client side.

Currently, Webstudio doesn't support an expression editor for variables due to implementation complexity. You can only create variables using values from other variables in the resource URL context. For string manipulation and complex variable operations, you'll need to use custom JavaScript in HTML Embed components or handle the logic in your backend/CMS before sending data to Webstudio.

Currently, Webstudio doesn't support adding multiple CSS classes like '.my_content.active' directly through the visual editor. For complex state management with multiple styles, use HTML Embed with custom CSS. Alternatively, use CSS variables set via JavaScript for simpler changes. Future updates will include CSS conditionals and container queries for cleaner state management.

To format DateTime strings (like ISO 8601 format from Hashnode or other CMS), use Webstudio's Time component. Simply bind the datetime string from your CMS to the Time component's data field, and it will automatically format the date according to the component's settings. This works with various datetime formats including '2025-08-06T22:26:05.044Z' format.

For date formatting, use the dedicated 'Time' component from the components panel, not the time HTML tag applied to text elements. The Time component has built-in date/time format options and can handle various date inputs from CMS or static values. The time tag on regular elements doesn't include formatting options.

To inject dynamic values into HTML Embed components, use the expression editor in the HTML Embed. Server-side variables like system.origin are only available server-side, so you need to inject them using the expression editor rather than accessing them directly in client-side JavaScript. Look for the expression editor button in the HTML Embed code box.

Server-side variables like 'origin' are only available server-side and cannot be accessed directly in client-side JavaScript. To use them, you need to inject them using the expression editor in the HTML Embed code box. Look for the expression editor button (visible in the code input area) to properly inject server-side variables into your client-side code. This allows you to access server-side data in your custom JavaScript.

For DateTime objects from CMS (like Hashnode's ISO 8601 format '2025-08-06T22:26:05.044Z'), use Webstudio's Time component (not Date component). Simply bind your DateTime string from the CMS to the Time component's data field. The Time component will automatically parse and format the DateTime string according to your specified format settings.

For Sanity CMS dynamic pages:

1. Create a general resource for all posts using the URL field (not expression editor): https://YOUR-PROJECT.api.sanity.io/v1/data/query/production?query=*[_type == "post"]{..., person->, mainImage{asset->{url}}},
2. Create a single post resource using the expression editor: https://YOUR-PROJECT.api.sanity.io/v1/data/query/production?query=*[slug.current=="${system.params.slug}"][0]{..., person->, mainImage{asset->{url}}}. Use system.params.slug for URL parameters. Avoid multiple queries in GROQ within the URL as Webstudio may have issues with them.

Use the Time component from the component library instead of adding a time tag to an element. The Time component has built-in date format options that aren't available when you manually add a time tag to other elements. The Time component provides proper formatting controls for displaying dates and times from your CMS or data sources.

Planned features (issue 4249): style conditions, variants, container queries. Instead of stacking classes (e.g. .card.active.dark) you define variants + a single controlling variable. This reduces specificity conflicts and simplifies dynamic styling.

Global variables allow you to reuse data like email addresses, phone numbers, and API endpoints across multiple pages and components without duplicating them. This feature significantly improves CMS workflows by making it much easier to get started with a CMS and maintain projects. Instead of hardcoding values, you can define them once as global variables and reference them throughout your project, making updates and maintenance much simpler.

Context by Onx is a Chrome extension utility that improves your Webstudio experience by organizing contextual variables in a clearer, more accessible interface. It helps group related variables for better structure, provides quick access to edit contextual variables, improves project navigation efficiency, and reduces guesswork. It's designed specifically for Craft-based projects and works with the Onx Library to provide a cleaner, more intuitive workflow for developers and designers.

For adding custom code like Google Tags via CMS, you have two approaches: 1) Fetch the complete code via API and place it in an HTML Embed element, or 2) Store only the tracking ID in your CMS and use that as part of a script template in Webstudio. The second approach is often cleaner as it separates data from code and makes tracking IDs easier to manage across different environments.

CSS conditionals (new CSS spec) and container queries are cleaner approaches than traditional classes for state management. Instead of using '.my_content.active' class combinations, you can define variants upfront in the style panel and switch between them using a single CSS variable. This approach is tracked in GitHub issue 4249 and will be much cleaner than the current class-based method.

Actions and triggers (similar to Wized's functionality) are on Webstudio's roadmap for future development. The team is aware of the need for custom logic, API chaining, and variable updates triggered by user interactions. This functionality will likely be developed as part of building more complex applications and e-commerce integrations. For now, you can achieve similar results using custom JavaScript in HTML Embed components.

Yes, Webstudio will add the ability to set dynamic HTML attributes using CMS data in the future. Currently, you can work around this limitation by using HTML Embed components to add dynamic values from your data sources. This feature is on the roadmap for enhancing dynamic content capabilities.

Yes, style conditions and variants are planned (GitHub issue 4249) as a modern replacement for CSS classes. This would allow defining variants upfront in the style panel and switching between them using a single CSS variable, providing a cleaner approach than traditional class-based styling for state management.