Webflow Input Enhancer

Webflow Input Enhancer: Transform the Way You Work with Component Inputs in Webflow! Transform your Webflow experience with the Webflow Input Enhancer extension! Designed to make working with inline CSS and class properties effortless, this tool streamlines your workflow by improving how values are displayed and edited in Webflow's input fields. ━━━━━━━━━━━━━━━━━━━━ KEY FEATURES ━━━━━━━━━━━━━━━━━━━━ 🧩 Enhanced Input Fields Automatically format CSS properties into individual lines for easy editing, then reformat them seamlessly when you're done. 🔑 Dynamic Field Enhancements Use intuitive keywords to unlock enhanced functionality: • [Style] → Optimize input fields for inline CSS editing. • [Class] → Enhance input fields to work with classes effortlessly. • [Dropdown=ID] → Display dropdown options by linking to a specific field. Check out our tutorial to learn how to create a config component! • [Email] → Restrict input to accept only valid email addresses. • [Url] → Restrict input to accept only valid URLs. • [Number] → Limit inputs to valid numbers, with optional min-max validation. Example: [Number]{1,10} ensures a range between 1 and 10. ━━━━━━━━━━━━━━━━━━━━ HOW IT WORKS ━━━━━━━━━━━━━━━━━━━━ Install the extension. Insert the appropriate keyword (e.g., [Style], [Class]) into the property name to enable enhancements. Edit fields directly, and the extension will automatically enhance the input for better visualization and control. ━━━━━━━━━━━━━━━━━━━━ SVG PASTE TRANSFORMER ━━━━━━━━━━━━━━━━━━━━ 🖼️ Paste any SVG code into Webflow and it's cleaned up automatically: • Fixed width/height are replaced with 100% for fluid, container-based sizing. • Hard-coded fill colors are swapped to currentColor, so icons inherit the CSS color of their parent — perfect for hover states, dark mode, and design systems. • Accessibility attributes (aria-hidden, role="img") are added when missing. Works in the Add SVG modal, HTML Embed widget, custom attribute values, and any text field. ━━━━━━━━━━━━━━━━━━━━ VARIABLE AUTO-COMPLETE IN CUSTOM PROPERTIES ━━━━━━━━━━━━━━━━━━━━ 💡 When editing Custom Properties in the Style panel, start typing a value and the extension suggests your project's variables — even mid-expression like calc(var(--… Select one and it drops the full var(--name) reference right in. ━━━━━━━━━━━━━━━━━━━━ WHY CHOOSE WEBFLOW INPUT ENHANCER? ━━━━━━━━━━━━━━━━━━━━ • Streamline CSS Editing — simplify complex property management. • Save Time — effortlessly navigate and edit multiple CSS properties. • Improve Accuracy — ensure valid inputs with specialized field enhancements. • Smart Auto-Complete — intelligent suggestions for CSS properties, class names, and project variables. • Smarter SVG Pasting — drop in production-ready, themeable SVGs without manual clean-up. 🚀 Supercharge your component inputs and make your Webflow workflow smoother and more efficient with Webflow Input Enhancer!