Frequently asked questions

Yes, Animation Tokens are planned (GitHub issue 5254). They will let you define reusable named animation groups (similar to Style Tokens) instead of manually copy/pasting animations between groups.

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.

Page view limits are applied per account, not per domain. All pricing in Webstudio is per account.

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.

Yes, you can create modern templates with animations and submit them to the Webstudio marketplace. If you create templates similar to Framer's modern designs with nice animations, contact the Webstudio team (ping Oleg in DM) for review and approval. This would help attract more users to Webstudio and expand the template library.

Yes, you can create photography portfolios that automatically generate album pages based on Google Drive folders. Use the Google Drive API (REST API v3) to fetch photos from specific folders and display them as sliders or slideshows in Webstudio. You'll need to set up API authentication and create resources in Webstudio that connect to your Google Drive folders. This allows for automatic updates when you add new photos to your Drive folders.

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.

Currently, 'Can clone' and 'Can copy' settings only work for View-only links, not Content edit links. This is a popular request and Webstudio is working on more granular permissions (GitHub issue 5187) to allow content editing while preventing cloning/copying. This would be useful for client work where you want to allow editing but protect your project structure.

You don't need to delete the default .wstd.io domain. Think of it as a 'staging server' where you can deploy and test without your site going live and without being indexed by search engines. These domains will always exist, you don't need to publish to them, and they won't be indexed by search engines.

Yes, Webstudio can be self-hosted using Docker. However, the documentation for Docker setup is currently limited. You can find some guidance in the contributing docs for developers section. Note that some features like email sending are cloud-only, so you'll need to implement your own backend solutions for features like webhook forms when self-hosting.

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.

Yes, you can use Cloudflare Workers with Webstudio-hosted sites. Set your main domain's CNAME to 'proxied' in Cloudflare to enable Workers, while keeping subdomain CNAMEs (like those pointing to Webstudio) as 'DNS only'. This allows you to reverse-proxy different subdomains or paths through your Worker without creating double-proxy issues.

Patterns:

1. Main domain proxied -> Worker routes traffic to a Webstudio project subdomain
2. Worker maps /blog or /app path segments to a Webstudio project
3. Avoid chaining (nesting) a proxied CNAME behind another proxied CNAME

Only the domain terminating at the Worker should be orange-cloud (proxied); project CNAMEs stay DNS-only.

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.

No, you cannot use dynamic pages (PRO features) without a PRO subscription or lifetime license when using the cloud builder. To use PRO features for free, you would need to self-host the Webstudio builder (not just the site).

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.

You cannot build native mobile apps with Webstudio. However, many apps wrap their web applications into a mobile app browser and publish to app stores, which is technically possible with Webstudio. Native mobile apps are generally written in different programming languages from web apps. Webstudio creates responsive web applications that work well on mobile devices but not standalone mobile applications.

Yes, dynamic pages are a Pro feature. To use Pro features for free, you would need to self-host the Webstudio builder (not just the site). The cloud builder requires a Pro subscription or lifetime license to access Pro features like dynamic pages, even if you're deploying via CLI to external hosting.

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.

Yes, the Animation Engine works when self-hosted—use the latest version and reinstall deps. If they fail only on Docker: update images, run install, clear caches, ensure no CSP blocks animation scripts. If none run at all, verify OS/browser reduced-motion isn’t forcing a skip (see separate reduced-motion FAQ).

Webhook forms have limitations when self-hosting. Email sending is a cloud-only feature, so for self-hosting you need to implement your own backend or use services like n8n or Make.com. Currently, only JSON format is supported for webhook forms in self-hosted setups - URL-encoded format is not yet supported.

Yes. Webstudio uses the IPX optimizer to serve optimal formats (AVIF, WebP, or optimized JPEG) based on browser support. Cloud hosting works out of the box. For self-hosted Docker setups ensure:

1. You pulled the latest container image
2. Dependencies are installed (pnpm install / npm install)
3. No proxy strips Accept headers (required for content negotiation)
4. Caching layer (CDN/reverse proxy) isn’t serving stale JPEG variants

If you only see optimized JPEGs, typically the Accept header is lost or optimization config is blocked.

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.

Support is planned. Currently colors normalize to RGB. Future work aims to add HSL (and advanced syntax like hsl(from ...)) plus better OKLCH handling with calculations.

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.

Vimeo embed aspect ratios are defined in styles. For dynamic pages that need to handle both horizontal 16:9 and vertical 9:16 videos, you can conditionally show landscape or portrait instances based on CMS data. Add a field in your CMS to specify the video orientation, then use conditional visibility to show the appropriate embed configuration.

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 manual: create a Stagger Animation container, copy over style tokens + advanced CSS from original element, then move children. Requested feature would add a context action to auto-wrap/preserve styles. Until then:

1. Duplicate the original element (backup)
2. Create the stagger container with identical layout props (flex/grid/etc.)
3. Move child elements into the stagger container
4. Reassign any animation subjects / triggers

This minimizes losing complex layout tokens.

Slow server response times are often caused by Resources (API calls) placed at the root level. If you're using a Resource globally but only need it on specific pages (like Airtable for a careers page), move the Resource to the body of that specific page instead of the root. Airtable is particularly slow - consider switching to Baserow for faster API responses. Server response times can drop from 1200ms to 200ms by moving Resources appropriately. Caching options for Resources are planned to help with slow APIs.

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.

Currently, there's no direct 'Replace With Stagger Animation' action in the context menu. When converting elements to stagger animations, you must manually copy all style tokens and advanced CSS from the original element to the stagger animation container. This is particularly tedious for flex or grid containers. This workflow improvement has been requested for future updates.

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.

No built-in dashboard yet. Use external analytics (Plausible, Umami, PostHog, GA). Page view limits are per account. Extra views purchasable on pricing page. Internal tracking UI is planned (issues 5286, 5239).

To update the Animation Engine on self-hosted Webstudio, you need to use the latest Webstudio version and run npm install to update all packages. The Animation Engine works fine on Webstudio-hosted sites and in the builder, but self-hosted containers may need updates to ensure animations work properly on the live site.

Hover and active states are accessible through the dropdown menu on each style property token, not in the main state selector. Look for the dropdown arrow next to individual style properties to access hover, active, focus, and other pseudo-states. If you're having trouble finding these options, check the Webstudio 101 video tutorials on YouTube for a visual guide.

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.

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.

When integrating with Ghost CMS, the API only returns 15 items by default. To ensure all entries are included in your sitemap, add '&limit=all' to the Ghost API endpoint. This parameter will fetch all available entries instead of just the default limited set.

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.

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.

To create different navigation styles for different pages, you need to unlink the navigation from the global slot. Copy the navigation out of the 'navbar transparent_home' slot which synchronizes navigation across all pages. Once copied out of the slot, you can style each navigation independently without affecting other pages.

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 copying sections from marketplace templates, you should be able to edit text directly in Text and Link components as rich text containers. If you encounter issues where editing destroys the component structure or only shows JSON-like expressions, this was a known bug that has been fixed. The fix ensures Text and Link components are treated as rich text containers rather than requiring parent element editing.

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 Webstudio is automatically setting canonical URLs to include query parameters (causing duplicate content issues in Google Search Console), you can configure the canonical URL in the page settings. Set it to exclude query parameters and normalize trailing slashes to avoid SEO issues. This setting is available in the page's SEO configuration panel.

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.

Slow server response times are often caused by API resources being loaded on every page, even when not needed. Solutions:

1. Move API resources from the root to specific pages where they're actually used
2. Consider faster CMS alternatives - Airtable is notably slow while Baserow is faster
3. Implement caching for API responses when data doesn't change frequently

Moving a slow Airtable resource from root to page-specific usage can reduce server response time from 1.2s to 200ms.

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.

This is a limitation with the current router used for Docker deployments. Assets in _image/** routes can be incorrectly handled by root dynamic pages like :slug. As a workaround, use more specific paths like /blog/:slug instead of just :slug for your dynamic pages. This issue is recognized and may be addressed in future releases.

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

The default .wstd.io domains are not indexed by search engines as they're meant to be development domains. If you want extra protection, you can check 'exclude from search' in all page settings. For additional security, you can add robots.txt file or meta tags like <meta name="robots" content="noindex,nofollow,noarchive">. If using Cloudflare, you can also add password protection. You don't need to delete the project - think of the .wstd.io domain as a staging server where you can test without affecting your live site.

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 integrate Directus CMS with Webstudio, you need to use GraphQL queries similar to other CMS integrations. First, set up your Directus API endpoint, then create GraphQL queries in Webstudio's resource panel. You can find GraphQL schema and test queries in Directus's built-in GraphQL playground. The process is similar to integrating other headless CMS platforms that support GraphQL.

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; }

A dedicated tokens manager (issue 3901) is planned: central list, search, usage counts, unused cleanup indicators. For now manual auditing is required.

To migrate a self-hosted Webstudio instance:

1. Run 'pnpm migrations migrate' to update the database schema
2. Ensure your Docker volumes are properly mapped to preserve data
3. Check that the old volumes are still in use with 'docker cli' commands rather than relying on GUI interfaces

Always verify your volume mappings before and after updates to prevent data loss.

To migrate or update a self-hosted Webstudio instance, run the migrations command: pnpm migrations migrate. This should handle database migrations and updates when moving to a new version. When updating Docker containers, the system should continue using existing volumes and data.

If you encounter issues where it appears that old volumes aren't being used, check with Docker CLI commands rather than relying on GUI tools, as the command line often provides more accurate information about volume usage. Always backup your data before performing migrations, and test the migration process in a development environment first.

For self-hosted builder migrations, run 'pnpm migrations migrate' to update the database schema. Docker volumes should persist between updates, so your data should remain intact when updating to newer versions.

When integrating Ghost CMS with Webstudio, make sure to add '&limit=all' to your API endpoint URLs. By default, Ghost's API only returns 15 items, which can result in incomplete sitemaps and missing content. Adding this parameter ensures all your Ghost content is properly included in your Webstudio site's sitemap and navigation.

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.

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.

The default .wstd.io domains are not indexed by search engines as they're meant to be development domains. If you want extra protection, you can check 'exclude from search' in all page settings. For additional security, you can add robots.txt file or meta tags like <meta name="robots" content="noindex,nofollow,noarchive">. If using Cloudflare, you can also add password protection.

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.

Currently, there's no 'Replace with Stagger Animation' action in the context menu.

When converting elements to stagger animations, you must manually copy all style tokens and advanced CSS from the original element to the stagger animation. This is particularly tedious for containers like flex elements or grids. This feature has been requested for the action menu.

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 change font weights for all headings at once in Webstudio, you need to work with the style tokens in the global root. While you can set font family and color globally, font weight typically needs to be set individually for each heading level (H1, H2, H3, etc.). However, you can create a shared token for font weight and apply it to multiple heading elements. Click on the font weight property in the style panel to access the token system. You can create a font weight token and then apply that same token to all your heading elements for consistency. This approach allows you to change the weight globally by updating the token value.

In the Craft style guide, you cannot set font weights for all headings at once through a single global setting. Each heading (H1, H2, H3, etc.) needs to be styled individually. You can click on the specific heading token in the style guide to modify its weight. While you can apply the same token to multiple elements, this may complicate usage and override individual heading styles.

To change font weights for all headings at once in Craft style guide:

1. Go to the style panel
2. Look for the font weight token/class that headings inherit from
3. Click on the specific token to edit it globally

While you can change H1, H2, H3 individually, using shared tokens allows you to update all headings simultaneously, though this may complicate individual heading customization.

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.

When setting up Webstudio locally, if you encounter issues with TRPC tokens needed for the publishing flow and static build export, you can bypass this by using the Webstudio CLI directly instead of going through the internal publishing flow. The CLI provides a more straightforward way to export your projects without dealing with internal authentication tokens.

To set up a custom 404 page:

1. Create your custom 404 page
2. In the page settings, set the path to '/*' (catch-all)
3. Set the status code to 404 (important for SEO - prevents search engines from wasting crawl budget on non-existent pages)
4. This will make your custom 404 page handle all unmatched routes instead of showing the default blank 404 page

Webstudio requires CNAME records for custom domains. If your DNS provider converts CNAME to ALIAS for root domains (like Hostinger), this won't work because Webstudio only supports CNAME.

Solutions:

1. Use 'www' subdomain with CNAME pointing to Webstudio
2. Move to a DNS provider that supports CNAME flattening (like Cloudflare)
3. For unsupported TLDs (.de domains), register a .com equivalent on Cloudflare and redirect

The 'www' approach is recommended if CNAME flattening isn't available.

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.

When setting up headless WordPress with Webstudio, you may encounter issues where data displays in the builder but not on the published site. This is often because WordPress hosting providers (like SiteGround) block Cloudflare Workers requests, treating them as bots. Contact your hosting provider to whitelist Cloudflare Worker IP addresses. SiteGround specifically requires adding Cloudflare IPs to their whitelist.

To change the styling of links in embedded Ghost CMS content, look for the dropdown menu in the style panel when you have the Content Embed component selected. You can modify link styles including colors from there. The default bright blue link color can be customized to match your site's design.

If animations aren't working, try these troubleshooting steps:

1. Check if you're using the latest animation engine - older JavaScript-based animations may not work properly
2. For self-hosted Docker containers, ensure you've updated to the latest Webstudio version and run 'npm install' to update all packages
3. Verify your animations work in the Webstudio builder first
4. Check if Safe Mode is enabled, which disables animations
5. Make sure your trigger conditions are properly set up

For privacy-focused web analytics, consider these open-source alternatives:

1. Umami - Simple, privacy-focused analytics that maintains visitor privacy and data ownership
2. Plausible - Lightweight, privacy-friendly analytics
3. PostHog - More comprehensive product analytics with web analytics features and heatmaps
4. Jitsu - Open-source alternative to Segment for aggregating events across multiple services without performance issues

These tools typically don't require cookie banners and provide better user experience.

API limits vary by platform: Airtable's free plan has very restrictive limits that can be hit quickly. Baserow has more generous limits (around 10 concurrent requests) and works well for sites with under 1000 visitors per day. For production sites, consider self-hosting Baserow for more freedom, or use dedicated blog CMS platforms like Ghost, Hyvor Blogs, or Zenblog. Always implement caching to avoid hitting limits on every page load.

Webstudio uses atomic CSS where each CSS rule contains one property, which makes CSS stop growing after reaching a certain size. This approach dramatically reduces file sizes - Webstudio.is was reduced from 160kb to 16kb CSS. Unlike traditional builders like Webflow that can generate 75,000+ characters just for grid-spans, atomic CSS prevents bloated stylesheets and improves performance.

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

If Webstudio appears to be down or you can't open projects, first try refreshing the page. If the issue persists, it may be due to a deployment issue which the team typically resolves quickly. You can check the Discord community for status updates or report the issue. Webstudio has fast response times for service interruptions.

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.

Intermittent server-side issue or heavy assets. Steps:

1. Retry later (could be transient load)
2. Optimize large media / reduce oversized assets
3. Temporarily remove unusually large collections or heavy embeds
4. Check browser console & network panel for failing requests
5. Contact support with project ID if a minimal single-text page still times out

Known export pipeline issue affecting some MP4s. Keep original sources; after export replace /assets/*.mp4 with originals. Report cases so the build pipeline can be patched. Cloud-hosted playback is unaffected.

The old Text component has been removed since it was essentially just a regular div element. You should now use the Paragraph component for text content, or you can write text directly in a regular div element. The Paragraph component provides better semantic structure for text content.

Rybbit (rybbit.io) is an open-source, privacy-friendly analytics platform that's been recommended by the Webstudio community. It combines features from Umami, Google Analytics, PostHog, and Clarity, offering one of the best analytics UI experiences. It's positioned as a modern Google Analytics replacement that's next-gen, lightweight, and cookieless for web and product analytics.

For blogs with Webstudio, you have several options:

1. Use headless CMS like Ghost, Directus, or Contentful for structured content management
2. For smaller blogs (under 50 posts), consider designing individual pages and copying/pasting elements between them
3. Use dedicated blog platforms like Hyvor Blogs or Zenblog that are designed for Webstudio integration
4. Implement caching strategies to avoid API limits and improve performance

Choose based on your scale, technical requirements, and content management needs.

Instead of implementing cookie consent banners, consider using GDPR-compliant analytics alternatives that don't require cookies. This avoids the need for cookie banners entirely and provides a better user experience. Cookie banners are considered a 'plague' by many developers, so privacy-focused analytics tools are often preferred.

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

While you can use any domain registrar, Cloudflare is recommended for DNS management because it supports CNAME flattening, which allows you to use root domains (without www) properly. Other registrars like Namecheap have limitations that can break email services and other domain-connected features.

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.

Wrapping the entire card in a Link component is semantically better and more accessible. The stretched link technique (absolute positioned overlay) can hurt screen readers, may be devalued by Google, and blocks content editing access. For content editors, use CSS like 'body:not([tabindex="0"]) [data-card]::after' to only apply the overlay when not in edit mode.

Webstudio plans to add Grid UI management tools later this year. These will leverage CSS Grid under the hood, so existing grid implementations won't require migration. Currently, you can use CSS Grid through the Advanced panel with properties like 'display: grid', 'gap: 10px', and 'grid-template-columns: 1fr 1fr 1fr'. The future UI will provide visual tools for advanced grid layouts including thirds, harmonic sequences, and golden ratio grids.

The Opacity and Blend Mode controls are located in the Style panel. Look for them in the styling section when you select an element - they should appear as dedicated controls for adjusting transparency and blend modes.

Currently, there's no built-in dashboard feature to view page view usage directly in Webstudio. The recommended approach is to use external analytics tools (privacy-friendly options are available or Google Analytics). Page view limits are per account, not per domain. You can purchase additional page views through the pricing page. There are GitHub issues (5286 and 5239) tracking requests for adding internal page view tracking, which would provide more accurate data than analytics that can be affected by cookie consent and tracking opt-outs.

403 Forbidden errors in Google Search Console are often caused by bot protection settings in Cloudflare. Check your Cloudflare account for bot protection features that might be blocking search engine crawlers. If you're using Cloudflare nameservers, ensure the security settings allow legitimate bot traffic. You can also manually trigger a crawl in Google Search Console to test if the issue is resolved after adjusting your Cloudflare settings.

Some email providers may block emails from Webstudio's form service. If you're not receiving form submissions to your custom domain email (but Gmail works fine), try whitelisting Webstudio's email service with your email provider. This is common with providers like Strato and other regional email services that have strict spam filtering.

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.

Often caused by OS/browser reduced-motion preference. Disable reduced motion in system accessibility settings if you expect animations.

In Docker deployments, dynamic routes like ':slug' can intercept image asset requests (like '_image/**' routes), causing 404/302 errors when the slug is connected to a CMS. This is a limitation of the current router used for deployment. The workaround is to use more specific paths like '/blog/:slug' instead of root-level dynamic routes.

Video file corruption during export is a known issue where MP4 files may become corrupted during the build process. As a workaround, manually replace the corrupted video files in your exported /assets folder with the original files from your local machine. This issue specifically affects the export process and doesn't impact videos when using Webstudio cloud hosting.

If new animations aren't working in Webstudio, the most likely cause is having 'reduced motion' enabled in your operating system settings. Check your OS accessibility settings: on Windows, go to Accessibility > Visual Effects > Animations and make sure animations are enabled. On other systems, look for similar reduced motion or animation preferences in accessibility settings.

This is a known issue where sometimes elements cannot be dragged into Collection Item Trigger containers. It affects various elements like headings, footers, and other components. This appears to be a UI bug in the drag-and-drop system. Try refreshing the builder, copying and pasting the element instead, or restructuring your layout as a workaround until this issue is resolved.

This is a known intermittent issue where certain elements cannot be dragged into Item Trigger components while others work fine. It's been reported by multiple users and appears to affect various element types (H3, footer elements, etc.) inconsistently. This seems to be a UI bug that the team is aware of and working to resolve.

If you can't edit text in copied marketplace template sections, this was a known bug where Text and Link components weren't being treated as rich text containers. The issue has been fixed - Text and Link components are now properly recognized as editable rich text elements, preventing the editor from trying to edit their parent containers instead.

If CMS images appear broken in the builder but work when accessing the URL directly, it's likely a permissions issue with your CMS setup. For Directus, check that the assets have proper public access permissions. The image URL should be accessible without authentication. Directus has many permission settings that can affect asset access.

If your domain shows as 'Active, but not published' and the publish button is grayed out, you likely need to add the required 'Built with Webstudio' badge to your site. On the free plan, you can use one custom domain but must include this badge on your website.

If your domain shows 'Active' but the publish button is greyed out, you likely need to add the required 'Built with Webstudio' badge to your site. For free accounts, this badge is mandatory when using custom domains. Add the badge component to your site, and the publish button should become available. Pro accounts can remove this badge requirement.

When your custom domain shows 'Active, but not published' with a grayed-out publish button, it's usually because you haven't added the required 'Built with Webstudio' badge to your website. In the free version, you can use one custom domain, but it must include the Webstudio badge. You need to manually add this badge component to your site before you can publish to a custom domain.

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.

This is a bug where components that were replaced by the Element component show as 'Ws:Element' in the Content Block dropdown. As a workaround, you can manually specify labels for components. This issue has been fixed in GitHub PR 5363, where proper labels now show in the <tag> format.

If webhook forms are showing 'something went wrong' errors even on blank pages and this affects multiple websites that previously worked, it could be a service-wide issue or a browser-specific problem. Try testing in different browsers (Safari, Chrome) and check if you're using the default action or a custom webhook. Contact support if the issue persists across multiple sites and browsers.

This usually happens when animations are accidentally disabled for specific breakpoints. Check the eye icon buttons in the animations list on the right panel - you may have turned off animations for desktop breakpoints while keeping them enabled for mobile. Also check if the animation subject is set correctly for each breakpoint.

Webstudio shows breakpoints at minimum width (e.g., 767px and lower) rather than maximum width, which aligns with Webflow's approach. This means when you see 767px as a breakpoint, it applies to screen sizes of 767px and smaller. This is different from some other page builders that show maximum width values. The breakpoint represents the minimum width at which those styles will be applied.

Your DNS provider likely lacks CNAME flattening at the apex. Adding 'www' ensures reliable CNAME mapping without breaking other records (email, etc.). To use the root cleanly, switch nameservers to a provider (e.g. Cloudflare) that supports flattening.

Webstudio's marketplace was launched recently compared to platforms like Webflow (which has had years to build their template library). Webstudio focuses on empowering the community to build and share templates rather than creating them internally. The roadmap includes importing Webflow and Tailwind templates, and community members can submit templates to the marketplace for review and approval.

Root domain setup is non-standard and broken with some providers like Namecheap. It can break other services connected to your domain (like email). The solution is to use CNAME flattening by migrating your domain to Cloudflare nameservers, which properly supports root domain hosting and gives you additional options and protection.

Export timeouts can occur even for simple sites with basic text and images. This is typically a server-side processing issue rather than a problem with your site content. If you're experiencing consistent export failures, try again later or contact support, as this usually indicates a temporary server issue rather than something wrong with your site structure.

Export timeouts can occur due to various factors including large assets, complex pages, or temporary server issues. Try reducing image sizes, optimizing assets, or breaking complex pages into smaller components before exporting. If the issue persists with a simple page containing just text and a few images, it may be a server-side issue that should be reported to support.

Export timeouts can happen with larger projects or those with many assets. If you have a simple site with just text and a few images that's timing out, this may be a temporary server issue. Try again later or contact support if the problem persists.

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.

This usually happens when animations are accidentally disabled for specific breakpoints. Check the eye icon buttons in the animations list on the right panel - you may have turned off animations for desktop breakpoints while keeping them enabled for mobile. Also check if the animation subject is set correctly for each breakpoint.

Webstudio shows breakpoints at minimum width (e.g., 767px and lower) rather than maximum width, which aligns with Webflow's approach. This means when you see 767px as a breakpoint, it applies to screen sizes of 767px and smaller. This is different from some other page builders that show maximum width values. The breakpoint represents the minimum width at which those styles will be applied.

Your DNS provider likely lacks CNAME flattening at the apex. Adding 'www' ensures reliable CNAME mapping without breaking other records (email, etc.). To use the root cleanly, switch nameservers to a provider (e.g. Cloudflare) that supports flattening.

Webstudio's marketplace was launched recently compared to platforms like Webflow (which has had years to build their template library). Webstudio focuses on empowering the community to build and share templates rather than creating them internally. The roadmap includes importing Webflow and Tailwind templates, and community members can submit templates to the marketplace for review and approval.

Root domain setup is non-standard and broken with some providers like Namecheap. It can break other services connected to your domain (like email). The solution is to use CNAME flattening by migrating your domain to Cloudflare nameservers, which properly supports root domain hosting and gives you additional options and protection.

Export timeouts can occur even for simple sites with basic text and images. This is typically a server-side processing issue rather than a problem with your site content. If you're experiencing consistent export failures, try again later or contact support, as this usually indicates a temporary server issue rather than something wrong with your site structure.

Export timeouts can occur due to various factors including large assets, complex pages, or temporary server issues. Try reducing image sizes, optimizing assets, or breaking complex pages into smaller components before exporting. If the issue persists with a simple page containing just text and a few images, it may be a server-side issue that should be reported to support.

Export timeouts can happen with larger projects or those with many assets. If you have a simple site with just text and a few images that's timing out, this may be a temporary server issue. Try again later or contact support if the problem persists.

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.

This usually happens when animations are accidentally disabled for specific breakpoints. Check the eye icon buttons in the animations list on the right panel - you may have turned off animations for desktop breakpoints while keeping them enabled for mobile. Also check if the animation subject is set correctly for each breakpoint.

Webstudio shows breakpoints at minimum width (e.g., 767px and lower) rather than maximum width, which aligns with Webflow's approach. This means when you see 767px as a breakpoint, it applies to screen sizes of 767px and smaller. This is different from some other page builders that show maximum width values. The breakpoint represents the minimum width at which those styles will be applied.

Your DNS provider likely lacks CNAME flattening at the apex. Adding 'www' ensures reliable CNAME mapping without breaking other records (email, etc.). To use the root cleanly, switch nameservers to a provider (e.g. Cloudflare) that supports flattening.

Webstudio's marketplace was launched recently compared to platforms like Webflow (which has had years to build their template library). Webstudio focuses on empowering the community to build and share templates rather than creating them internally. The roadmap includes importing Webflow and Tailwind templates, and community members can submit templates to the marketplace for review and approval.

Root domain setup is non-standard and broken with some providers like Namecheap. It can break other services connected to your domain (like email). The solution is to use CNAME flattening by migrating your domain to Cloudflare nameservers, which properly supports root domain hosting and gives you additional options and protection.

Export timeouts can occur even for simple sites with basic text and images. This is typically a server-side processing issue rather than a problem with your site content. If you're experiencing consistent export failures, try again later or contact support, as this usually indicates a temporary server issue rather than something wrong with your site structure.

Export timeouts can occur due to various factors including large assets, complex pages, or temporary server issues. Try reducing image sizes, optimizing assets, or breaking complex pages into smaller components before exporting. If the issue persists with a simple page containing just text and a few images, it may be a server-side issue that should be reported to support.

Export timeouts can happen with larger projects or those with many assets. If you have a simple site with just text and a few images that's timing out, this may be a temporary server issue. Try again later or contact support if the problem persists.

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.

This usually happens when animations are accidentally disabled for specific breakpoints. Check the eye icon buttons in the animations list on the right panel - you may have turned off animations for desktop breakpoints while keeping them enabled for mobile. Also check if the animation subject is set correctly for each breakpoint.

Webstudio shows breakpoints at minimum width (e.g., 767px and lower) rather than maximum width, which aligns with Webflow's approach. This means when you see 767px as a breakpoint, it applies to screen sizes of 767px and smaller. This is different from some other page builders that show maximum width values. The breakpoint represents the minimum width at which those styles will be applied.

Your DNS provider likely lacks CNAME flattening at the apex. Adding 'www' ensures reliable CNAME mapping without breaking other records (email, etc.). To use the root cleanly, switch nameservers to a provider (e.g. Cloudflare) that supports flattening.

Webstudio's marketplace was launched recently compared to platforms like Webflow (which has had years to build their template library). Webstudio focuses on empowering the community to build and share templates rather than creating them internally. The roadmap includes importing Webflow and Tailwind templates, and community members can submit templates to the marketplace for review and approval.

Root domain setup is non-standard and broken with some providers like Namecheap. It can break other services connected to your domain (like email). The solution is to use CNAME flattening by migrating your domain to Cloudflare nameservers, which properly supports root domain hosting and gives you additional options and protection.

Export timeouts can occur even for simple sites with basic text and images. This is typically a server-side processing issue rather than a problem with your site content. If you're experiencing consistent export failures, try again later or contact support, as this usually indicates a temporary server issue rather than something wrong with your site structure.

Export timeouts can occur due to various factors including large assets, complex pages, or temporary server issues. Try reducing image sizes, optimizing assets, or breaking complex pages into smaller components before exporting. If the issue persists with a simple page containing just text and a few images, it may be a server-side issue that should be reported to support.

Export timeouts can happen with larger projects or those with many assets. If you have a simple site with just text and a few images that's timing out, this may be a temporary server issue. Try again later or contact support if the problem persists.

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.

Middle-click support for dashboard navigation is a requested UX improvement. Currently, to open projects in new tabs, you need to either copy the project link and open manually, or go to dashboard and middle-click the project directly. This feature request has been noted by the team for future dashboard improvements.

Team workspaces with access control are planned but no timeframe is confirmed. The concept involves one builder instance with teams that have access to specific projects (Team A sees Site A, Team B sees Site B). For self-hosted deployments, this will likely be an enterprise feature, not open source. In the cloud, Webstudio plans to offer a team plan for this functionality.

Yes, Animation Tokens (named animations) are planned for Webstudio (GitHub issue 5254). This will work similar to Style Tokens, allowing you to create standardized animation combinations that sync across a project. Currently, you need to copy animations from one Animation Group and paste them to other groups, which is inefficient for reusing the same animations multiple times.

Yes, Webstudio plans to add cache options for resources (GitHub issue 4077). This would allow users to override CMS/API cache headers and enable Cloudflare edge caching, which would improve performance and reduce API calls to the origin server. This is particularly useful for data that doesn't change frequently.

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.

Yes, a centralized tokens manager is a long-standing planned feature (GitHub issue 3901). It would allow you to view all global tokens, see which ones are used/unused with usage counts, search for specific tokens, and clean up unused tokens. This would greatly improve token management across large projects.

Not currently, but markdown support as Content Embed is planned (GitHub issue 3485). This would allow any text field to become rich text, making any database or backend suddenly CMS-capable with decent content editing. Markdown support would enable use of platforms like Strapi and Contentful that output markdown instead of HTML.

Currently, there's no built-in way to track page view usage directly from the Webstudio dashboard.

For now:

1. Use external analytics like Google Analytics or privacy-friendly alternatives mentioned in the analytics channel.
2. You can purchase additional page views through the pricing page at webstudio.is/pricing.

All pricing and page view limits are per account, not per domain. There are GitHub issues (5286 and 5239) tracking the addition of built-in usage analytics to the dashboard.

This was a known issue where Webstudio's redirect validation was too strict and didn't allow question marks and other URL characters in redirect paths.

The validation has been updated and this issue has been fixed in GitHub PR 5348. You can now use query parameters and special characters in your redirects. The new validation uses URL parsing to properly validate redirect paths instead of character-by-character checking.