Attribute Class Enhancer for Webflow

About

Attribute Class Enhancer for Webflow is a specialized developer tool designed to supercharge your workflow inside the Webflow Designer. When working with complex Webflow builds, custom elements, CMS-bound elements, or component properties, you often need to define class names within the custom attributes field. By default, this is a plain text input. This extension upgrades that experience by bringing Webflow's native class auto-complete functionality directly into the custom attributes panel.

Key Features:
- Smart Auto-Complete: Automatically detects when you are editing a custom attribute named class and provides a dropdown list of all existing CSS classes in your Webflow project.
- Real-time Search: Quickly filter through hundreds of project classes with a fast, built-in search input within the popup.
- Seamless UI Integration: The searchable dropdown blends perfectly with Webflow's native UI, anchoring automatically to Custom attributes field, Component Properties, and the Style Panel.
- Style Panel Widget: Injects a dedicated, easy-to-use custom attribute class widget directly into the Webflow Style Panel for instant access.
- Multi-Class Support: Click and toggle multiple classes effortlessly. It handles spacing and appending classes automatically.

Who is this for?
- This extension is built for advanced Webflow developers, technical designers, and power users who frequently utilize custom attributes to pass class names into regular elements, CMS-bound elements, and components.

How to use:
1. Install the extension and open your Webflow Designer project.
2. Select any element on your canvas.
3. Navigate to the Custom Attributes section (or look for the new widget in the Style Panel).
4. Add a custom attribute named class.
5. Click into the value field. A searchable dropdown will instantly appear, displaying all the CSS classes available in your current project.
6. Search, click, and toggle classes to apply them as the attribute's value.