FlowTools for Webflow

Enhance Webflow with search functionality and improved code editor with syntax highlighting, smart suggestions, and multiple themes.

Flow Tools supercharges Webflow’s Designer with the power features you’ve always wanted, wrapped in a native UI that feels right at home. What it solves No more hunting through long Webflow tree views: sticky search bars let you instantly filter nested dropdowns, including dynamically loaded items. Stop fighting the stock embed editor: Monaco replaces Webflow’s textarea with a modern code editor that syncs cleanly with Webflow’s CMS embeds - preserving undo/redo, cursor position, and saved content. What it offers Tree View Search: Adds top-mounted search inputs to Webflow popouts without breaking native scrolling. Matches text, automation IDs, and shows parent chains so deep structures are easy to navigate. Monaco Editor Upgrade: Syntax highlighting, Night Owl and other themes, resizable viewport, and a live status bar indicating HTML/CSS/JS context. CMS Token Styling: Inline Webflow CMS references render as compact, editable pills for a visual cue without losing text editability. Smart Autocomplete: Handy snippets for script/style tags, JavaScript helpers (forEach, DOMContentLoaded, etc.), and curated CSS property suggestions that only appear when relevant. Two-Way Sync: Webflow’s underlying CodeMirror stays in sync with Monaco, so saving, undo/redo, and closing/reopening modals all behave exactly as expected. Configurable Controls: Width, height, and theme are saved per user, and the popup exposes quick toggles plus reload hints when Monaco is disabled. Flow Tools is perfect for Webflow developers who live in complex projects and need reliable, ergonomic tooling inside the Designer. Upgrade your workflow without leaving the browser.