Webflow Editor Integration

This skill explains how to ensure your custom code doesn't interfere with the Webflow Designer/Editor while providing full functionality on the published site.

Editor Detection

Import handleEditor from @webflow/detect-editor:

typescript
1import { handleEditor } from "@webflow/detect-editor";
2
3export default function (element: HTMLElement, dataset: DOMStringMap) {
4  handleEditor((isEditor) => {
5    if (isEditor) {
6      // Designer Mode: disable interactions, reset animations
7      element.style.pointerEvents = "none";
8      element.style.transform = "none";
9      element.style.opacity = "1";
10    } else {
11      // Published Mode: enable functionality
12      element.style.pointerEvents = "auto";
13    }
14  });
15}