devpack
EnglishDeutsch · StartseiteFrançais · AccueilEspañol · InicioPortuguês (Brasil) · Início
Auditoria do site

Esta página ainda não foi traduzida para o português, por isso aparece em inglês.

Webflow Clipboard Bridge — Copy Elements Between Browsers

Webflow puts elements on the clipboard in a special format that doesn’t travel between browsers (Firefox → Chrome, Safari → Edge…). Open this page in the browser where the Designer runs, paste here, and copy again — the paste works.

Atualizado em
Click here and press Ctrl/⌘+V
Paste elements copied in the Webflow Designer or from any devpack “Copy to Webflow” button — from any browser.
Then select an element in the Designer (or Navigator) and press Ctrl/⌘+V.
Clipboard JSON (advanced — edit class names or text, then copy)

Seus dados nunca saem do seu computador. Todo o processamento acontece localmente no navegador.

devpack.app é uma ferramenta independente e não é afiliada, patrocinada ou endossada pela Webflow, Inc. ou pela Figma, Inc. Webflow e Figma são marcas de seus respectivos donos.

Como usar: Webflow Clipboard Bridge

  1. Copy the element: in the Webflow Designer (select it and press Ctrl/⌘+C) or with a devpack “Copy to Webflow” button.
  2. Open this page in the browser where the Webflow Designer is open, click the paste area and press Ctrl/⌘+V.
  3. Check the summary — elements, classes and assets found — and optionally edit the JSON.
  4. 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.

Também pesquisado como: webflow paste not working, webflow copy between browsers, webflow clipboard, xscpdata, webflow copy paste chrome firefox, webflow clipboard json, paste into webflow, webflow copy elements between projects.

Ferramentas que combinam com: Webflow Clipboard Bridge

  • 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.
  • 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.
  • 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.
  • 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.

Perguntas frequentes

Why does paste into Webflow do nothing?
Usually the copy came from a different browser. Webflow’s element data only survives copy-paste inside one browser. Paste it into this page in the Designer’s browser and copy again.
Does this work for elements copied from the Webflow Designer itself?
Yes. Copy elements in the Designer in one browser, paste them here in another browser, then copy and paste into the Designer there.
Can I edit the copied elements?
Yes — open “Clipboard JSON”, change text or class names, and click Copy to Webflow. For a visual editor with the Navigator, a live preview and class prefixes, use the Webflow Component Editor.
Is my data sent anywhere?
No. Reading, checking and copying happen entirely in your browser.
Posso instalar o Webflow Clipboard Bridge como um aplicativo da web e usá-lo offline?
Sim. O Webflow Clipboard Bridge é 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.

Ferramentas relacionadas

localHTML & CSS to WebflowPaste HTML and its CSS, click Copy to Webflow and paste into the Designer — you get real Div Blocks,…localSVG to WebflowPaste an SVG from Figma and copy it to Webflow as real Custom Elements — every <svg>, <path> and <g>…localHubSpot Form StylerDesign your HubSpot form with a live preview — inputs, labels, two-column rows, checkboxes, error messages…localClass Name GeneratorDescribe a section in plain words — “hero with tagline, heading, two buttons and an image on the right” —…localClass Name Typo CheckerPaste HTML or enter a URL to audit every class name: catch typos like hero_heding, duplicates spelled…localMarkdown to Webflow Rich TextPaste Markdown, check the preview and copy it as formatted rich text — headings, lists, links and bold…