So nutzt du: Webflow Clipboard Bridge
- Element kopieren: Im Webflow Designer das Element auswählen und Strg/⌘+C drücken oder einen devpack-Button „Copy to Webflow“ verwenden.
- Öffne diese Seite im Browser, in dem der Webflow Designer geöffnet ist, klicke in den Einfügebereich und drücke Strg/⌘+V.
- Prüfe die Übersicht – gefundene Elemente, Klassen und Assets – und bearbeite bei Bedarf das JSON.
- Klicke auf Copy to Webflow und füge anschließend im Designer ein.
Warum das Kopieren zwischen Browsern scheitert
Wenn du Elemente kopierst, legt Webflow (und Tools wie devpack) sie als application/json im Format @webflow/XscpData in die Zwischenablage. Zwischen Browsern werden standardmäßig nur einfacher Text und HTML geteilt – eigene Datentypen wie dieser bleiben im privaten Format des jeweiligen Browsers. Eine Kopie aus Firefox landet in Chrome daher als reiner Text, und der Designer ignoriert sie. In manchen Setups passiert dasselbe zwischen Safari, Edge, Arc, Brave und Chrome-Profilen.
Die Textkopie enthält trotzdem alles. Diese Seite liest sie aus, prüft sie und schreibt sie als application/json im aktuellen Browser zurück in die Zwischenablage – genau das, was der Designer erwartet.
Gut zu wissen
- Gleicher Browser, gleiche Zwischenablage: Sind devpack und Webflow im selben Browser geöffnet, brauchst du die Bridge nicht – füge direkt im Designer ein.
- Zwischen Webflow-Projekten: Elemente zwischen Sites zu kopieren funktioniert auch in einem Browser; Klassen werden neu angelegt, Bilder werden aus den Assets der Originalseite neu verknüpft.
- Komponenten für später speichern: Lade das JSON herunter und öffne es jederzeit wieder – eine schlanke Snippet-Bibliothek für Abschnitte, die du wiederverwendest.
- Nichts wird hochgeladen: Die Zwischenablage-Daten bleiben in deinem Browser.
Erstelle Webflow-Elemente mit HTML & CSS to Webflow, SVG to Webflow oder dem HubSpot Form Styler.
Auch gesucht als: webflow paste not working, webflow copy between browsers, webflow clipboard, xscpdata, webflow kopieren einfügen chrome firefox, webflow clipboard json, webflow elemente einfügen, webflow elemente zwischen projekten kopieren.
Passende Tools zu: Webflow Clipboard Bridge
- Klassennamen-Generator — Beschreibe einen Bereich in einfachen Worten – „Hero mit Tagline, Überschrift, zwei Buttons und einem Bild rechts“ – und erhalte eine konsistente Klassenstruktur in Client-First, BEM oder einfachem Kebab-Case, bereit zum Einfügen in Webflow als Elemente.
- Klassennamen-Checker — Füge HTML ein oder gib eine URL ein, um jeden Klassennamen zu prüfen: Tippfehler wie hero_heding, anders geschriebene Duplikate (hero-title vs.
- Markdown zu Webflow Rich Text — Markdown einfügen, die Vorschau prüfen und als formatierten Rich Text kopieren.
- WordPress zu Webflow Weiterleitungen — Beim Umzug einer Seite von WordPress zu Webflow ändert sich fast jede URL: datierte Blog-Pfade, /category/-Archive, Schrägstriche am Ende und Seiten-Slugs.