Como usar: 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.
Também pesquisado como: 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.
Ferramentas que combinam com: Webflow Component Editor
- Class Name Generator — Describe a section in plain words — “hero with tagline, heading, two buttons and an image on the right” — and get a consistent class structure in Client-First, BEM or simple kebab-case, ready to copy into Webflow as elements.
- 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.
- Markdown to Webflow Rich Text — Paste Markdown, check the preview and copy it as formatted rich text — headings, lists, links and bold text land correctly in Webflow’s Rich Text element.
Perguntas frequentes
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.
Posso instalar o Webflow Component Editor como um aplicativo da web e usá-lo offline?
Sim. O Webflow Component Editor é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.