🛠️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.
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.
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 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.
Global Root uses the:root CSS selector under the hood.
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.
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.
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.
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.
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.
Components Panel
The Components Panel contains a list of all available 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. For example, the Text section has all typography-related components, while the Form section nests the building blocks of a form.
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.
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.
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.
There are three methods for adding styles:
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.
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.
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.
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.
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.
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 for a selected instance, enabling you to store reusable content and fetch APIs — a building block of CMS.
Modes
Modes change the Builder’s behavior, such as previewing your site without distractions.
Share Dialog
The Share Dialog allows you to create shareable personal links to your Project with varying permissions.
Publish Dialog
The Publish Dialog enables you to add a custom domain, publish to Staging and/or your custom domain, and export your Project.
Publishing currently takes around 45 seconds. During publishing, your Project is built into a JavaScript app and deployed to 300+ servers around the world.
Related
Shortcuts – Keyboard shortcuts to speed up building
Commands & Search – Navigate and perform actions quickly
Design Tokens – Create reusable style packages
CSS Variables – Define and reuse style values
Modes – Switch between Design, Content, and Preview modes
Last updated
Was this helpful?