Cómo usar: Webflow Clipboard Bridge
- Copia el elemento: en el Webflow Designer (selecciónalo y pulsa Ctrl/⌘+C) o con un botón devpack “Copy to Webflow”.
- Abre esta página en el navegador donde tienes abierto el Webflow Designer, haz clic en la zona de pegado y pulsa Ctrl/⌘+V.
- Revisa el resumen (elementos, clases y assets encontrados) y, si quieres, edita el JSON.
- Haz clic en Copy to Webflow y luego pega en el Designer.
Por qué falla copiar entre navegadores
Cuando copias elementos, Webflow (y herramientas como devpack) los guardan en el portapapeles como application/json con el formato @webflow/XscpData de Webflow. Solo el texto plano y el HTML se comparten entre navegadores de forma estándar; los tipos personalizados como este se guardan en el formato privado de cada navegador. Por eso una copia hecha en Firefox llega a Chrome como texto plano, y el Designer la ignora. En algunas configuraciones, lo mismo pasa entre Safari, Edge, Arc, Brave y perfiles de Chrome.
Aun así, la copia en texto plano contiene todo. Esta página la lee, la verifica y la vuelve a escribir en el portapapeles como application/json en el navegador actual, que es exactamente lo que espera el Designer.
Good to know
- Mismo navegador, mismo portapapeles: si devpack y Webflow están abiertos en el mismo navegador, no necesitas este puente: pega directamente en el Designer.
- Entre proyectos de Webflow: copiar elementos de un sitio a otro también funciona en un solo navegador; las clases se recrean y las imágenes se vuelven a enlazar desde los assets del sitio original.
- Guarda componentes para después: descarga el JSON y ábrelo cuando quieras; una biblioteca ligera de fragmentos para las secciones que reutilizas.
- Nada se sube: los datos del portapapeles se quedan en tu navegador.
Genera elementos de Webflow con HTML & CSS a Webflow, SVG a Webflow o el HubSpot Form Styler.
También se busca como: webflow pegar no funciona, webflow copiar entre navegadores, webflow clipboard, xscpdata, webflow copiar pegar chrome firefox, json portapapeles webflow, pegar en webflow, webflow copiar elementos entre proyectos.
Herramientas que combinan con: Webflow Clipboard Bridge
- Generador de nombres de clase — Describe una sección con tus propias palabras, por ejemplo “hero con eslogan, título, dos botones y una imagen a la derecha”, y obtén una estructura de clases coherente en Client-First, BEM o kebab-case simple, lista para copiar en Webflow como elementos.
- Comprobador de erratas en clases CSS — Pega HTML o introduce una URL para auditar todos los nombres de clase: detecta erratas como hero_heding, duplicados escritos de forma distinta (hero-title frente a hero_title), clases de Webflow con nombre automático como div-block-12 e incumplimientos de las reglas Client-First o BEM.
- Markdown a Webflow Rich Text — Pega Markdown, revisa la vista previa y cópialo como texto con formato: títulos, listas, enlaces y negritas se pasan correctamente al elemento Rich Text de Webflow.
- Redirecciones de WordPress a Webflow — Migrar un sitio de WordPress a Webflow cambia casi todas las URLs: rutas de blog con fecha, archivos /category/, barras finales y slugs de páginas.