How to use the Webflow Component Editor
- In the Webflow Designer select a section or component and press Ctrl/⌘+C. Click the paste area here and press Ctrl/⌘+V.
- Click an element in the Navigator to edit its text, link, image, tag, ID, custom attributes and classes. The preview updates as you type.
- In Classes, rename a class, edit its styles, add a prefix to all of them, or remove classes no element uses. Undo steps back.
- To reuse it, click Suggest props (or Make prop next to a field), name the props, and Save to library. Next time, open it from Your library, fill in the props and copy.
- Click Copy to Webflow, open the other project, select where it should go and press Ctrl/⌘+V. Download .json keeps a copy to reuse later.
Copy components between Webflow projects — and change them on the way
Webflow already lets you copy elements from one project and paste them into another in the same browser. What it doesn’t let you do is change them in between: rename classes that clash with the other project’s style guide, swap the copy, fix links that point to the old site, or remove the parts you don’t need. This editor sits in the middle. It reads Webflow’s clipboard data, shows it the way the Designer does, lets you edit it, and puts it back on the clipboard in the same format.
- Navigator and properties — every element with its type, classes and text. Edit text, link URLs and “open in new tab”, image sources and alt text, heading levels and section tags, the ID and custom attributes, or delete an element with everything inside it.
- Classes with their styles — rename any class, edit its base styles, see which elements use it, and remove the ones nothing uses. Breakpoint and hover styles travel with the class.
- Class prefix — add
acme-(or any prefix) to every class at once, so pasted classes don’t merge with or get confused for the classes already in the other project. - Props and a library — mark the text, links, images, icons and show/hide toggles that change between uses as props, save the component to your library in this browser, and next time just fill in a short form. Props travel with the downloaded .json; they’re left out when you copy to Webflow, which pastes plain elements.
- Live preview at desktop, tablet and phone width, built from the class styles.
- Warnings for the parts that don’t move cleanly: interactions, components that were unlinked when copied, removed CMS bindings and images that live in the old project’s asset library.
- Nothing is uploaded — the data stays in your browser. Your last component is kept on this device so a reload doesn’t lose it.
Webflow open in another browser? The Webflow Clipboard Bridge moves elements between browsers. Building something new from code? Use HTML & CSS to Webflow or SVG to Webflow. Check class names with the Class Name Typo Checker.
Also searched as: copy webflow component to another project, webflow copy paste between projects, webflow copy section to another site, edit webflow clipboard, webflow class prefix, rename webflow classes, webflow xscpdata editor, webflow component library.
Tools that pair well with the Webflow Component Editor
- Figma CSS to Webflow — Turn Figma’s “Copy as CSS” output into tidy values you can type straight into Webflow’s Style panel — absolute positioning and noise removed, units converted.
- WordPress to Webflow Redirects — Moving a site from WordPress to Webflow changes almost every URL: dated blog paths, /category/ archives, trailing slashes and page slugs.
- HTML to Webflow Rich Text — Paste messy HTML — from an old site, WordPress export, Google Docs or Word — and get clean semantic markup that Webflow’s Rich Text element and CMS import accept without junk.
- Lottie JSON Optimizer — Make Lottie animations load faster in Webflow and on any site by stripping data the player doesn’t need — precision, names, metadata and hidden layers.
Frequently asked questions
How do I copy a section from one Webflow project to another?
Select the section in the Designer and press Ctrl/⌘+C, open the other project in the same browser, select where it should go and press Ctrl/⌘+V. To change it first, paste it into this editor, edit it, and click Copy to Webflow before pasting.
What happens to class names that already exist in the other project?
Webflow matches pasted classes to existing ones by name, so a pasted “button” can pick up or clash with the other project’s button styles. Add a prefix here, or rename the class, to keep them apart.
Do interactions and components come along?
Interactions are included in the clipboard data and usually paste with the elements, but check their triggers afterwards. Components are unlinked when you copy them, so they paste as plain elements; the editor tells you how many.
Do images come along?
Images that live in the source project’s asset library are referenced by URL and normally re-uploaded by Webflow when you paste. If an image fails, change its source here to a URL you control.
Can I copy a component with its properties to another project?
Not through the clipboard: Webflow unlinks components when you copy them and leaves their properties out. Here you can rebuild that as devpack props — fill them in, copy, then choose Create component in the other project if you want a Webflow component again. Webflow’s Libraries feature shares real components between sites in a workspace on plans that include it.
Where is my component library stored?
In this browser’s local storage, on this device only. Use Download .json to keep a backup or move a component to another computer, and open the file here to continue.
Is this an official Webflow tool?
No. devpack is independent. It works with the clipboard data the Designer creates when you copy elements, which Webflow could change at any time.
Can I install Webflow Component Editor as a web app and use it offline?
Yes. Webflow Component Editor is an installable web app (PWA) — installed from your browser, not downloaded from an app store. Click Install app at the top of this page in Chrome or Edge (Windows, macOS, Linux, ChromeOS) or on Android, use Share → Add to Home Screen on iPhone and iPad, or File → Add to Dock in Safari 17+ on a Mac. It then opens in its own window with its own icon, and because it runs entirely in your browser it keeps working offline. Firefox on desktop can’t install web apps. How installing works.