Designer Tour

This content was generated with the assistance of AI and should be verified against the official Webflow documentation before being relied on in production.

This sub-section’s Webflow bibliography lists the reference material consulted while preparing these pages.

This page was written against the Webflow Designer as it was on 2026-10-28. Webflow is a hosted service without version numbers, so the Designer changes continuously and a button can move between two visits; the dates in the text say when something appeared or changed, and https://webflow.com/updates and the developer changelog are where changes are announced. The Designer itself is available on every plan, including the free Starter Site plan inside a Starter Workspace, so everything on this page can be tried without paying. A few items need a paid plan and say so where they appear: real-time collaboration needs a Workspace with several seats, and the publishing-related items shown in the Designer depend on the Site plan. The developer examples use the Designer API typings package @webflow/designer-extension-typings 2.2.2 and run on a Developer workspace site.

The Designer is where a site is built visually. Webflow turns every action in it into HTML, CSS and a little JavaScript, and publishes the result to its hosting. This page is a map of the Designer: what is on the screen, what each panel does, how the canvas relates to the code that is published, and how several people work in it at the same time. The following pages go deep into each area (elements, the Style panel, classes, breakpoints, variables, components, interactions, the CMS); this page explains where they live.

The running example is the Fernbrook Gardens site, a fictitious botanical garden. The tour follows one small job: opening the Home page of the Fernbrook site, finding a heading, restyling it on the tablet breakpoint and checking the result.

Who uses the Designer

  • The designer builds pages, classes, variables and components, and is the main user of everything on this page.

  • The site owner and the marketer open the Designer to edit text, images, CMS-driven pages and SEO settings, usually in Edit mode.

  • The content editor works mostly on the canvas in Edit mode, because the standalone Editor of earlier years was fully deprecated on 2026-10-05 and editing now happens on the canvas.

  • The reviewer (formerly "Commenter") opens the canvas to read and leave comments.

  • The developer uses the Designer to inspect the markup that is generated, to embed custom code, and as the host of Designer Extensions, which are small apps that run inside it (see the section on the Apps panel).

Which of these a person can do depends on the seat and role they hold in the Workspace and the site. Seats and roles are described in Plans, Workspaces, Seats and Roles.

Supported browsers

The Designer is a web application and runs in the browser. Chrome and Safari are the supported browsers, while Firefox and Edge are described by Webflow as experimental. Chrome is the safest choice for long sessions, and it is the browser used for the examples of this site. Browser extensions that inject scripts or restyle pages (ad blockers, grammar checkers, dark-mode extensions) are the most frequent cause of a Designer that loads slowly or shows broken panels, so the first step when the Designer misbehaves is to try a clean profile or a private window.

The published site is a different matter: it is plain HTML, CSS and JavaScript and works in any modern browser. Only the building tool is limited to the browsers above.

The screen at a glance

flowchart TB TOP["Top bar: page switcher, breakpoint bar, mode switch, Publish, Share and Invite"] subgraph MAIN["Working area"] direction LR LEFT["Left bar: Add, Navigator, Pages, Assets, Components, Variables, Libraries"] CANVAS["Canvas: the page being built"] RIGHT["Right bar: Style, Settings, Interactions, Audit, Apps"] end BOTTOM["Bottom bar: breadcrumb of the selected element and its state"] TOP --> MAIN MAIN --> BOTTOM

The diagram is a schematic and does not reproduce any screenshot. The layout has been stable since the Designer redesign announced on 2023-10-05: a top bar with the page and breakpoint controls, a narrow left bar whose icons open panels that float over the left edge of the canvas, a right bar for the properties of the selection, the canvas in the middle and a breadcrumb at the bottom. Individual icons have been rearranged since then (the Variables and Libraries entries are two examples), so look up a panel by its name in Quick find rather than by its position.

Source: Webflow updates: the product changelog

The canvas

The canvas is the live rendering of the page in a frame whose width follows the selected breakpoint. It is not a mock-up: it renders the real elements with the real CSS, so what appears there is what the published page will look like at that width. Three limits are worth knowing from the start.

  • Custom code does not run on the canvas. Scripts in the site or page custom code and in Code Embeds are not executed while designing; they run in Preview mode on a *.canvas.webflow.com host and on the published site. Interactions that depend on those scripts therefore cannot be judged while editing.

  • The canvas shows the Designer’s state, not the published state. A page that has been edited and not published looks different on the canvas and on the live site until the next publish.

  • Zoom is a canvas feature, not a style. Zooming the canvas to see a wide layout does not change any value of the page.

Selecting an element draws a blue outline around it, shows a small label with its name (the class name, or the element type when it has no class) and populates the right-hand panels with its properties. Double-clicking text edits it in place. Dragging an element from the Add panel onto the canvas shows a drop indicator that tells whether the element will be placed before, after or inside the element under the pointer; the same operation is more precise in the Navigator.

The five modes

The Designer has modes that change what the canvas lets you do. The mode switch is in the top bar and the current mode decides which panels are available.

Mode What it is for Typical user

Design

The full builder: all panels, structural changes, styles, components, variables, interactions and settings

Designer

Build

The Design toolset with the panels reduced to those needed to assemble pages from existing components and classes

Designer, marketer

Edit

Changing content on the canvas without access to structure or styles: text, images, links, CMS item fields and some component props

Content editor, marketer, site owner

Preview

Interacting with the page as a visitor would, with interactions and custom code running, on the *.canvas.webflow.com preview host

Anyone

Comment

Pinning comments to elements and CMS content and replying to them; the canvas becomes read-only

Reviewer, anyone with access

Which modes a person sees depends on their role: a Content editor cannot switch to Design, and a Reviewer sees Comment and Preview. Roles are defined at the Workspace and the site level and are described in the plans page of this sub-section.

Edit mode replaced the standalone Editor. Content editors used to open a separate interface (the Editor) to change copy; that interface was fully deprecated on 2026-10-05. Tutorials that tell a client to "log in to the Editor" are outdated: the client opens the site in the Designer, in Edit mode, with an Editor-type seat (Content editor).

Source: Webflow University: Designer courses

The breakpoint bar and the breakpoint canvas

The top bar contains the breakpoint buttons. The Desktop breakpoint is the base: styles set there apply to every width unless a breakpoint overrides them. Smaller breakpoints cascade down: a rule set on Desktop is inherited by Tablet, Mobile landscape and Mobile portrait unless overridden. Larger breakpoints (1280, 1440 and 1920 pixels) cascade up and are added on demand; once a larger breakpoint is added it cannot be removed from that site.

Breakpoint Width Media query Webflow writes Inherits from

Desktop (base)

no query

none: the base rule

none

Tablet

991 px and below

@media screen and (max-width: 991px)

Desktop

Mobile landscape

767 px and below

@media screen and (max-width: 767px)

Tablet

Mobile portrait

478 px and below

@media screen and (max-width: 478px)

Mobile landscape

1280

1280 px and above

@media screen and (min-width: 1280px)

Desktop

1440

1440 px and above

@media screen and (min-width: 1440px)

1280

1920

1920 px and above

@media screen and (min-width: 1920px)

1440

The breakpoint canvas announced at Webflow Conf 2026 (1 to 3 September 2026) is the most recent change to this area: instead of switching the frame with the buttons, the canvas can show several breakpoints side by side, so a change can be judged at different widths at once. It is rolled out gradually, so a site may still show the single-frame canvas.

When a property is overridden at a breakpoint, the Style panel marks it with a coloured label (blue for a value set on the selector and breakpoint being edited, and orange for a value inherited from a parent element, another class or a wider breakpoint). Reading those labels is the quickest way to find out why an element looks different at a given width.

The generated CSS for the job of the tour, restyling the Fernbrook heading on Tablet, looks like this:

/* Base (Desktop) rule written when the heading was styled on Desktop */
.heading-hero {
  font-size: 64px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* Written when the same class is edited with the Tablet breakpoint selected */
@media screen and (max-width: 991px) {
  .heading-hero {
    font-size: 44px;
  }
}

Source: Webflow Help Center: Variables

The Tablet rule changes only font-size. The line-height and letter-spacing are inherited from the base rule, which is why the Style panel shows them in the lighter "inherited" colour on Tablet. Breakpoints are covered in detail in Responsive Design and Breakpoints.

Quick find

Quick find (Cmd+E on macOS, Ctrl+E on Windows and Linux) is a command palette that searches across the Designer. It finds elements on the page, pages, classes, components, variables, assets, CMS Collections and settings, and it runs commands such as opening a panel or switching a mode. It is the fastest way to move around a large site and the recommended way to find a panel whose icon has moved. Typing a class name selects the first element that uses it, which is useful when a class is used in many places and the Navigator is long.

The left bar

The left bar holds the panels that deal with what the site is made of.

Add panel

The Add panel is the catalogue of elements that can be dropped on the canvas: layout elements (Section, Container, Div Block, Quick Stack, Grid, V Flex, H Flex), basic elements (Heading, Paragraph, Text Link, Button, Image, Rich Text, List, Block Quote), forms, media (Video, YouTube, Lottie, Spline, Rive), CMS elements (Collection List, Dynamic elements), ecommerce elements when the site has Ecommerce, and components from the site and its shared libraries. Elements are described in Elements and Page Structure. The panel has a search box, and the same search is available in Quick find.

Dropping a Section element from the Add panel on the Fernbrook Home page writes an element with a default class:

<section class="section">
  <div class="w-layout-blockcontainer container w-container">
    <h1 class="heading-hero">Open every day of the year</h1>
  </div>
</section>

Source: Webflow University: Designer courses

The class w-container and w-layout-blockcontainer are Webflow’s own classes. They come from webflow.css, the stylesheet that Webflow serves with every published site, and they should never be renamed or redefined in custom CSS.

Navigator

The Navigator shows the page as a tree: every element in document order, nested as in the HTML. It is the place to select an element that is hidden, covered by another one or too small to click, to reorder elements by dragging, to rename elements (a renamed element keeps its class but gets a friendlier label in the tree), to show or hide an element in the Designer only, and to see at a glance which elements carry a class, a combo class, a component instance or a CMS binding. Right-clicking an element in the Navigator opens the same context menu as on the canvas: wrap in, group, convert to component, copy and paste styles, and delete.

The label the Navigator shows is not part of the published page. Only the tag, the classes and the attributes are published, so a Navigator tree is a design-time convenience.

Pages panel

The Pages panel lists the static pages and the template pages of the site. Static pages (Home, Visit, About) are organised in folders, which become URL path segments. Template pages, one per CMS Collection, are shown under the Collection name and render one page per item. The panel also lists the utility pages (404, Search, Password and, on sites with Ecommerce, the checkout pages) and has a Settings gear per page, which opens the page settings: name, slug, SEO title and description, Open Graph, custom code and password protection. Creating, duplicating, reordering and folder-organising pages is done here.

For Fernbrook, the panel holds the Home, Visit, Plants, Events, Shop, Garden Journal, About and 404 pages, and the Plants, Events and Journal template pages. The page settings, the SEO fields and the redirects are described in the site-settings pages of this sub-section.

Assets panel

The Assets panel is the library of the site’s uploaded files: images, videos, documents and fonts used in custom code. It supports folders, search, bulk upload and bulk delete, and it shows where an asset is used. Webflow stores uploaded images and can serve a converted AVIF or WebP version when the browser supports it, adds responsive srcset variants, and lazy-loads images by default. Alt text is edited here (the asset’s own alt text) and on each Image element, and the Audit panel reports missing alt text. The asset pipeline is covered in the images and media page of this sub-section.

Components panel

The Components panel lists the components of the site. A component (the name since the 2022 rename of Symbols to Components) is a reusable group of elements that you edit once and that updates in all its instances. A component can define props that expose editable values (text, image, link, visibility), slots that accept arbitrary child elements, and style variants (since 2026) that change appearance on a per-instance basis. Opening a component enters component editing, and the Component Canvas shows the component in isolation, with all its variants, on a surface of its own.

For Fernbrook the panel holds PlantCard, EventBanner and SiteHeader. Using a component on a page looks like this in the published HTML, which is identical in markup to elements that had been placed by hand:

<div class="plant-card w-variant-compact">
  <img src="https://cdn.prod.website-files.com/placeholder/lavender.avif" alt="Lavender in flower" class="plant-card_image" loading="lazy">
  <h3 class="plant-card_name">Lavender</h3>
  <a href="/zones/zone-6" class="plant-card_zone">Zone 6</a>
</div>

Source: Designer API: Introduction

The variant class shown is illustrative; the exact class names Webflow writes for a style variant can differ. A component leaves no trace in the published markup, which is plain HTML. Components are described in Components, Props, Slots and Variants.

Variables panel

The Variables panel (a compact icon below the Components panel) manages variables: reusable values for colours, sizes, fonts, numbers and percentages, organised in collections. A collection can have modes, for example a "Day" and a "Night" mode of the Fernbrook brand collection, and the panel is where values are edited and where aliases between variables are created. Variables are applied from any field of the Style panel that has the variable picker, and they are published as CSS custom properties. Function variables (calc, clamp, min, max and color-mix) build derived values. The details are in Variables and Modes.

The following is what a brand collection with two modes writes to the published CSS. The names are the Fernbrook ones; the exact variable names Webflow writes depend on the collection name and the variable name:

:root {
  --brand--leaf: #2f6b3a;
  --brand--bloom: #c2477a;
  --brand--paper: #fbf8f1;
}

/* A manual mode is applied by adding a class on any ancestor element */
.night {
  --brand--leaf: #8fd19e;
  --brand--bloom: #f08bb6;
  --brand--paper: #14231a;
}

Source: Webflow Help Center: Variables

Libraries panel

The Libraries panel manages shared libraries: sets of components and variables published from one site (the library site) and installed on other sites, so that a design system can be maintained in one place. Installing a library makes its components and variables available in the Add, Components and Variables panels of the consuming site, and the library site’s owner publishes updates that each consuming site then accepts. Older material that talks about "Symbols shared between sites" refers to a feature that libraries replaced. Libraries are covered in the design-system pages of this sub-section.

The right bar

The right bar holds the panels that deal with the selected element or the site as a whole.

Style panel

The Style panel is where most of the visual work is done. It opens on the element selected on the canvas and has sections that group the CSS properties: Layout (display, flex and grid settings), Spacing (margin and padding), Size (width, height, min, max, overflow, aspect ratio, object fit), Position, Typography, Backgrounds, Borders, Effects (opacity, shadows, filters, transforms, transitions, cursor, blend modes), and an Accessibility section that sets ARIA attributes on some elements. Each field is a CSS property: typing 20px in the font-size field writes font-size: 20px on the selector shown at the top of the panel, not on the element.

That distinction is the core of working in the Designer. The panel edits one selector at a time, and the selector is chosen in the Style selectors section at the top of the panel. If the selector is a class, all elements with that class change, which is exactly the point of classes and also their main danger: editing a class that is used in twenty places changes twenty places. The panel shows a count of how many elements use the selected class, so check it before a bulk change. The Style panel is documented in The Style Panel and the Box Model.

Style selectors

The Style selectors section at the top of the Style panel decides where a style is written. It shows the classes of the selected element and a state dropdown, and it supports the following selectors:

  • a class (.heading-hero), shared by every element that has it

  • a combo class (.heading-hero.is-small), a class added on top of another, which overrides it only when both are present

  • an element (tag) selector such as h1 or a (the "All H1 Headings" option), which styles every element of that tag on the site

  • a state, such as hover, pressed, focused, focus-visible, focus-within, visited, or the CMS-only states for current page links

  • a nested selector, such as .nav-link + .nav-link, descendant and sibling combinators, with a UI to build them

Four states (hover, pressed, focused and visited) have been available for years; the more detailed focus states (focus-visible and focus-within) matter for accessibility, because they control whether keyboard users see a focus ring. Classes, combos and the selectors above are covered in Classes, Combo Classes and Selectors.

The three selectors in the following CSS are the output of three different choices in this section for the Fernbrook heading:

/* Selector: class heading-hero (default state) */
.heading-hero { color: var(--brand--leaf); }

/* Selector: class heading-hero, state Hover */
.heading-hero:hover { color: var(--brand--bloom); }

/* Selector: combo class heading-hero + is-small */
.heading-hero.is-small { font-size: 28px; }

Source: Webflow University: Designer courses

Settings panel

The Settings panel is the element settings panel (not the site settings, which live in the Workspace dashboard). It shows what the selected element needs that is not a style: the link target of a link, the source and alt text of an image, the tag of a heading (h1 to h6), the ID, the custom attributes, the visibility (the "Visibility on page load" option removes the element from the layout), and the CMS bindings of an element inside a Collection list or on a template page. Custom attributes are written to the element exactly as typed, which makes this panel the place to add aria-label, data-* attributes, rel values and similar.

<a href="/visit" class="button" aria-label="Plan your visit to Fernbrook Gardens" data-analytics="visit-cta">Plan your visit</a>

Source: Webflow University: Designer courses

Prefer data-* hooks and a script in custom code to inline event-handler attributes such as onclick, which are hard to maintain and weaken a Content Security Policy.

Interactions panel

The Interactions panel is where animations and interactions are created. Interactions with GSAP became the default for new sites with its launch in July 2025, after Webflow acquired GSAP in October 2024 and made it free in April 2025. The panel lists interactions by trigger (click, hover, page load, scroll into view, scroll through a page, mouse move) and edits the timeline of each one. Classic Interactions (IX2) remain on older sites and cannot be used in the same site as the GSAP-based ones on the same element, and real-time collaboration is not compatible with them (see the section on collaboration). Interactions are covered in Interactions with GSAP.

Audit panel

The Audit panel lists problems the Designer can detect in the current page or the whole site: missing alt text on images, empty links, heading-level skips, missing form labels, low colour contrast, unused classes and unnamed elements. Clicking an entry selects the offending element on the canvas. It is the Designer’s built-in accessibility and cleanliness check, and it should run before every publish. It does not replace testing with a keyboard and a screen reader, and it does not check anything that depends on custom code. Accessibility is covered in a dedicated page of this sub-section.

Apps panel

The Apps panel lists the Webflow Apps installed on the site and opens the ones that provide a Designer Extension. A Designer Extension is a small web application, packaged as a bundle with a size limit, that Webflow serves in an iframe inside the Designer and that talks to the Designer through the Designer API. Fernbrook uses the Plant Label Kit Designer Extension developed on this site: it reads the selected PlantCard and prepares a printable label. The Designer API is the same one used by the AI-agent tooling that can act on the live Designer. Developing such an app is described in the developer pages of this sub-section.

A minimal Designer Extension that reacts to the selection (TypeScript, with @webflow/designer-extension-typings 2.2.2):

// The global `webflow` object is provided by the Designer to the extension's iframe.
async function showSelection(): Promise<void> {
  const element = await webflow.getSelectedElement();
  if (element === null) {
    await webflow.notify({ type: "Info", message: "Select an element first" });
    return;
  }
  await webflow.notify({ type: "Success", message: `Selected a ${element.type}` });
}

// Run once, and again whenever the selection changes.
void showSelection();
webflow.subscribe("selectedelement", () => void showSelection());

Source: Designer API: Introduction

Reading the Designer through the HTML it writes

The quickest way to understand the Designer is to relate each part to what it emits. The following table maps the screen areas to the published output.

Area of the Designer Written to the published site Stays in the Designer only

Canvas elements

HTML tags, classes, attributes and text

Navigator labels, hidden-in-Designer flags

Style panel

CSS rules in the site’s generated stylesheet

Colour labels showing inheritance

Style selectors

Selectors: classes, combos, tag selectors, pseudo-classes

The "used by N elements" counter

Variables

CSS custom properties and var() references

Collections and mode names

Components

The markup of each instance

The component definition and its props

Interactions

Data attributes plus a script that runs GSAP

The timeline editor

Settings panel

Attributes such as href, alt, aria-*, data-*

Comments and the page settings UI

Pages panel

One HTML file per page and the sitemap

Folder organisation in the panel

The published CSS is generated per site, minified when the publishing option is on, and served together with webflow.css, the base stylesheet with the w-* classes. The published JavaScript includes webflow.js and jQuery for interactions and widgets such as Tabs and Slider. Custom code is added in the head, the footer and Code Embeds as described in the custom-code pages of this sub-section.

Collaboration in the Designer

Several people can have the same site open at once. With real-time collaboration, the changes of one user are shown to the others as they happen, instead of the older model in which the last person to save overwrote the others.

  • Up to 25 users can be in the same site at the same time.

  • Each user is shown with a coloured outline and name on the element they have selected, and a presence indicator in the top bar. Agent Presence, generally available since 2026-10-21, shows an AI agent acting through the MCP server in the same way.

  • Real-time collaboration is incompatible with Classic Interactions, which must be converted or removed first, and with comments.

  • Text is synced when the editor clicks out of the text box, not as each character is typed, so two people typing in the same paragraph can overwrite one another’s text.

  • It needs a Workspace with more than one seat; on a Starter Workspace with one seat there is nobody to collaborate with.

When a conflict still happens (for example two people editing the same style at once), the later change wins, and the activity log of the site records who changed what. Page branching, which is a way to work on a page in isolation and merge it back, is covered together with the publishing workflow in the publishing pages. Real-time collaboration, comments and the activity log are described in Collaboration, Comments and the Activity Log.

Keyboard shortcuts

The Designer has dozens of shortcuts, and the full list is available from the Help menu (the question-mark icon) of the Designer, which is always current. These are the ones to learn first. On Windows and Linux, replace Cmd with Ctrl.

Shortcut Action

Cmd+E

Open Quick find

Cmd+Z

Undo

Cmd+Shift+Z

Redo

Cmd+C, Cmd+X, Cmd+V

Copy, cut and paste the selected element

Delete or Backspace

Delete the selected element

Arrow keys

Move the selection in the Navigator tree

C

Comment mode (the comments shortcuts are C and Shift+C)

Esc

Deselect, close a panel or close a dropdown

Webflow also lets you hold Option (Alt) while adjusting a spacing value to change both sides at once, and shows the shortcut for each panel in the tooltip of its icon, which is the reliable source when a key changes.

Source: Webflow University: Designer courses

Working with the Designer: a short session

The job of the tour: restyle the Fernbrook heading on Tablet.

  1. Open the site from the Workspace dashboard with Open Designer. The Designer loads the last page opened.

  2. Press Cmd+E and type Home to switch to the Home page. Quick find lists the page.

  3. In the Navigator, expand Section, Container and select the heading. The bottom breadcrumb shows Body > Section > Container > Heading.

  4. In the top bar choose the Tablet breakpoint. In the Style selectors check that the selector is the class heading-hero and that the state is None.

  5. In the Typography section, set font size to 44px. The label turns blue for the field, because the value is now set on this class at this breakpoint.

  6. Open the Audit panel. If it lists the heading skipping a level, change the tag in the Settings panel.

  7. Switch to Preview mode to see the result as a visitor, then publish from the top bar when the page is ready.

This session touched the canvas, the breakpoint bar, Quick find, the Navigator, the Style panel, the Settings panel and the Audit panel, and wrote the Tablet media query shown earlier.

Common mistakes and pitfalls

  • Editing a class when you meant one element. Always read the selector and the "used by" counter before changing a value. Use a combo class or a new class for a variation.

  • Styling on the wrong breakpoint. If a value looks right on Desktop and wrong on mobile, check the breakpoint label before changing anything; the fix is usually on a narrower breakpoint, not on Desktop.

  • Judging scripts on the canvas. Custom code and some interactions do not run on the canvas, so use Preview mode before concluding that a script is broken.

  • Relying on Navigator names. They are not published. Use classes and IDs for anything that code needs to find.

  • Leaving Classic Interactions in a collaborative site. Real-time collaboration does not work with them, and the Designer will say so when the site is opened by more than one person.

  • Treating the Designer as a security boundary. A Designer seat can see and edit the site’s custom code. Give seats by role, and keep secrets (API tokens, signing keys) out of custom code altogether, because anything in the head or footer code is public in the published page.

Corrections to older tutorials

Ali Rushdan Tariq’s Webflow by Example (Packt, 2021) predates the current Designer. Its tour of the interface describes the pre-2023 layout, with panels that have since been renamed and moved, and speaks of a "project" where Webflow now says "site". It describes the Editor as the place for content changes, which is gone, and it shows Symbols, which are now Components. Its concepts (the box model, inheritance, planning the layout before building) remain valid, but its click paths do not match the screen of 2026.

References