For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
Resources
Get started
ReferenceGuidesExamplesChangelog
ReferenceGuidesExamplesChangelog
  • Designer API
    • Introduction
    • Getting Started
    • Webflow CLI
    • Error Handling
    • App Modes
  • Elements
    • Creating & Retrieving Elements
    • Element Properties & Methods
    • Element Types & Methods
  • Styles
    • Managing Style Properties
    • Managing Variable Modes
  • Components
  • Variables & Collections
    • Variable Collections
    • Variables
    • Variable Modes
  • Assets
  • Pages & Folders
  • Utilities
    • User Events & Notifications
      • Send notification to user
      • User selects element
      • User changes breakpoint
      • User changes current page
      • User changes CMS Page
      • User changes Designer mode
      • User changes Designer pseudo-state
      • User changes variant
    • App Intents & Connections
  • Additional Resources
    • API Playground
    • FAQs
LogoLogo
Resources
Get started
On this page
  • webflow.subscribe("pseudomode", callback)
  • Syntax
  • Parameters
  • Returns
UtilitiesUser Events & Notifications

User changes pseudo mode of Designer

Was this page helpful?
Previous

User changes variant (Beta)

Next
Built with

webflow.subscribe("pseudomode", callback)

Use this method to start listening for when a user changes the pseudo-state of the Designer.

Syntax

1webflow.subscribe(
2 event: "pseudomode",
3 callback: (pseudoState: PseudoStateKey) => void
4): Unsubscribe;
Pseudo-State Key Values
Pseudo-StateDesigner StateDescription
hoverHoverElement is hovered over by the mouse
pressedPressedElement is in pressed state
visitedVisitedLink element has been visited
focusFocusedElement has keyboard/input focus
focus-visibleFocused (Keyboard)Element has keyboard focus with visible indicator
focus-within—Element or its descendant has focus
placeholderPlaceholderPlaceholder text in form block inputs
first-childFirst ItemFirst Collection Item in a collection list
last-childLast ItemLast Collection Item in a collection list
nth-child(odd)Odd ItemsOdd-numbered Collection Item in a collection list
nth-child(even)Even ItemsEven-numbered Collection Item in a collection list

Parameters

  • event: "pseudomode" - The event to listen for.
  • callback: (pseudoState: PseudoStateKey) => void - The callback function to execute when the event occurs. The pseudoState parameter is the new pseudo-state of the Designer.

Returns

Return Value

Unsubscribe

This is a special function you receive after subscribing. When you no longer want to listen to the event, call this function to stop receiving notifications.

Example

1// Subscribe to changes in the pseudo state
2const pseudoStateCallback = (pseudoState: PseudoStateKey) => {
3 console.log('Pseudo State:', pseudoState);
4}
5
6const unsubscribePseudoState = webflow.subscribe('pseudomode', pseudoStateCallback);

Try this example

Designer Ability

Designer AbilityLocaleBranchWorkflowSitemode
canAccessCanvasAnyAnyAnyAny