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.

Yes, you can use external CSS Grid generators like cssgridgenerator.io to create grid layouts visually, then copy the generated CSS into Webstudio's Advanced panel. These tools provide visual interfaces for creating complex grid structures that you can then implement in Webstudio using CSS Grid properties.

Yes, you can add Spline or any other 3D animations to Webstudio using HTML Embed. Use the same technique as background videos: create a container with position relative, then an inner div with position absolute, all sides set to 0, and z-index -1. Inside that inner div, place your Spline animation HTML embed code. This creates a full-background 3D animation effect.

Multi-step forms can be built in Webstudio, but currently require some manual setup. You can use button navigation between form steps, though this isn't as seamless as Typeform-style automatic progression. The Webstudio team is planning to add a component editor soon which will enable creating customized, reusable UI elements like advanced multi-step forms. For now, you can also embed external widgets like Typeform or use third-party JavaScript libraries.

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's CLI export generates compiled output that isn't easily readable or editable due to lack of component separation. While you can export static sites and publish them outside of Webstudio Cloud, the code isn't optimized for manual editing. For AI-powered website generation and editing, Webstudio is developing a separate tool called Inception (webstudio.is/inception) for design exploration, while maintaining Webstudio as a precision tool for professional development.

When you export static code from Webstudio, direct edits to the HTML may not appear in the browser due to the /assets/entries scripts that handle the styling and functionality. If you need to convert to PHP or integrate with a CMS like Drupal, consider using Webstudio's Content Blocks for editable areas instead. For complex integrations, using the CMS as a headless solution (via API) with Webstudio is recommended rather than rewriting the exported HTML.

Yes, Webstudio supports CSS Grid. You can use external tools like CSS Grid Generator (cssgridgenerator.io) to create your grid layouts and then apply the generated CSS in Webstudio. The community often shares useful tools and resources for creating complex layouts.

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.

Webstudio webhook forms do not currently support file uploads. If you need file upload functionality, you can use a regular HTML form element (not webhook form) or create the entire form using HTML Embed. HTML forms with file inputs work fine when using POST method with multipart/form-data encoding to external services like n8n.

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.

If a custom script breaks your Webstudio canvas and makes it unresponsive, you can:

1. Navigate to a different page in your project and restore from a backup,
2. Access the project through the dashboard with a special button that opens the builder with a ?safeMode flag to disable all scripts,
3. Always test scripts on a single page first and keep regular backups. A safe mode feature for disabling canvas scripts is being considered for implementation.

Currently, Webstudio is primarily designed for receiving data rather than sending API requests directly from the frontend. For triggering actions like sending requests to third-party services (Postmark, etc.), you would need to implement custom JavaScript in an HTML Embed component or use a webhook form that connects to a backend service like n8n or Make.com to handle the API calls.

When working with n8n workflows and Webstudio webhook forms that include file uploads, ensure your n8n workflow can handle multipart/form-data requests. Test the webhook endpoint outside of Webstudio first to verify it processes files correctly. In Webstudio, set the form action to your n8n webhook URL and method to POST. For file inputs, make sure the form has enctype='multipart/form-data'. Consider implementing error handling in your n8n workflow to provide meaningful feedback to users. Also, be aware of file size limitations both in Webstudio and your n8n hosting environment.

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.

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 create a looping marquee effect in Webstudio, you can use Animation Groups or HTML Embed with CSS animations. For Animation Groups, add your scroll items and set the animation to loop continuously. If using HTML Embed, you can create custom CSS keyframe animations for smooth looping. Note that you cannot directly link to SVG icons from Webstudio's media manager in HTML embeds, so you'll need to use external URLs or embed the SVG code directly. Community members often share working examples of marquee implementations that you can reference.

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.

To create gradient text effects in Webstudio:

1. Select your text element (span or paragraph),
2. Set a background gradient on the element,
3. Add 'background-clip: text' CSS property,
4. Set the text color to transparent. Unlike visual gradient builders in other tools, you'll need to manually type gradient CSS values. External gradient generator tools can help create the CSS code you need.

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.

If your schema markup is appearing twice when published, this is usually caused by broken HTML in your HTML Embed component. Make sure your HTML syntax is correct and properly closed. You can validate your HTML structure before adding it to the embed. If issues persist, share your build link for debugging assistance.

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.

You have two approaches: 1) Wrapper approach: Wrap the entire card in a Link component (better semantics), or 2) Stretched link technique: Set the card to position: relative, add a link inside, then add an element inside that link with position: absolute and inset: 0. However, the stretched link approach can interfere with content editing access for clients. For clients using Content Editor, use a CSS solution that disables the overlay when in edit mode: body:not([tabindex="0"]) [data-card]::after { content: ""; position: absolute; inset: 0; }

When using HTML Embed components for scripts like structured data (JSON-LD), check the 'Client Only' option to prevent server-side rendering issues. This stops Webstudio from parsing and re-rendering the script content, which can cause duplication problems when the same script gets processed multiple times.

To prevent schema duplication when embedding structured data (schema.org JSON-LD), make sure to check the 'Client Only' option in your HTML Embed component. This prevents Webstudio from parsing and re-rendering the script during server-side rendering, which can cause duplicate structured data to appear in validation tools like validator.schema.org.

To set up Google Tag Manager:

1. Add the head script tag in Project Settings > Custom Code,
2. Add the body noscript tag in an HTML Embed component placed appropriately on your page.

If GTM isn't working, common issues include: firewall software (like Portmaster) blocking Tag Manager IP addresses, incorrect placement of the body tag, or DNS/network issues. Check your firewall settings and ensure both head and body code are properly implemented.

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.

To set up Google Tag Manager: 1) Add the head script tag in Project Settings > Custom Code, 2) Add the body noscript tag in an HTML Embed component placed on your page. Make sure the HTML Embed with the noscript tag is positioned appropriately in your page structure. If GTM isn't working, check that your firewall (like Portmaster) isn't blocking the Tag Manager IP addresses.

You can use external CSS Grid generators like cssgridgenerator.io to create grid layouts visually, then copy the generated CSS into Webstudio's Advanced panel. These tools provide visual interfaces for creating complex grid structures that you can then implement in Webstudio using CSS Grid properties.

Contentful's API response structure separates linked entries and assets into different arrays, which creates challenges with Webstudio's expression editor limitations. Since you can't easily connect linked entries and assets within the expression editor, the recommended solution is to create a data transformer using a CloudFlare Worker or similar service to restructure the API response before it reaches Webstudio.

A safe mode feature is planned (GitHub issue 5373) that would allow disabling canvas scripts if they break the builder. The proposal includes a ?safe flag in the builder URL that would disable 'Run on Canvas' for all HTML embeds, allowing access to fix problematic scripts. This addresses cases where mutation observers or other scripts can completely freeze the builder interface.

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.

Currently, you can paste: 1) Elements copied from Webflow, 2) Instances copied from other Webstudio projects, and 3) Markdown content. Webflow copy-paste works through a special JSON data structure, not HTML/CSS directly.

If a script completely breaks the builder (making it unresponsive), you should: 1) Navigate to a different page in your project, 2) Restore from a previous backup if available, 3) Be careful with mutation observers on the document level as they can freeze everything. A safe mode feature is being developed to prevent this issue in the future.

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.

For Google Analytics, add the head script in Project Settings > Custom Code and the body script in an HTML Embed component. For cookie consent, consider using GDPR-compliant analytics alternatives that don't require cookie banners instead of traditional cookie consent solutions, as they provide a better user experience and avoid the need for complex cookie management.

The most likely reason you can't see form submissions is missing 'name' attribute values on each input field. Make sure every form input has a proper 'name' attribute set. You can test this by using the default form that's inserted when you click on the webhook form component - if you fill that out with proper name attributes, you should see the submitted information.

If paragraph text becomes invisible (opacity: 0) when trying to edit or select portions of text, this is usually caused by conflicting custom scripts in your project. Check if you have any custom HTML Embed components with scripts that might be interfering with Webstudio's text editor. Remove or modify conflicting scripts to resolve this issue.

This was a bug where the 'name' property on iframe elements was incorrectly treated like the 'target' property. The workaround was to switch the tag to 'div', add the property, then change back to 'iframe'. This issue has been fixed in GitHub PR 5349 and should no longer occur in current versions of Webstudio.

This is a known bug where mouse scrolling stops working when the Custom Code editor is in fullscreen mode. In the regular (non-fullscreen) window, scrolling works normally with dual scrollbars. As a workaround, avoid using fullscreen mode for the Custom Code editor when you need to scroll through long code sections.

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.