How to use the Webflow Clipboard Bridge
- Copy the element: in the Webflow Designer (select it and press Ctrl/⌘+C) or with a devpack “Copy to Webflow” button.
- Open this page in the browser where the Webflow Designer is open, click the paste area and press Ctrl/⌘+V.
- Check the summary — elements, classes and assets found — and optionally edit the JSON.
- Click Copy to Webflow, then paste into the Designer.
Why copying between browsers fails
When you copy elements, Webflow (and tools like devpack) put them on the clipboard as application/json in Webflow’s @webflow/XscpData format. Only plain text and HTML are shared between browsers in a standard way — custom types like this are stored in each browser’s own private format. So a copy made in Firefox arrives in Chrome as plain text, and the Designer ignores it. The same happens between Safari, Edge, Arc, Brave and Chrome profiles in some setups.
The plain-text copy still contains everything, though. This page reads it, checks it, and writes it back to the clipboard as application/json in the current browser — which is exactly what the Designer expects.
Good to know
- Same browser, same clipboard: if devpack and Webflow are open in the same browser, you don’t need the bridge — paste straight into the Designer.
- Between Webflow projects: copying elements between sites works in one browser too; classes are recreated, and images are re-linked from the original site’s assets.
- Save components for later: download the JSON and reopen it any time — a lightweight snippet library for sections you reuse.
- Nothing is uploaded: the clipboard data stays in your browser.
Generate Webflow elements with HTML & CSS to Webflow, SVG to Webflow or the HubSpot Form Styler.
Tools that pair well with the Webflow Clipboard Bridge
- Class Name Typo Checker — Paste HTML or enter a URL to audit every class name: catch typos like hero_heding, duplicates spelled differently (hero-title vs hero_title), auto-named Webflow classes like div-block-12, and Client-First or BEM rule breaks.
- 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.
- 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.