🛠️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.
Last updated
This guide discusses the anatomy of the Webstudio Builder, an all-in-one visual development platform that allows you to build advanced websites.
Last updated
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.
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.
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.
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 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 and change max-width queries to min-width so styles cascade up.
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.
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.
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.
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.
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.
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.
The style input labels change colors indicating there is a style present.
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.
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.
The Preview Mode allows you to review and interact with your website before making it live on the web. This mode is great for quickly checking your website, especially without the editor interfering.
The Share Dialog allows you to create a shareable personal link to your Project. You can set your link to have “View” or “Build” permissions depending on what level of access you wish to provide.
If you set your shared custom link to “View” mode, anyone with the link can view your site and clone it, but any changes they make inside the builder will not be saved.
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.
To learn more, see publishing on Webstudio.
| 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.
