# Anatomy of the Webstudio builder *** {% 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.

*** ## 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](https://docs.webstudio.is/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 %}

*** ## 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 %}

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](https://docs.webstudio.is/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](https://docs.webstudio.is/university/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. * **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](https://docs.webstudio.is/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.

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](https://docs.webstudio.is/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](https://docs.webstudio.is/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](https://docs.webstudio.is/university/foundations/variables) for a selected instance, enabling you to store reusable content and fetch APIs — a building block of [CMS](https://docs.webstudio.is/university/foundations/cms). *** ## Modes [Modes](https://docs.webstudio.is/university/foundations/modes) change the Builder’s behavior, such as previewing your site without distractions.

*** ## Share Dialog The [Share Dialog](https://docs.webstudio.is/university/foundations/share-links) allows you to create shareable personal links to your Project with varying permissions. *** ## Publish Dialog The [Publish Dialog](https://docs.webstudio.is/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](https://docs.webstudio.is/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](https://docs.webstudio.is/university/foundations/shortcuts) – Keyboard shortcuts to speed up building * [Commands & search](https://docs.webstudio.is/university/foundations/commands-and-search) – Navigate and perform actions quickly * [Design tokens](https://docs.webstudio.is/university/foundations/design-tokens) – Create reusable style packages * [CSS variables](https://docs.webstudio.is/university/foundations/css-variables) – Define and reuse style values * [Modes](https://docs.webstudio.is/university/foundations/modes) – Switch between Design, Content, and Preview modes --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.webstudio.is/university/foundations/anatomy-of-the-webstudio-builder.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.