Frequently asked questions

Yes, JavaScript libraries like Swiper.js and Lenis are safe to use long-term. As long as you include a specific version in the URL (not 'latest'), the library won't break on its own. The code will continue working even years later unless you manually update the version. Browser updates breaking existing functionality is extremely rare (0.0000001% chance). Just avoid using 'latest' versions that auto-update, as those could potentially break.

Currently, there's no built-in multi-step form component, but you can build one using JavaScript and Webstudio's components. For conditionals, you'll need custom JavaScript. The team is planning to add a component editor soon which will enable creating reusable UI elements like multi-step forms. For now, you can embed external widgets like Typeform or use third-party JavaScript libraries.

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, 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.

Currently, custom elements are only supported in the HTML Embed component, which doesn't support Tailwind CSS. However, the Webstudio team has planned support for custom elements when pasting HTML with Tailwind CSS. This will enable the use of vanilla JavaScript UI libraries inside Webstudio with full Tailwind styling support.

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.

You can add custom JavaScript by using the HTML Embed component. Simply add an HTML Embed element to your page and include your JavaScript code within <script> tags. This allows you to implement custom functionality like form handling, animations, or API interactions that aren't built into Webstudio's visual editor.

For directory websites with dynamic URLs and filtering:

1. Use Webstudio's data variables feature for dynamic content
2. Check the YouTube videos about filters with Baserow as CMS
3. For filtering similar to Finsweet Attributes, you can implement JavaScript-based filtering through HTML Embed
4. Dynamic URLs can be generated using collection pages with URL parameters

This approach provides good SEO benefits for localized content.

For multilingual websites, avoid using show/hide with CSS classes as it loads all languages at once (slower page loads, bigger DOM) and SEO won't index hidden content properly. Instead, pull language content from separate JSON files or a CMS that supports i18n, then swap content dynamically with JavaScript based on user's language choice or browser settings. Don't forget about text direction (LTR/RTL) for non-Latin scripts, and include the lang tag for accessibility so content is read aloud in the correct language.

For masonry layouts in Webstudio, you have several options:

1. Use CSS Grid and manually define grid-row on each item
2. Use JavaScript libraries like Masonry.js (though this may affect Lighthouse scores and cause page jumps)
3. Wait for native CSS masonry layout support which is in discussion

For now, CSS Grid with manual row positioning is the recommended approach for performance.

When working with CMS data that isn't in slug format, you can use JavaScript in an HTML Embed to format the links. Create click event handlers that process the text (convert 'Door Hardware' to 'door-hardware'), then navigate to the formatted URL. Remember to use event.preventDefault() to stop the original link behavior before applying your custom navigation logic.

When a Radix Sheet component doesn't close automatically after clicking a link that redirects to a different section on the same page, this typically requires custom JavaScript to handle the sheet closing behavior. The Radix Sheet component doesn't automatically close for same-page anchor links, so you'll need to add JavaScript to detect the navigation and trigger the sheet close event manually.

For forms that need to both submit data and perform actions (like scrolling or redirecting), you have several options:

1. Use Webstudio's built-in webhook forms for data submission
2. Combine with custom JavaScript in HTML Embed for additional actions
3. Set up proper redirect URLs in your form settings
4. For complex workflows, consider using external automation tools like n8n or Make.com to handle form processing and subsequent actions

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.

To scroll to the top when a button is clicked, you have two options:

1. Use a link with href pointing to the top of the page (like href='#top' and add an element with id='top' at the top)
2. Use custom JavaScript in an HTML Embed to handle both form submission and scrolling

For smooth scrolling, you can also add CSS property 'scroll-behavior: smooth' to your page.

For multilingual websites, avoid using CSS show/hide classes as it loads all languages at once (slower, bad for SEO). Better approaches:

1. Pull content from separate JSON files or a CMS with i18n support
2. Swap content dynamically with JavaScript based on user's language choice or browser settings
3. Use separate URLs for different languages
4. Consider text direction (LTR/RTL) for non-Latin scripts
5. Include proper lang tags for accessibility so screen readers can read content in the correct language

For reliable carousels and sliders in Webstudio:

1. Use established libraries like Swiper.js - they're stable and well-maintained
2. Always include a specific version in your script URL, not 'latest' to prevent automatic updates that could break functionality
3. Avoid libraries that haven't been maintained recently (like Splide.js)
4. For simple needs, vanilla HTML/CSS carousels work but may need cross-browser testing
5. Consider paid solutions for complex needs, but free libraries like Swiper.js are typically sufficient for most use cases

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.