# Welcome New to Webstudio? Our getting started guide will help you navigate through building your first Webstudio website. It covers the essentials of creating web designs and integrating third-party tools. You'll learn how to utilize Webstudio's unique features like Design tokens and Components, and how to contribute to the project. [**Get started**](/basics/building-your-first-site) *** {% content-ref url="/pages/DSnM361MrQuNrZ7bTZeZ" %} [Building your first site](/basics/building-your-first-site) {% endcontent-ref %} {% content-ref url="/pages/SfKu4dh5vMVhYKIXk2hN" %} [Foundations](/university/foundations) {% endcontent-ref %} {% content-ref url="/pages/FB2rVGXCaiQmkeNhPk48" %} [Core Components](/university/core-components) {% endcontent-ref %} {% content-ref url="/pages/MGbnT1ttJc5oaRzOij1H" %} [CLI](/university/cli) {% endcontent-ref %} {% content-ref url="/pages/sGAlO4KEzkyukQJleP83" %} [Inception](/university/inception) {% endcontent-ref %} {% content-ref url="/pages/uQirhP7Wx6TZdVPdCcPA" %} [Radix UI Components](/university/radix) {% endcontent-ref %} {% content-ref url="/pages/tQrdfGrQBblL34KdHOwX" %} [Marketplace](/university/marketplace) {% endcontent-ref %} {% content-ref url="/pages/dCgydekXrUUDkt0F6JFD" %} [Self-Hosting](/university/self-hosting) {% endcontent-ref %} {% content-ref url="/pages/bDIsvM8oJ65CIk3moc4h" %} [How-Tos](/university/how-tos) {% endcontent-ref %} {% content-ref url="/pages/QBO45dANZ7aAa2PvblYx" %} [Integrations](/university/integrations) {% endcontent-ref %} {% content-ref url="/pages/rTijqEDpmcrCmmGwL8U8" %} [Craft](/university/craft) {% endcontent-ref %} {% content-ref url="/pages/tw1M9XIBhalXZrLNN3zp" %} [FAQs](/basics/faq) {% endcontent-ref %} ### Looking to contribute to Webstudio? {% content-ref url="/pages/4d88Dm4NB4HYqSp8UOQh" %} [Contributing for Designers](/contributing/contributing-for-designers) {% endcontent-ref %} {% content-ref url="/pages/mFWAUCH8P2nKR4WbxRMO" %} [Contributing for Developers](/contributing/contributing-for-developers) {% endcontent-ref %} {% content-ref url="/pages/AKSwRfjXlEHM0UrTs5fj" %} [Contributing to the Marketplace](/contributing/marketplace) {% endcontent-ref %} # Intro {% embed url="" %} Webstudio is an open-source visual development platform that empowers designers and developers to create responsive web designs with ease. Bridging the gap between design and code, it allows users to visually build while maintaining control over the underlying HTML, CSS, and JavaScript. ### πŸ§‘β€πŸŽ¨ For Designers Webstudio offers a powerful platform for designers to bring their creative visions to life, without needing extensive coding knowledge. Its intuitive visual interface enables the construction of layouts, styling of components, and animation of elements in real-time on a live canvas. This direct manipulation of design elements facilitates immediate feedback and accelerates iteration cycles. ### πŸ§‘β€πŸ’» For Developers Developers will appreciate Webstudio's flexibility and extensibility. It simplifies web development with its visual interface, yet provides full access to the underlying code. Developers can create custom components with complex logic or specific integrations, harnessing the power of coding while benefiting from Webstudio's streamlined visual workflows. As an open-source tool, Webstudio offers the freedom to extend functionality as needed and contribute to the enhancement of its features. ## Related * [Webstudio Features](https://webstudio.is/features) – Explore all Webstudio features * [Building your first site](/basics/building-your-first-site) – Step-by-step guide to create your first website * [Courses](/basics/courses) – Community-made courses for learning Webstudio * [Anatomy of the Webstudio builder](/university/foundations/anatomy-of-the-webstudio-builder) – Understand the builder interface * [Inception](/university/inception) – Explore Webstudio's standalone AI design exploration app * [FAQs](/basics/faq) – Common questions and answers about Webstudio # Building your first site {% embed url="" %} Webstudio 101 Playlist {% endembed %} This video series is a quick overview of the most important parts of the builder to get you up to speed. ### πŸš€ Signup to Webstudio 1. Visit [Webstudio](https://webstudio.is/) and click on the "start building" or "sign in" button. 2. Create an account using either Google or Github. ### 🌟 Create a New Project or Import a Template Once logged in, you'll be taken to your dashboard. Here, you can view your existing projects and have the option to create a new blank project or start with a premade template. ### πŸ–₯ Understand the Builder Interface Understanding the interface is key to effectively using any new tool. Familiarize yourself with Webstudio's builder – the heart of your website creation. The Components panel houses elements like text, images, links, and more, which you can drag onto your canvas. For an in-depth guide, read our [Intro to the Anatomy of the Webstudio builder](/university/foundations/anatomy-of-the-webstudio-builder). ### 🎨 Use Design tokens Webstudio utilizes Design tokens for styling, offering consistency across platforms. These reusable styles help avoid naming conflicts and dependency issues common in large projects. Learn more about [Design tokens in Webstudio](/university/foundations/design-tokens). ### πŸ”§ Experiment With Components Components are the building blocks of your website. Experiment with basic ones like Text and Image, or delve into advanced components like HTML Embeds or Radix. Customize each component’s properties under "Settings." ### 🌐 Preview & Publish Once you're satisfied with your creation, use the 'Preview' button at the top right corner before publishing it live on the internet! For more details, check our [Publishing and custom domains Guide](/university/foundations/publishing-and-custom-domains). ### πŸ’¬ Join the Community Learning a new tool takes time, so don't be discouraged by initial challenges. Keep exploring, experimenting, and [join the Webstudio community](https://wstd.us/community) for support and inspiration. ## Related * [Courses](/basics/courses) – In-depth community-made courses * [Intro](/basics/intro) – Overview of Webstudio for designers and developers * [Anatomy of the Webstudio builder](/university/foundations/anatomy-of-the-webstudio-builder) – Deep dive into the builder interface * [Core Components](/university/core-components) – Learn about all available components * [Craft](/university/craft) – The standard for building with Webstudio # Courses Community-made courses ### [Webstudio Essentials: 0 to Complete Website With SEO](https://shop.createtoday.io/l/webstudio-essentials)
## Related * [Building your first site](/basics/building-your-first-site) – Quick video series to get started * [Intro](/basics/intro) – Overview of Webstudio for designers and developers * [Anatomy of the Webstudio builder](/university/foundations/anatomy-of-the-webstudio-builder) – Understand the builder interface * [FAQs](/basics/faq) – Common questions and answers about Webstudio # Roadmap & Links ## What is the team working on? Despite being a small team, we're incredibly agile and committed to delivering a steady stream of fresh and exciting features to our users. We operate on a fortnightly release cycle for substantial feature updates, ensuring that Webstudio is always evolving and improving. Transparency is one of our core values, and we believe in sharing our development journey with our community. Follow along with the design, development, marketing, and operations behind the scenes at Webstudio. {% embed url="" %} Roadmap at {% endembed %} Here you will find real-time updates and can see exactly what our team is working on, how far we've come, and what's coming up next. This open-door approach is part of our commitment to building a product that is as much a vision of our community as it is of our team. ### **Other Important Links:** * **Website:** [Webstudio](https://webstudio.is/) * **Discord:** [Join our community](https://wstd.us/community) * **GitHub:** [Webstudio repository](https://github.com/webstudio-is/webstudio) * **Product Hunt:** [Webstudio on Product Hunt](https://www.producthunt.com/products/webstudio) ### Social Media * **YouTube:** [Subscribe on YouTube](https://www.youtube.com/@getwebstudio?sub_confirmation=1) * **Twitter:** [Follow us on Twitter](https://twitter.com/getwebstudio) * **LinkedIn:** [Connect on LinkedIn](https://www.linkedin.com/company/webstudio-inc/) ## Related * [Webstudio Blog](https://webstudio.is/blog) – Read the latest news and tutorials * [Intro](/basics/intro) – Learn what Webstudio is and who it's for * [FAQs](/basics/faq) – Common questions and answers about Webstudio * [Contributing for Designers](/contributing/contributing-for-designers) – Ways designers can contribute to Webstudio * [Contributing for Developers](/contributing/contributing-for-developers) – How to contribute code to Webstudio # FAQs
🌐 What is open source? Open source software stems from the free software movement, emphasizing freedom in software usage, modification, and distribution. While terms like *open source*, *free*, *libre*, and *open core* have subtle differences, they share many principles. Key differentiators include licensing terms and the level of permissiveness. The Open Source Initiative defines criteria for open source software, including free redistribution, access to source code, and allowance for modified/derived works. Licenses must not discriminate against any groups or use cases and must permit bundling with other software. Some products blend open source and proprietary components, leading to the "open core" label, where the core functionality is open source but excludes proprietary parts. A well-known example is Android's use on Pixel phones: powered by the open source Android Open Source Project (AOSP), yet the phone's software remains proprietary.
πŸ”‘ How is Webstudio licensed? Webstudio Builder is distributed under the AGPL license. The AGPL (Affero General Public License) is a copyleft license that requires any modified versions of the software to be released under the same license when it is used to provide services. Usage without modifications is free.
πŸ”“ Is Webstudio Builder open source? Webstudio Builder is open source, while the overall Webstudio Platform adopts an Open Core model. [Open Source Definition](https://opensource.org/osd), [AGPL License](https://www.gnu.org/licenses/agpl-3.0.en.html)
πŸ’Ύ Can I use the CMS Integration when self-hosting? **Yes**. [CMS](/university/foundations/cms) and [Resources](/university/foundations/cms#resources) are available when self-hosting the builder and exporting the projects. The speed at which remote data is fetched will depend on your hosting.
🌍 What is Cloudflare Workers edge deployment, and how does it work? Cloudflare Workers are like small programs that run on Cloudflare's global network of servers. They allow you to customize and control how your website or application behaves, all without needing to manage your own server infrastructure. This global and distributed nature means that your code executes closer to your users, resulting in faster response times and improved reliability, regardless of where your users are located around the world. Plus, you can easily scale your application without worrying about provisioning or managing servers in different regions. [Cloudflare Workers](https://workers.cloudflare.com/), [Cloudflare's open source workerd technology](https://blog.cloudflare.com/workerd-open-source-workers-runtime/)
🎨 What are design tokens? Design tokens provide a unified system for managing styles like colors, spacing, and font sizes. They serve as a single source of truth for both designers and developers, housed in accessible formats like JSON files. This system ensures consistency across a project and simplifies design maintenance. A common application of design tokens is in semantic color naming, where names correspond to usage rather than color values. The flexibility of design tokens allows for referencing, condition-specific alterations, and mathematical manipulations. [WC3 Design tokens Format](https://tr.designtokens.org/format/), [Tokens Studio Plugin documentation](https://docs.tokens.studio/)
πŸ›‘οΈ What is GDPR, and how does it protect data? (What counts as GDPR compliant?) The GDPR is a stringent data privacy law applicable globally to organizations handling EU citizens' data. It grants EU citizens rights such as access, rectification, erasure, and objection to automated decision-making. Organizations must adhere to principles like lawfulness, fairness, transparency, and accountability. Violations can result in significant fines. Webstudio ensures its compliance with GDPR, although users must ensure their added functionalities on Webstudio sites also comply. [What is GDPR?](https://gdpr.eu/what-is-gdpr/), [Who must comply with GDPR](https://gdpr.eu/companies-outside-of-europe/)
πŸ–ΌοΈ How does Webstudio optimize images? Images significantly impact web page sizes and loading times. Google's WebP format, supporting both lossless and lossy compression, alpha channels, and animation, helps reduce image sizes by about 30% compared to traditional formats. Webstudio automatically converts images to WebP and resizes them to fit webpage dimensions, ensuring optimal sizes without compromising quality. [WebP FAQ](https://developers.google.com/speed/webp/faq)
πŸš€ How can I use Webstudio today, and how will it evolve? Currently, Webstudio excels in building super fast, responsive, dynamic websites. Future enhancements include linked CSS editors, animations engine, and real-time collaboration. Its open-source nature and API integration capabilities allow for extensive customization and connectivity with various services. [Webstudio Vision Document](https://webstudiois.notion.site/Vision-f52ed097ccaa410eb05076981d446c2f)
πŸ†˜ How to get additional support for my Webstudio purchase? Please [read this article](/misc/webstudio-support-process) on where and how to get support.
## Related * [Webstudio FAQ](https://webstudio.is/faq) – More frequently asked questions * [Webstudio Experts](https://webstudio.is/experts) – Find certified Webstudio experts for your project * [Intro](/basics/intro) – Learn what Webstudio is and who it's for * [Courses](/basics/courses) – Community-made courses for learning Webstudio * [Roadmap & Links](/basics/roadmap-and-links) – Official links and what the team is working on * [Webstudio Support Process](/misc/webstudio-support-process) – How to get help with your account * [Account Limits](/misc/account-limits) – View limits for different plan types # Foundations {% content-ref url="/pages/gWk5LWLMojqZypn1DiPC" %} [Anatomy of the Webstudio builder](/university/foundations/anatomy-of-the-webstudio-builder) {% endcontent-ref %} {% content-ref url="/pages/uYZ35ePvw8AH9gDOcQXO" %} [CSS variables](/university/foundations/css-variables) {% endcontent-ref %} {% content-ref url="/pages/bZ5bEQZSTGdtoAnBB8DA" %} [Design tokens](/university/foundations/design-tokens) {% endcontent-ref %} {% content-ref url="/pages/zrAAfdIUeGKRarVi8Ulx" %} [Data variables](/university/foundations/variables) {% endcontent-ref %} {% content-ref url="/pages/rOfjNC98NZMAsf6wSZzS" %} [Expression editor](/university/foundations/expression-editor) {% endcontent-ref %} {% content-ref url="/pages/11SC2sKf8QtsO6d5BRt8" %} [Animations](/university/foundations/animations) {% endcontent-ref %} {% content-ref url="/pages/NWE7BTYGPm7c6owvJAJf" %} [CMS](/university/foundations/cms) {% endcontent-ref %} {% content-ref url="/pages/2tP4arpLdkZdYCxzk0Pq" %} [Copy-Paste](/university/foundations/copy-paste) {% endcontent-ref %} {% content-ref url="/pages/wz3tgGLzRzYbcpeG6cHy" %} [Commands & search](/university/foundations/commands-and-search) {% endcontent-ref %} {% content-ref url="/pages/IXTuflumgHpMapfKa1ZT" %} [SEO settings](/university/foundations/seo-settings) {% endcontent-ref %} {% content-ref url="/pages/uqSIHA6qTMB3tdBV8Tgb" %} [Shortcuts](/university/foundations/shortcuts) {% endcontent-ref %} {% content-ref url="/pages/Fle5lPeggLTWPlu0RYPf" %} [Project settings](/university/foundations/project-settings) {% endcontent-ref %} {% content-ref url="/pages/o7wRtKAe7k78J7XeVdD7" %} [Modes](/university/foundations/modes) {% endcontent-ref %} {% content-ref url="/pages/kqo6OJJGoFd6tYSEi7lI" %} [Share links](/university/foundations/share-links) {% endcontent-ref %} {% content-ref url="/pages/HO5k2SucEYS6ecG6TUlw" %} [Publishing & custom domains](/university/foundations/publishing-and-custom-domains) {% endcontent-ref %} # Dashboard The Dashboard is your central hub for managing all your Webstudio projects, featuring workspaces, search, organization with tags, and multiple view options.
Webstudio dashboard showing project cards

The Webstudio Dashboard

The Dashboard is the first screen you see after logging into Webstudio. It provides an overview of your workspaces and projects, with powerful features for organization and quick access. *** ## Workspaces Workspaces let you organize projects and collaborate with other people. Each workspace has its own projects, members, roles, and seats. Use workspaces when you want to: * Keep client, team, or personal projects separate * Give collaborators access to multiple projects at once * Control what each person can view, edit, build, or publish * Move projects between workspaces you can manage ### Creating a workspace 1. Open the workspace selector in the Dashboard sidebar 2. Choose "New workspace" 3. Enter a workspace name 4. Click "Create" Workspace creation is limited by your plan.
Workspace selector open in the Dashboard sidebar

Workspace selector

New workspace dialog with a workspace name field

Creating a new workspace

### Switching workspaces Use the workspace selector in the Dashboard sidebar to switch between workspaces. The project list, search results, and tags update to match the selected workspace. ### Members and roles Workspace owners can manage members from the workspace menu. Add members by entering their email addresses; Webstudio sends them a secure dashboard notification to accept. Multiple emails can be entered at once by separating them with commas. Unlike share links, workspace membership is tied to a user's Webstudio account. This makes membership invitations safer for ongoing collaboration, especially when access should not depend on whether someone keeps a link private.
Workspace Members dialog showing invite field, role selector, member list, and included seats

Managing workspace members

When inviting or updating a member, choose a role: | Role | What they can do | | ------- | ------------------------------------------------------------------- | | Viewer | View, copy instances, and clone projects. | | Editor | Edit content only, such as text, images, and predefined components. | | Builder | Make design changes and publish to staging. | | Admin | Make design changes and publish to custom domains. | Owners have full control of the workspace, including member management and billing-related actions. Owners cannot be removed from their own workspace.
Workspace role selector open with Viewer, Editor, Builder, and Admin options

Workspace roles

### Pending invites Invited members appear as pending until they accept the invitation. Workspace owners can remove pending invites from the Members dialog. ### Seats and billing Each workspace has an included seat count based on the workspace owner's plan. The Members dialog shows how many seats are still included. If an invite would exceed the included seats, Webstudio asks you to confirm the extra seats before sending the invite. Extra seats are added to billing for the workspace owner. If a workspace has more members than the plan covers, non-owner members cannot access the workspace until the owner buys the extra seats or removes members. ### Moving and transferring projects From a project menu, choose "Transfer" to move or transfer a project: * Move it to another workspace you can manage * Transfer it to another user's workspace that you already have access to * Transfer it to another user by entering their email address If the recipient has no shared workspace available, Webstudio sends a transfer request. When the recipient accepts it, the project is placed in their default workspace.
Project transfer dialog with workspace selector and recipient email field

Moving or transferring a project

{% hint style="info" %} Workspaces are best for secure ongoing collaboration. Share links are still useful for one-off access, support, marketplace templates, and transferring cloneable copies, but anyone with the link can use it according to its permissions. See [Share links](/university/foundations/share-links). {% endhint %} ## Search The Dashboard includes search to help you quickly find projects in the selected workspace. ### How to use search 1. Click the search field in the left sidebar or start typing directly 2. Type your search query to filter projects by name 3. Use arrow keys to navigate through search results 4. Press Enter to open the selected project Search displays matching projects in a dedicated search view. This allows you to find any project in the selected workspace regardless of which section you're currently viewing. {% hint style="info" %} Search is performed client-side for instant results, making it snappy even with many projects. {% endhint %} *** ## Project tags Tags help you organize and categorize your projects for easier management. This is especially useful when you have many projects and need to group them by client, project type, status, or any other criteria. ### Creating and managing tags 1. Hover over a project card and click the tag icon (or access via the project menu) 2. Click "Create new tag" to add a new tag 3. Enter a tag name and select a color 4. Tags are automatically saved when you select them ### Tag features * **Color-coded tags** – Each tag can have a distinct color for visual organization * **Multiple tags per project** – Assign as many tags as needed to a single project * **Filter by tags** – Click a tag in the sidebar to filter projects by that tag * **Edit tags** – Rename or change the color of existing tags * **Delete tags** – Remove tags you no longer need Tags appear on project cards, making it easy to see project categories at a glance. *** ## View options The Dashboard supports two different view layouts to suit your preference: ### Grid view (card view) The default view displays projects as visual cards with: * Project thumbnail/preview * Project name * Custom domain (if configured) * Assigned tags * Quick action buttons ### List view A compact view that displays projects in rows with: * Project thumbnail (smaller) * Project name * Domain information * Tags * Last published date * Created date Switch between views using the view toggle buttons in the toolbar. *** ## Sorting projects Projects can be sorted in multiple ways to help you find what you need: * **Last published** – Projects sorted by most recent publication date * **Last edited** – Projects sorted by most recent changes (default) * **Name (A-Z)** – Alphabetically ascending * **Name (Z-A)** – Alphabetically descending * **Date created** – Projects sorted by creation date Click the sort dropdown in the toolbar to change the sorting order. Your preference is remembered across sessions. *** ## Custom domain display When a project has a custom domain configured, the domain is displayed on the project card. This makes it easy to identify which projects are live and what their public URLs are without opening each project. The domain display shows: * Custom domain (e.g., `example.com`) if configured * Default Webstudio subdomain otherwise *** ## Project settings from Dashboard You can access project settings directly from the Dashboard without opening the Builder: 1. Click the menu icon (three dots) on a project card 2. Select "Settings" from the dropdown menu 3. Edit project settings in the dialog that appears This allows you to quickly update project metadata, configure redirects, manage custom code, and adjust other settings without loading the full Builder interface. *** ## Project actions From the Dashboard, you can perform several actions on your projects: ### Quick actions (hover over card) * **Open** – Open the project in the Builder * **Tags** – Manage project tags * **Menu** – Access more options ### Menu actions * **Settings** – Open project settings dialog * **Duplicate** – Create a copy of the project * **Share** – Create a share link * **Transfer** – Move the project to another workspace or transfer it to another user * **Delete** – Remove the project (with confirmation) Available actions depend on your workspace role. For example, Editors can rename and tag projects, Builders can create and duplicate projects, and Admins can transfer projects. ## Related * [Project settings](/university/foundations/project-settings) – Configure project-wide settings * [Publishing & custom domains](/university/foundations/publishing-and-custom-domains) – Deploy your site and manage domains * [Share links](/university/foundations/share-links) – Create share links and cloneable transfers * [Anatomy of the Webstudio builder](/university/foundations/anatomy-of-the-webstudio-builder) – Learn the Builder interface # Anatomy of the Webstudio builder This guide discusses the anatomy of the Webstudio Builder, an all-in-one visual development platform that allows you to build advanced websites. *** {% embed url="" %} Webstudio 101 Playlist {% endembed %} *** ## Canvas The canvas provides a visual representation of the website you are creating. After adding components from the Components Panel, you can arrange and style their instances on the canvas.
Canvas
*** ## Navigator The Navigator Panel is a hierarchical overview of all instances on your page. It displays the website’s structure, showing the nesting and relationships between different instances. You can select the instance of any component inside your Project by clicking it on the canvas or inside the navigator. ### Renaming Instances Double-click any instance in the Navigator to rename it. Use semantic names like "Hero Section" or "Contact Form" to make your project structure easier to understand and maintain. In the bottom half of the navigator, you will find the CSS Preview section, which is a real-time preview of the CSS styles applied to your selected instance.
### Global Root In the Navigator is the Global Root, the highest level of the page. Changes made to it apply to every page. It’s useful for setting global styles, such as font size and line height, and defining [CSS variables](/university/foundations/css-variables) so they are accessible on every instance on every page. Changing the font size on the root affects all CSS properties that use REM, as this unit is relative to the root font size. For example, `1rem` outputs as `1 x root font size`. {% hint style="info" %} Global Root uses the`:root` [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) under the hood. {% endhint %}
Global Root

Global Root

*** ## Breakpoints Breakpoints are crucial for creating responsive websites that adapt to different screen sizes and devices. *Style* changes you make on one breakpoint cascade, or affect, that breakpoint and all the smaller ones. {% hint style="success" %} You can create custom breakpoints with any media query condition – not just width-based. This includes `prefers-color-scheme` for dark mode, `prefers-reduced-motion` for accessibility, `orientation`, and more. {% endhint %} {% hint style="warning" %} Adding too many breakpoints or mixing and matching `min-width` and `max-width` will make maintenance difficult. The default breakpoints suffice more in the majority of use cases. {% endhint %}
Webstudio Breakpoints
By defining how components should behave at different screen sizes, you can ensure your website looks great on various devices, including desktops, tablets, and smartphones. {% hint style="info" %} When you select a breakpoint, such as 991, you’ll notice that the canvas is sized to 768. This is intentional. The goal is to style for the minimum (or maximum, if using min-width) to ensure all design issues are addressed at the "extreme" end of that breakpoint. When the viewport changes to 767, the next breakpoint is triggered. {% endhint %} *** ## Components Panel The Components Panel contains a list of all available [components](/university/core-components) that you can add to your Webstudio Project. You can do this by clicking the components in the panel or dragging and dropping them on the canvas. Components are grouped into sections like General, Text, Media, Forms, and [Radix](/university/radix). For example, the Text section has all typography-related components, while the Form section nests the building blocks of a form.
Add components
*** ## Assets Panel The Assets Panel is the second panel to the left of your canvas, and this is where all the static files are stored. You can upload, organize, and manage project assets inside this panel before using them on the canvas. ### Asset Types The Assets Panel supports various file types organized by category: * **Images** – JPEG, PNG, GIF, WebP, SVG, ICO, and more * **Fonts** – WOFF, WOFF2, TTF, OTF, and more * **Documents** – PDF, JSON, XML, and more * **Other** – Various additional file formats This list is not exhaustive – Webstudio supports many additional file formats. ### Filtering and Sorting Use the filter dropdown to show only specific asset categories (Images, Fonts, Documents, or All). Assets can be sorted by: * **Name** – Alphabetically A-Z or Z-A * **Date** – Newest or oldest first * **Size** – Largest or smallest first ### Asset Details Click on any asset to view its details panel, which shows: * **Name** – Click to rename the asset * **Description** – Add optional description text for organization * **Dimensions** – Width and height for images * **File size** – Size of the asset file * **Uses** – Number of places the asset is used in your project ### Asset Actions * **Download** – Download the original asset file to your computer (Pro plan required) * **Review & Delete** – When an asset is in use, shows where it's used before confirming deletion. Unused assets can be deleted directly. * **Delete unused assets** – Click the brush icon in the Assets Panel header to find and remove all unused assets at once. A dialog lists every unused asset so you can review before confirming deletion. This command is also available from the [Command Panel](/university/foundations/commands-and-search). {% hint style="info" %} Assets that are currently used in your project will show a settings gear icon. Attempting to delete them will display a list of all usages so you can review before confirming. {% endhint %} *** ## Pages Panel The Pages Panel offers an overview of the website’s page structure and hierarchy, and it is the last panel on the left side of your canvas, under the Components and Assets Panels. You can use this panel to add new pages to your Webstudio site, set the homepage, rename existing ones, and configure fields for social sharing and search engines. ### Page Folders Organize your pages into collapsible folders for better project management. Right-click in the Pages Panel to create a new folder, then drag pages into it. Folders help keep large projects organized and make navigation easier. *** ## Style Panel The Style Panel is located to the right of the canvas, and you can use it to customize the appearance and layout of a selected instance. It offers access to all CSS properties, visually.
Style Panel
There are three methods for adding styles: 1. Local - By default, the Local icon is active, meaning any styles you apply to that instance are for that instance only. The dot in the middle of the Local icon indicates that it has styles, whereas no dot indicates that there are no styles applied, making it easy to identify which ones have styles applied. Local style source 2. [CSS variables](/university/foundations/css-variables) - Instead of pasting in your colors, sizes, and other styles, you can create a variable for each style and access the variables in each input field. For example, you can define a variable called "color-primary," and in your border color field, you can enter the variable name instead of the color itself. 3. [Tokens](/university/foundations/design-tokens) - These enable reusing groupings of styles across your site. You can either create a new Token and apply styles to it or start with Local and convert it to a Token. Tokens are typically comprised of CSS variables and one-off styles. ### Label colors The style input labels change colors indicating there is a style present. | Label color | What it means | | --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Blue** | This style is on the current Token. | | **Orange** | This style is coming from another source: a Token that is not selected, a state not selected (e.g., you're on hover but the style is local), inherited from a parent instance, or cascaded from another breakpoint. | | **Gray** | This is a Webstudio or browser default style (like font-family: arial). | | **Red** | This style is on the current Style Source, but it’s being overwritten by something else in the Style Source input, such as Local or another Token. | {% hint style="info" %} The order of tokens in the Style Source Input matters. When multiple Tokens have a value for the same property, Tokens toward the end of the list will overwrite Tokens toward the beginning of the list. {% endhint %} *** ## Settings Panel The Settings Panel is on the right side of your canvas. You can use this panel to access and edit component-specific properties (such as ID or class) and [Data variables](/university/foundations/variables) for a selected instance, enabling you to store reusable content and fetch APIs β€” a building block of [CMS](/university/foundations/cms). *** ## Modes [Modes](/university/foundations/modes) change the Builder's behavior, such as previewing your site without distractions.
Mode switcher showing Design and Content modes
*** ## Hide UI Hide UI gives the canvas the full builder workspace by hiding the sidebars, footer, and top bar. It works in any mode, so you can keep using Design, Content, or Preview while the Builder chrome is hidden. Use Hide UI when you want more canvas space while designing, editing content, or previewing a page. Move the pointer to the top edge to temporarily reveal the top bar. You can enable Hide UI from **Menu > View > Hide UI** or with `⌘ + \` on Mac and `Ctrl + \` on Windows.
Builder View menu showing the Hide UI option and keyboard shortcut

Hide UI in the View menu

*** ## Share Dialog The [Share Dialog](/university/foundations/share-links) allows you to create shareable personal links to your Project with varying permissions. *** ## Publish Dialog The [Publish Dialog](/university/foundations/publishing-and-custom-domains) enables you to add a custom domain, publish to Staging and/or your custom domain, and [export your Project](/university/self-hosting). {% hint style="info" %} Publishing currently takes around 45 seconds. During publishing, your Project is built into a JavaScript app and deployed to 300+ servers around the world. {% endhint %} ## Related * [Shortcuts](/university/foundations/shortcuts) – Keyboard shortcuts to speed up building * [Commands & search](/university/foundations/commands-and-search) – Navigate and perform actions quickly * [Design tokens](/university/foundations/design-tokens) – Create reusable style packages * [CSS variables](/university/foundations/css-variables) – Define and reuse style values * [Modes](/university/foundations/modes) – Switch between Design, Content, and Preview modes # Navigator Use the Navigator to view, select, and organize instances on your page. The Navigator is a hierarchical panel on the left side of the builder that shows every instance on the current page as a tree. It reflects the exact nesting structure of your page and is the primary way to select, reorder, and organize instances β€” especially when they are stacked or overlapping on the canvas.
Navigator panel showing a tree of instances

The Navigator showing the page structure

## Selecting instances Click any item in the Navigator to select it. The selected instance is also highlighted on the canvas. Selecting from the Navigator is especially useful for: * Instances that are invisible or have zero size on the canvas * Instances hidden behind other instances * Instances inside a collapsed container ### Select multiple instances You can select multiple sibling instances and edit their shared settings in one operation: * Hold `Command` on macOS or `Ctrl` on Windows and click to add or remove an instance from the selection. * Hold `Shift` and click to select a range. * Press `Shift + Up Arrow` or `Shift + Down Arrow` to extend the selection. * Press `Command + A` on macOS or `Ctrl + A` on Windows to select all siblings of the current instance. Copy, cut, duplicate, delete, and compatible style or settings changes apply to the selection. Webstudio skips instances that cannot accept an operation and keeps the remaining selection intact. ### Link to a selected instance The Builder URL tracks the selected page and instance. Copy the browser URL to share a link that opens the same page and selects the same instance. Webstudio also uses these links for actions such as **Show element** in pre-publish findings. If the instance was removed before the link is opened, the Builder still opens the requested page. ## Renaming instances Double-click any item in the Navigator to rename it. Use descriptive names like "Hero Section" or "Product Card" to make large projects easier to navigate. ## Reordering and nesting Drag items in the Navigator to reorder or re-nest them. This is the most reliable way to restructure deeply nested layouts. You can also move the selected instance or sibling selection with the keyboard: * `Ctrl + Up Arrow` or `Ctrl + Down Arrow` moves it before or after a sibling. * `Ctrl + Left Arrow` moves it out of its parent. * `Ctrl + Right Arrow` moves it into the previous sibling. ## Show / hide Right-click any item in the Navigator to toggle its visibility on the canvas. Hidden instances are still rendered in the published site unless you use a [display condition](/university/foundations/expression-editor#binding) or set `display: none` in the Style Panel. ## Global Root At the top of the Navigator is the **Global Root** β€” the highest level in the instance tree. Styles set here apply to every page in the project. See [Anatomy of the builder](/university/foundations/anatomy-of-the-webstudio-builder#global-root) for a full explanation. ## CSS preview Below the instance tree, the Navigator shows a **CSS Preview** β€” a read-only view of the computed CSS styles applied to the currently selected instance. It is useful for quickly checking what styles are active without opening the Style Panel. ## Related * [Anatomy of the builder](/university/foundations/anatomy-of-the-webstudio-builder) – Overview of all builder panels * [Style panel](/university/foundations/style-panel) – Apply styles to selected instances * [CSS variables](/university/foundations/css-variables) – Define global variables on the root * [Expression editor](/university/foundations/expression-editor) – Conditionally show or hide instances # Layout & Flexbox Learn how to create multi-column layouts and control element positioning using Flexbox in Webstudio. Understanding layout is fundamental to building websites in Webstudio. This guide covers the display modes, Flexbox properties, and best practices for creating responsive layouts. {% embed url="" %} Style Panel Overview & Flexbox Basics {% endembed %} *** ## Display Modes The **Display** property in the Layout section controls how an element and its children are positioned. The main display modes are: | Display | Description | | ---------------- | --------------------------------------------------------------- | | **Block** | Default for boxes. Elements stack vertically, taking full width | | **Flex** | Enables flexible layouts with horizontal/vertical axis control | | **Grid** | Two-dimensional layout system (rows and columns) | | **Inline** | Elements flow inline like text | | **Inline Block** | Inline flow but respects width/height | | **None** | Hides the element completely |
Layout section in the Style Panel showing display mode and flex controls

The Layout section in the Style Panel

*** ## Flexbox Fundamentals Flexbox is the primary tool for creating layouts in Webstudio. When you change display to **Flex**, you gain control over how child elements are arranged. ### Enabling Flexbox 1. Select the **parent** container (the element that holds your items) 2. Go to the **Style Panel** β†’ **Layout** section 3. Change **Display** from `Block` to `Flex` ### Flex Direction Control whether children are arranged horizontally or vertically: * **Row** (default): Items arranged horizontally left to right * **Row Reverse**: Items arranged horizontally right to left * **Column**: Items stacked vertically top to bottom * **Column Reverse**: Items stacked vertically bottom to top ### Alignment Flexbox provides two axes for alignment: | Property | Description | | ------------------- | -------------------------------------------------------------------------- | | **Justify Content** | Aligns items along the main axis (horizontal for row, vertical for column) | | **Align Items** | Aligns items along the cross axis | Common alignment values: * **Start**: Items at the beginning * **Center**: Items centered * **End**: Items at the end * **Space Between**: Equal space between items * **Space Around**: Equal space around items * **Space Evenly**: Equal space including edges ### Gap Add consistent spacing between flex items using the **Gap** property. This is cleaner than adding margins to individual items. ### Flex Wrap By default, flex items try to fit on one line. Enable **Flex Wrap** to allow items to wrap to the next line when they don't fit: 1. In the Layout section, find the **Wrap** toggle 2. Click to enable wrapping 3. Items will now flow to the next line when space runs out {% hint style="info" %} Flex wrap is essential for responsive card layouts. Combined with min-width on cards, they'll automatically stack on smaller screens. {% endhint %} *** ## Common Layout Patterns ### Multi-Column Card Layout {% embed url="" %} Building Your First Section {% endembed %} Structure: ``` Section (semantic tag) └── Container (max-width, centered) └── Cards (flex parent) β”œβ”€β”€ Card β”œβ”€β”€ Card └── Card ``` Steps: 1. Create a **Box** and change tag to `section` 2. Add a **Box** inside as a container (for max-width) 3. Add another **Box** for the cards wrapper 4. Set the cards wrapper to `display: flex` 5. Add **Gap** between cards 6. Enable **Flex Wrap** for responsiveness 7. Add individual **Card** boxes inside ### Centering Content To center a single element both horizontally and vertically: 1. Set parent to `display: flex` 2. Set **Justify Content** to `Center` 3. Set **Align Items** to `Center` ### Navigation Layout For a typical header with logo and nav items: 1. Header container: `display: flex` 2. **Justify Content**: `Space Between` (logo left, nav right) 3. **Align Items**: `Center` (vertically centered) *** ## Sizing Properties ### Width & Height | Property | Description | | -------------- | ---------------------------------- | | **Width** | Fixed width of element | | **Min Width** | Minimum width (won't shrink below) | | **Max Width** | Maximum width (won't grow beyond) | | **Height** | Fixed height of element | | **Min Height** | Minimum height | | **Max Height** | Maximum height | ### Flex Child Properties When an element is inside a flex container, additional properties become available: | Property | Description | | --------------- | -------------------------------------------------------- | | **Flex Grow** | How much the item should grow relative to siblings | | **Flex Shrink** | How much the item should shrink relative to siblings | | **Flex Basis** | Initial size before growing/shrinking | | **Align Self** | Override the parent's align-items for this specific item | *** ## Container Best Practices ### Section + Container Pattern A common pattern for page sections: 1. **Outer Box** (Section tag) * Full width background colors * Vertical padding for spacing 2. **Inner Box** (Container) * `max-width: 1200px` (or your preferred max) * `margin: 0 auto` (centers horizontally) * Horizontal padding for mobile edges This allows backgrounds to extend full width while content stays contained. ### Naming Convention Use clear names for organization: * **Plural** for parent containers: `Cards`, `Features`, `Testimonials` * **Singular** for individual items: `Card`, `Feature`, `Testimonial` *** ## Learning CSS Properties All properties in Webstudio's Style Panel use standard CSS names. To learn more about any property: 1. **Hover** over the property name for a tooltip explanation 2. **Search online** for "CSS \[property-name]" (e.g., "CSS flex-wrap") 3. Resources like [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS) provide detailed documentation {% hint style="info" %} Creating layouts is primarily done through styling, not components. You won't find a "columns" component β€” instead, you create columns by applying flex properties to boxes. {% endhint %} *** ## Visual Indicators The Style Panel uses colors to indicate property states: | Color | Meaning | | ------------ | ------------------------------------------------------------------------- | | **Blue** | Property is set on the current element/token | | **Orange** | Property is inherited from a parent or cascading from a larger breakpoint | | **No color** | Property is using browser default | *** ## Related Resources * [Responsive design](/university/foundations/responsive-design) β€” Working with breakpoints * [Design tokens](/university/foundations/design-tokens) β€” Creating reusable styles * [Custom classes & attributes](/university/foundations/custom-classes-and-attributes) β€” Advanced styling options # Layout & Grid Learn how to create two-dimensional layouts using CSS Grid in Webstudio β€” define columns, rows, named areas, and position child elements visually. > See [MDN: CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) CSS Grid is a two-dimensional layout system that lets you control both columns and rows simultaneously. While [Flexbox](/university/foundations/layout-and-flexbox) excels at one-directional flows, Grid is ideal for complex page structures like dashboards, magazine layouts, and holy grail patterns. *** ## When to Use Grid vs Flexbox | Use case | Recommended | | ---------------------------------------------------- | -------------------------------------------------- | | Horizontal or vertical list of items | Flexbox | | Card grid that wraps responsively | Either (Flexbox with wrap or Grid with `auto-fit`) | | Page-level structure (header, sidebar, main, footer) | Grid | | Precise cell placement and overlapping | Grid | | Named layout regions | Grid | *** ## Enabling Grid 1. Select the **parent** container 2. Go to **Style Panel** β†’ **Layout** section 3. Change **Display** to `Grid` *** ## Grid Generator Click the **grid preview button** at the top of the Layout section to open the Grid Generator. It provides three ways to create a grid: ### Size selector Hover over the interactive cell grid (up to 12 columns Γ— 8 rows) and click to set the number of columns and rows. All tracks are set to `1fr`.
Grid Generator with size selector

Grid Generator size selector

### Presets Six built-in layout presets with visual thumbnails: | Preset | Description | | -------------------- | --------------------------------------------------------------------------------- | | **Fluid sidebar** | Sidebar that shrinks to fit its content alongside a flexible main area | | **Page stack** | Single-column layout with auto-sized header, flexible body, and auto-sized footer | | **Holy grail** | Classic header/sidebar/main/aside/footer layout using named areas | | **Responsive cards** | Auto-wrapping cards that maintain a minimum size | | **Feature section** | Auto-wrapping feature blocks with wider minimum size | | **Footer columns** | Auto-wrapping narrow columns for footer links |
Grid preset thumbnails

Built-in grid presets

### Fill grid Click **Fill grid** to automatically insert child div elements into every empty grid cell β€” useful for quickly populating a layout. *** ## Grid Settings Click **Configure grid** to open the detailed track editor. It contains four collapsible sections:
Grid Settings panel with column and row tracks

Grid Settings β€” column and row track editors

### Columns Define explicit column tracks. Each track shows its value (e.g., `1fr`, `200px`, `minmax(250px, 1fr)`). * Click a track to edit its value in a floating panel * Enable **Use min/max** to set a `minmax()` value with separate Min and Max inputs * Drag tracks to reorder * Use **+** to add a track and **βˆ’** to remove * Hover over a track to highlight it on the canvas ### Rows Same controls as Columns, applied to row tracks. ### Auto columns / Auto rows Configure implicit track sizes for content placed outside the explicit grid (via `grid-auto-columns` and `grid-auto-rows`). These tracks cannot be reordered or added/removed β€” they define the size of any automatically created tracks. ### Areas Manage named grid areas (sets `grid-template-areas` on the container): * Click **+** to add a new named area β€” it automatically finds a non-overlapping position * Click an area to edit its **name** and **position** (column start/end, row start/end) * Use the **visual area picker** to click and drag across grid cells to define the area's span * Occupied areas appear in red; the selected area appears in blue * Hover over an area to highlight it on the canvas
Named grid areas list

Named grid areas

Visual area picker with selected and occupied areas

Visual area picker β€” blue is the selected area, red indicates occupied cells

{% hint style="info" %} Named areas make it easy to position children by name instead of line numbers. Use the **Holy grail** preset to see named areas in action. {% endhint %} *** ## Alignment The Layout section provides alignment controls for distributing items within the grid: ### Visual alignment widget A 3Γ—3 clickable grid that sets **Align items** and **Justify items** simultaneously β€” click a cell to align all children to that position. ### Alignment properties | Property | Axis | Controls | | ------------------- | ------------------- | ----------------------------------------------- | | **Justify items** | Inline (horizontal) | Start, Center, End, Stretch | | **Align items** | Block (vertical) | Start, Center, End, Stretch, Baseline | | **Justify content** | Inline (horizontal) | Start, Center, End, Space Between, Space Around | | **Align content** | Block (vertical) | Start, Center, End, Space Between, Space Around | | **Grid auto flow** | β€” | Row, Column, Row Dense, Column Dense | *** ## Gap Two inputs control spacing between grid tracks: * **Column gap** β€” horizontal spacing between columns * **Row gap** β€” vertical spacing between rows Click the **link icon** between them to keep both values in sync. *** ## Grid Child When you select an element whose parent is a grid container, the **Grid child** section appears in the Style Panel. It controls how the child is positioned within the grid.
Grid Child section with position modes

Grid Child section

### Position modes A toggle at the top switches between three modes: #### Auto The child flows into the next available cell. Set **Column span** and **Row span** to make it occupy multiple tracks. #### Area Select a **named area** from the dropdown to place the child into that region. All four placement properties are set to the area name automatically.
Grid Child in Area mode with area dropdown

Grid Child β€” Area mode with named area dropdown

{% hint style="warning" %} The Area dropdown only lists areas defined in the parent's Grid Settings. If no areas are defined, a message explains how to add them. {% endhint %} #### Manual Set exact grid line numbers for **Column start**, **Column end**, **Row start**, and **Row end**. A **visual area picker** below the inputs lets you click grid cells to set the position interactively. ### Alignment * **Align self** β€” Override the parent's `align-items` for this child (Auto, Start, Center, End, Stretch, Baseline) * **Justify self** β€” Override the parent's `justify-items` for this child (Auto, Start, Center, End, Stretch, Baseline) * **Order** β€” Change the visual rendering order without changing the DOM ### Select parent grid Click the button in the section header to navigate to the parent grid container β€” useful for switching between child and container settings. *** ## Canvas Grid Guides When working with Grid, Webstudio displays an overlay on the canvas showing: * Grid track lines and borders * Track size labels * Named area labels in the top-left cell of each area * Highlighted tracks when hovering over items in Grid Settings
Canvas with grid guide overlay

Canvas grid guides showing track lines, sizes, and area names

*** ## Common Patterns ### Responsive card grid 1. Set display to **Grid** 2. Open the Grid Generator and select the **Responsive cards** preset 3. Add card children β€” they auto-wrap and maintain a minimum width ### Page layout with named areas 1. Set display to **Grid** 2. Select the **Holy grail** preset (creates header, sidebar, main, aside, footer areas) 3. Add children and set each to **Area** mode, selecting the matching area name 4. At smaller breakpoints, redefine the areas or switch to a single-column stack ### Sidebar layout 1. Set display to **Grid** 2. Select the **Fluid sidebar** preset 3. The sidebar column uses `fit-content(300px)` β€” it shrinks to its content but won't exceed 300px *** ## Related * [Layout & Flexbox](/university/foundations/layout-and-flexbox) β€” One-dimensional layout with Flexbox * [Responsive design](/university/foundations/responsive-design) β€” Working with breakpoints * [Design tokens](/university/foundations/design-tokens) β€” Creating reusable styles * [Anatomy of the builder](/university/foundations/anatomy-of-the-webstudio-builder) β€” Overview of all builder panels # Responsive design Learn how breakpoints work in Webstudio to create responsive designs that adapt to any screen size. Webstudio uses a mobile-first approach with customizable breakpoints to create responsive designs. Styles cascade from larger to smaller breakpoints, allowing you to progressively enhance designs for bigger screens. ## Understanding Breakpoints Breakpoints are found at the top of the Style Panel. Each breakpoint represents a screen width range. ### Default Breakpoints * **Base** (β‰₯1280px) - Desktop/large screens * **1280px** - Laptop/medium desktop * **991px** - Tablet landscape * **767px** - Tablet portrait * **479px** - Mobile {% hint style="info" %} You can customize breakpoints in Project settings to match your design needs. {% endhint %} ## Style Cascading Styles cascade **down** to smaller breakpoints: * Styles set on **Base** apply to all breakpoints * Styles set on **991px** apply to 991px and all smaller breakpoints * Each breakpoint can override inherited styles ### Visual Indicators The Style Panel uses colors to show where values come from: | Color | Meaning | | ---------- | ---------------------------------- | | **Blue** | Set on the current breakpoint | | **Orange** | Inherited from a larger breakpoint | Hover over any property label to see exactly where the value comes from, including the breakpoint, token, and instance. ## Common Responsive Patterns ### Flex Direction Change Convert horizontal layouts to vertical on mobile: 1. On Base breakpoint: `flex-direction: row` 2. On mobile breakpoint: `flex-direction: column` ### Show/Hide Elements Display different elements on different screen sizes: 1. Select the element to hide on mobile 2. Go to mobile breakpoint 3. Set `display: none` To show something only on mobile: 1. On Base: `display: none` 2. On mobile: `display: flex` (or `block`) ### Font Size Adjustments Scale typography for readability: * Base: `font-size: 48px` for hero headings * Mobile: `font-size: 32px` ### Container Max-Width Adjust content width per breakpoint: * Base: `max-width: 1200px` * Tablet: `max-width: 100%` with padding ## Important Concepts ### Only Styles Are Affected Breakpoints only affect **styles**. Settings and component configurations are universal across all breakpoints. For example: * Link URLs are the same on all breakpoints * Image sources don't change per breakpoint * Component settings apply everywhere ### Responsive Layout Techniques Use these CSS properties for flexible layouts: * **Flex wrap**: Items wrap to new rows when space is limited * **Gap**: Consistent spacing that works with wrapping * **Percentage widths**: Elements scale proportionally * **Min/max widths**: Set boundaries for flexible sizing ## Workflow Tips 1. **Start from Base** - Design your desktop layout first 2. **Work downward** - Progressively adjust for smaller screens 3. **Use tokens wisely** - Apply breakpoint-specific styles as Local overrides when needed 4. **Test often** - Preview at each breakpoint using the Preview button {% hint style="warning" %} When you select a breakpoint and make style changes, those changes affect the current breakpoint AND all smaller breakpoints (unless overridden). {% endhint %} ## Advanced: Media Conditions Webstudio supports full media query conditions beyond just screen width, enabling designs that respond to device capabilities and user preferences. ### Creating Custom Breakpoints 1. Click on any breakpoint in the Style Panel 2. Click the **+** button to add a new breakpoint 3. Choose from predefined conditions or create custom ones ### Available Media Conditions Select from predefined conditions or type a custom one: | Category | Values | | ------------------ | ------------------------------------------------------------------------------ | | **Orientation** | `portrait`, `landscape` | | **Color Scheme** | `dark`, `light` | | **Reduced Motion** | `reduce`, `no-preference` | | **Contrast** | `more`, `less`, `no-preference` | | **Hover** | `hover`, `none` | | **Any Hover** | `hover`, `none` | | **Pointer** | `coarse`, `fine`, `none` | | **Any Pointer** | `coarse`, `fine`, `none` | | **Display Mode** | `fullscreen`, `standalone`, `minimal-ui`, `browser` | | **Width / Height** | `min-width`, `max-width`, `min-height`, `max-height` (set via the width input) | ### Example: Dark Mode Support 1. Click on any breakpoint in the Style Panel, then click **+** 2. Select **Color Scheme: Dark** from the condition dropdown 3. Give it a label like "Dark" 4. Select this breakpoint and style your dark theme β€” the canvas immediately previews it 5. Your published site automatically adapts to the user's system preference ### Example: Touch Device Styles 1. Create a breakpoint with condition **Pointer: Coarse** 2. Increase tap target sizes (minimum 44Γ—44px) 3. Adjust hover-dependent interactions for touch ### Example: Reduced Motion 1. Create a breakpoint with condition **Reduced Motion: Reduce** 2. Disable or simplify animations for users who prefer less motion 3. Improves accessibility for users with vestibular disorders ### Example: PWA Standalone Mode 1. Create a breakpoint with condition **Display Mode: Standalone** 2. Hide browser-specific navigation elements 3. Adjust layout for the standalone app experience ### Live Preview in the Canvas When you select a condition-based breakpoint, Webstudio **automatically simulates** that condition in the canvas. For example: * Select a **Dark Mode** breakpoint β†’ the canvas immediately shows your dark styles * Select a **Portrait** breakpoint β†’ orientation-specific styles apply * Select a **Reduced Motion** breakpoint β†’ animation changes are visible No extra toggles or settings are needed β€” selecting the breakpoint is enough. When you switch back to a width-based breakpoint, the canvas returns to normal. ### How the Simulator Works The breakpoint simulator dynamically modifies CSS media queries in real-time to preview condition-based styles: * When you select a condition breakpoint, matching media rules are replaced with always-true queries * Non-matching rules are made always-false * This allows you to preview dark mode, reduced motion, and other conditions without changing system settings * Original media queries are automatically restored when you switch to a different breakpoint The simulation affects **only** the builder canvas and does not change your browser, device, or system settings. {% hint style="info" %} The simulation only affects the builder canvas preview. Published sites use the actual media queries and respond to real user preferences and device capabilities. {% endhint %} {% hint style="info" %} Media conditions can be combined. For example, you could create a breakpoint that applies only to small screens in landscape orientation. {% endhint %} ## Related Videos {% embed url="" %} # Breakpoints Add, edit, and manage breakpoints to control how your site responds to different screen sizes and conditions. Breakpoints are found at the top of the builder canvas. They define the screen widths (and other media conditions) at which your site's styles change. Webstudio is **desktop-first by default** β€” Base has no media condition and applies everywhere, and the default breakpoints use max-width to adjust styles as the screen gets smaller. You can change this by adding min-width breakpoints instead, making your project mobile-first. For guidance on how to use breakpoints to build responsive layouts, see [Responsive design](/university/foundations/responsive-design). ## Two types of width breakpoints **Max-width breakpoints** apply styles when the screen is at or below the specified width. This is the **desktop-first** approach β€” you design for large screens first on Base, then add max-width breakpoints to adjust styles as the screen gets smaller. **Min-width breakpoints** apply styles when the screen is at or above the specified width. This is the **mobile-first** approach β€” you design for small screens first, then add min-width breakpoints to adjust as the screen gets larger. You can mix both types in one project if needed. ## Default breakpoints The default breakpoints use the **max-width** (desktop-first) approach: | Breakpoint | Condition | Description | | -------------------- | ------------------ | --------------------------------------------------------------- | | **Base** | None (default) | Applies to all screen sizes β€” the starting point for all styles | | **Tablet** | `max-width: 991px` | Screens 991px wide and below | | **Mobile landscape** | `max-width: 767px` | Screens 767px wide and below | | **Mobile portrait** | `max-width: 479px` | Screens 479px wide and below | ## How styles cascade Styles cascade **in the direction that narrows the match**: * With **max-width** breakpoints: styles flow from Base (largest) downward to smaller breakpoints. A style set on Base applies everywhere; a style on the 479px breakpoint only applies at 479px and below. * With **min-width** breakpoints: styles flow upward. A style set on a 768px min-width breakpoint applies to all screens 768px and wider. Each breakpoint can override styles inherited from the previous one in the cascade. ## Adding a breakpoint 1. Click any breakpoint in the top bar to open the breakpoint menu. 2. Click **+** to add a new breakpoint. 3. Set a **min-width** or **max-width** value, or choose a **media condition** (see below). 4. Give it a label.
Breakpoint edit dialog showing min-width and max-width fields

Editing a breakpoint

## Editing and deleting breakpoints Click any breakpoint to open its settings. You can change the width, label, or media condition. Breakpoints can be deleted unless they are the base breakpoint. ## Custom media conditions Beyond screen width, Webstudio supports any CSS media condition. This lets you style for user preferences and device capabilities: | Category | Conditions | | ------------------ | --------------------------------------------------- | | **Color scheme** | `dark`, `light` | | **Reduced motion** | `reduce`, `no-preference` | | **Orientation** | `portrait`, `landscape` | | **Contrast** | `more`, `less`, `no-preference` | | **Pointer** | `coarse`, `fine`, `none` | | **Display mode** | `fullscreen`, `standalone`, `minimal-ui`, `browser` | ### Example: dark mode 1. Add a breakpoint, select **Color Scheme: Dark**. 2. Label it "Dark". 3. Select it and style your dark theme β€” the canvas immediately previews dark mode. 4. The published site automatically switches based on the visitor's system preference. ### Example: reduced motion 1. Add a breakpoint with condition **Reduced Motion: Reduce**. 2. Disable or simplify animations for affected users. 3. Improves accessibility for users with vestibular disorders. ## Related * [Responsive design](/university/foundations/responsive-design) – How to use breakpoints to build responsive layouts * [Style panel](/university/foundations/style-panel) – Applying styles at each breakpoint ## Style label colors When a breakpoint is active, style property labels in the Style Panel use color to show where a value comes from.
Style Panel property label in orange indicating a style inherited from a larger breakpoint

An orange label means the value is inherited from a larger breakpoint

See \[Label colors]\(anatomy-of-the-webstudio-builder.md#label-colors) for the full reference. Hover any label to see a tooltip with the exact source. {% hint style="warning" %} Mixing `min-width` and `max-width` breakpoints in the same project makes style cascading harder to reason about. Stick to one direction for maintainability. {% endhint %} ## Related * [Responsive design](/university/foundations/responsive-design) – How to build layouts that adapt to different screen sizes * [Style panel](/university/foundations/style-panel) – Apply styles at the selected breakpoint * [Label colors](/university/foundations/anatomy-of-the-webstudio-builder#label-colors) – Full reference for property label colors * [Project settings](/university/foundations/project-settings) – Breakpoints can also be managed via Project settings # CSS variables CSS variables allow you to attach a value to a variable and reuse that variable throughout the Style Panel inputs. {% hint style="info" %} **Hint:** [Data variables](/university/foundations/variables) are different than CSS variables. They enable the reuse of data in the Settings tab. {% endhint %} {% embed url="" %} Why Use CSS variables? * **Consistency** – Define a value once, like a color, and access that variable in every style input field. * **Speed** – Design quickly by selecting predefined variables from autocomplete. * **Experimentation** – Arrow through autocomplete and get real-time rendering of that variable to see which value looks best in your design. * **Parent-child interactions** – Have full control over the styles of all child instances when interacting with the parent. ## CSS variables vs. Tokens The concept of β€œreusability” is present in both CSS variables and [Tokens](/university/foundations/design-tokens), but they are different and complement each other exceptionally well. Let’s think of these two concepts as layers or building blocks. ### Layer 1: CSS variables **CSS variables are the bottom layer. They comprise individual variable names and values** often used for sizes, colors, and other styles with many input options. For example, you can create one variable per color in your design system. Those colors are going to be used throughout your site and in Tokens. ### Layer 2: Tokens [**Tokens**](/university/foundations/design-tokens) **are the next layer. They package up *****multiple***** styles.** A `Card` Token may include padding, color, and gap styles, for example. The values you enter for each style should be defined as variables. This approach ensures consistent designs and allows you to update a value in one place, with the change automatically reflected wherever the variable is used. With CSS variables, Tokens now often take a more semantic approach, such as calling them `Card`, `Team Member`, or `Testimonial`. Without CSS variables, Tokens were a blend between semantic and utility, such as `padding-medium`, `font-size-small`, and `Card`. {% hint style="info" %} **Tip:** While some utility Tokens will still be present, the majority of Tokens should be semantic. {% endhint %} ## Creating variables {% hint style="warning" %} Before you create custom variables, be sure to check out [Craft](/university/craft) β€” the standard guideline for building with Webstudio. It contains a library of expertly crafted CSS variables. {% endhint %} A CSS variable is defined in the Advanced section by using two dashes followed by the variable name, like this: ```css --gray-5 ``` {% hint style="info" %} This syntax is not unique to Webstudio. It’s the official [CSS variable](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) syntax. {% endhint %} Then, the variable's value can be anything such as a color, gradient, duration, size, or number.
CSS variable

Creating a variable and assigning a value

## Using variables Once the variable is defined, you can use it on the instance it was defined on and any of its children. The variables are available in the autocomplete, so you can access variables by typing them in.
Using a CSS variable
The autocomplete search algorithm is very flexible, letting you search by any of the following: * `--` * `var` * `gray` (variable name) You can search any part of your variable, and autocomplete will show you the proper results. {% hint style="info" %} The syntax for *displaying* a variable is`var(--my-var)`, though it's much faster to search using `--`. Webstudio automatically handles the conversion to ensure proper output. {% endhint %} ### Using data to set CSS variables The common pattern is to generate a ``; ``` ```js // entire CSS string from a JSON field ``; ``` The `${}` expressions can reference any value accessible in the Expression editor, including nested properties and ternary logic. The second form is useful when an API returns a single string containing multiple declarations. > *Note:* you don’t need any special escaping; `dataVariables.variables` uses the standard JavaScript syntax to refer to a nested field. Since the HTML Embed evaluates whenever its dependencies change, the resulting `