devpack
EnglishDeutschFrançaisEspañolPortuguês (Brasil)
Auditoria do site

Webflow Clipboard Bridge — Copie Elementos Entre Navegadores

O Webflow coloca elementos na área de transferência em um formato especial que não funciona entre navegadores (Firefox → Chrome, Safari → Edge…). Abra esta página no navegador onde o Designer está aberto, cole aqui e copie de novo — aí a colagem funciona.

Atualizado em
Clique aqui e pressione Ctrl/⌘+V
Cole elementos copiados no Webflow Designer ou em qualquer botão “Copy to Webflow” do devpack — de qualquer navegador.
Depois, selecione um elemento no Designer (ou no Navigator) e pressione Ctrl/⌘+V.
Clipboard JSON (avançado — edite nomes de classes ou textos e depois copie)

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. Copie o elemento: no Webflow Designer (selecione e pressione Ctrl/⌘+C) ou use um botão “Copy to Webflow” do devpack.
  2. Abra esta página no navegador onde o Webflow Designer está aberto, clique na área de colagem e pressione Ctrl/⌘+V.
  3. Confira o resumo — elementos, classes e assets encontrados — e, se quiser, edite o JSON.
  4. Clique em Copy to Webflow e cole no Designer.

Por que copiar entre navegadores falha

Ao copiar elementos, o Webflow (e ferramentas como o devpack) colocam os dados na área de transferência como application/json, no formato @webflow/XscpData do Webflow. Só texto simples e HTML são compartilhados entre navegadores de forma padronizada — tipos personalizados como esse ficam guardados no formato privado de cada navegador. Assim, uma cópia feita no Firefox chega ao Chrome como texto simples, e o Designer a ignora. O mesmo acontece entre Safari, Edge, Arc, Brave e perfis do Chrome em algumas configurações.

Mesmo assim, a cópia em texto simples continua com tudo. Esta página lê, verifica e grava de volta na área de transferência como application/json no navegador atual — exatamente o que o Designer espera.

Bom saber

  • Mesmo navegador, mesma área de transferência: se o devpack e o Webflow estiverem abertos no mesmo navegador, você não precisa da ponte — cole direto no Designer.
  • Entre projetos do Webflow: copiar elementos entre sites também funciona em um único navegador; as classes são recriadas e as imagens são religadas aos assets do site original.
  • Guarde componentes para depois: baixe o JSON e reabra quando quiser — uma biblioteca leve de trechos para seções que você reutiliza.
  • Nada é enviado: os dados da área de transferência ficam no seu navegador.

Gere elementos do Webflow com HTML & CSS to Webflow, SVG to Webflow ou o HubSpot Form Styler.

Também pesquisado como: webflow colar não funciona, webflow copiar entre navegadores, webflow clipboard, xscpdata, webflow copiar colar chrome firefox, webflow clipboard json, colar no webflow, webflow copiar elementos entre projetos.

Ferramentas que combinam com: Webflow Clipboard Bridge

  • Gerador de Classes Webflow — Descreva uma seção com palavras simples — “hero com slogan, título, dois botões e uma imagem à direita” — e receba uma estrutura de classes consistente em Client-First, BEM ou kebab-case simples, pronta para copiar para o Webflow como elementos.
  • Verificador de Erros em Nomes de Classes — Cole o HTML ou informe uma URL para auditar todos os nomes de classes: encontre erros de digitação como hero_heding, duplicatas escritas de forma diferente (hero-title vs hero_title), classes automáticas do Webflow como div-block-12 e quebras das regras Client-First ou BEM.
  • Markdown para Rich Text do Webflow — Cole o Markdown, confira a prévia e copie como rich text formatado — títulos, listas, links e negrito chegam corretos no elemento Rich Text do Webflow.
  • Redirecionamentos WordPress para Webflow — Ao migrar um site do WordPress para o Webflow, quase todas as URLs mudam: caminhos de posts com data, arquivos /category/, barras no final e slugs de páginas.

Perguntas frequentes

Por que colar no Webflow não faz nada?
Normalmente a cópia veio de outro navegador. Os dados de elementos do Webflow só sobrevivem ao copiar e colar dentro de um mesmo navegador. Cole esta página no navegador do Designer e copie de novo.
Isso funciona para elementos copiados do próprio Webflow Designer?
Sim. Copie os elementos no Designer em um navegador, cole aqui em outro navegador, depois copie e cole no Designer desse navegador.
Posso editar os elementos copiados?
Sim — abra “Clipboard JSON”, altere textos ou nomes de classes e clique em Copy to Webflow. Para um editor visual com o Navigator, prévia ao vivo e prefixos de classes, use o Webflow Component Editor.
Meus dados são enviados para algum lugar?
Não. A leitura, a verificação e a cópia acontecem inteiramente no seu navegador.
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 e CSS para WebflowCole o HTML e o CSS, clique em Copy to Webflow e cole no Designer — você recebe Div Blocks, Headings,…localSVG para WebflowCole um SVG do Figma e copie para o Webflow como Custom Elements de verdade. Cada <svg>, <path> e <g> vira…localEstilizador de Formulário HubSpotMonte seu formulário HubSpot com uma prévia ao vivo — campos, rótulos, linhas de duas colunas, checkboxes,…localGerador de Classes WebflowDescreva uma seção com palavras simples — “hero com slogan, título, dois botões e uma imagem à direita” —…localVerificador de Erros em Nomes de ClassesCole o HTML ou informe uma URL para auditar todos os nomes de classes: encontre erros de digitação como…localMarkdown para Rich Text do WebflowCole o Markdown, confira a prévia e copie como rich text formatado — títulos, listas, links e negrito…