skills.rest
vallafederico
vallafedericoCOMMUNITY
Explore all skills by this author →
Website𝕏@ffmfeddGitHub

webflow-editor-integration

Detect Webflow Designer mode and gate interactive logic for published sites.

25|2|Updated Jan 18, 2025
Search Tags:#animations#webflow#pointer events#designer mode#editor detection#viewport observer#lifecycle gating
One-click install
npx skills add https://github.com/vallafederico/webflow-dev-setup --skill webflow-editor-integration-vallafederico
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: webflow-editor-integration
Source: https://github.com/vallafederico/webflow-dev-setup/tree/main/.cursor/skills/webflow-editor-integration
Command: npx skills add https://github.com/vallafederico/webflow-dev-setup --skill webflow-editor-integration-vallafederico

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents custom Webflow JS and animations from interfering with the Webflow Designer/Editor experience while still enabling the full, interactive behavior on the published site.

Core Features & Use Cases

  • Editor detection and mode switching: Detects whether code is running in Webflow Designer versus published mode and applies different behavior accordingly.
  • Interactive safety controls: In editor mode, disables interactivity (e.g., pointer events) and resets styles so the static design state remains accurate.
  • Published-only lifecycle execution: Ensures observers, animations, viewport detection, and other interactive logic only run when not in the editor (including conditional lifecycle patterns for onMount/onPageIn-style hooks).

Quick Start

Add the editor handler to your component initialization so it disables editor interactivity and resets transforms/opacity when in Designer, then enables your published features only when not in editor.

Frequently Asked Questions about webflow-editor-integration

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I stop custom JavaScript animations from breaking the Webflow Designer UI?▼

Viewport observers and custom animations should run only on the published site by using editor detection to gate their lifecycle execution. This prevents dynamic viewport-driven effects from activating and interfering with the static design state while editing in Webflow.

How do I reset JS-applied visual states like transforms and opacity in Webflow editor mode?▼

You reset JS-applied visual states in Webflow editor mode by updating DOM styles and classes when editor detection returns true. This ensures transforms, opacity, and other interactive modifications revert to their original static design state for accurate editing.

Do I need to import a specific module to detect Webflow Designer versus published mode?▼

Yes, you need to import the handleEditor function from the @webflow/detect-editor module to detect Webflow Designer versus published mode. This dependency provides the required environment context to safely gate your component initialization logic.

Why do my custom interactive Webflow elements lose pointer events in the editor?▼

Custom interactive Webflow elements lose pointer events in the editor because applying editor-safe rendering logic disables interactivity to prevent conflicts. This is an intentional safety control ensuring the Webflow Designer interface remains fully responsive while editing.

Related Skills

Explore More Software Engineering Skills→
BamoJBamoJ

webflow-editor-integration

Detect Webflow Designer mode and branch runtime logic for editor-safe behavior.

Community
Intermediate
NVIDIANVIDIA
33

availability-report

Verifies NVIDIA Elements npm packages and documentation site status, generating a report.

Official
Advanced
AnglesiteAnglesite
2

creative-canvas

Add interactive visual effects and generative art using p5.js, Three.js, and GSAP.

Official
Intermediate
karenrebecagkarenrebecag

webflow-mcp:flowkit-naming

Automate Flowkit CSS class naming for Webflow components.

Community
Intermediate