webstudio/docs/university/foundations/copy-paste/webflow.md

description

description
Webstudio supports pasting Webflow Elements, converting them from Webflow format to Webstudio format.

↔️ Webflow

It works by copying anything in Webflow format, such as component libraries and projects, and pasting it into Webstudio, transferring the structure and styles.

If the pasted Webflow content references images, including background images, Webstudio uploads those images into Assets and rewrites the pasted components/styles to use the uploaded assets.

What does and doesn’t transfer

Elements

Webflow Element	Transfers?	Notes
Section	✅
Container	✅
Quick Stack	✅
V Flex	✅
H Flex	✅
Div Block	✅
List	✅
List Item	✅
Link Block	✅
Button	✅	Maps to "Link". Buttons are for interactions, like submitting a form, not linking.
Heading	✅
Paragraph	✅
Text Link	✅
Text Block	✅
Block Quote	✅
Rich Text	✅	There is no Rich Text component in Webstudio, though any children of the copied Rich Text paste in as their respective components. For example, Rich Text with a Heading and Link will transfer as a Heading and Link.
Collection List	❌	Though Webstudio does have a "Collection" component.
Image	✅
Video	❌	Can be rebuilt “Vimeo” or “HTML Embed”
YouTube	❌	Can be rebuilt using “HTML Embed”. See status of this component in Webstudio.
Lottie Animation	❌	Can be rebuilt using “HTML Embed”
Spline Scene	❌	Can be rebuilt using “HTML Embed”
Form Block	✅
Label	✅
Input	✅
File Upload	❌	See status of this component in Webstudio
Text Area	✅
Checkbox	✅
Radio Button	✅
Select	✅
reCAPTCHA	❌	reCAPTCHA doesn’t transfer as Webstudio uses alternative methods of preventing spam.
Form Button	✅	Maps to "Button"
Search	❌
Background Video	❌
Dropdown	❌	Can be rebuilt using Radix “Select”
Code Embed	✅
Lightbox	❌
Locales List	❌
Navbar	✅	Generates the corresponding components such as Boxes and Links with Tokens and styles.
Slider	❌	Can be rebuilt using Swiper.js in the Marketplace
Tabs	❌	Can be rebuilt using Radix “Tabs”
Map	❌
Facebook	❌
X (Twitter)	❌
Custom Element	❌	See status of this component in Webstudio
Code Block	✅
Grid	✅
Columns	✅

Styles

✅ Both Webflow and Webstudio support all CSS properties, allowing all styles defined in the style panel to transfer.

✅ Webflow preset styles, which Webflow adds by default to pages and Elements.

❌ Webflow variables and their values do not transfer as those values are not available within the Webflow copy.

❌ User-defined styles on global tag selectors as they are not available in the Webflow copy. For example, global styling on an H1 does not transfer, but a Token of h1 is created and available for applying the styles.

Classes

✅ Classes and combo classes will transfer as Tokens with their respective styles.

{% hint style="success" %} Pasting a class/Token that already exists will not cause duplication or override it. {% endhint %}

Breakpoints

✅ Responsive styles and breakpoints will transfer.

Interactions

❌ Interactions and animations do not transfer.

Related

• Copy & Paste – Learn more about copying from Webflow to Webstudio
• CSS – Paste CSS to populate the Style Panel
• Markdown – Paste Markdown to create components automatically
• Referenced images – Understand image handling during paste
• Shortcuts – Keyboard shortcuts for faster workflows
• Commands and search – Quick access to commands and settings
• Anatomy of the Webstudio builder – Overview of the Webstudio interface