↔️Webflow
Webstudio supports pasting Webflow Elements, converting them from Webflow format to Webstudio format.
Last updated
Webstudio supports pasting Webflow Elements, converting them from Webflow format to Webstudio format.
Last updated
It works by copying anything in Webflow format, such as component libraries and projects, and pasting it into Webstudio, transferring the structure and styles.
Webflow Element | Transfers? | Notes |
---|---|---|
✅ 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 and combo classes will transfer as Tokens with their respective styles.
Pasting a class/Token that already exists will not cause duplication or override it.
✅ Responsive styles and breakpoints will transfer.
❌ Interactions and animations do not transfer.
Section
✅
Container
✅
Quick Stack
✅
V Flex
✅
H Flex
✅
Div Block
✅
List
✅
List Item
✅
Link Block
✅
Button
✅
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
✅
Slider
❌
Can be rebuilt using Swiper.js in the Marketplace
Tabs
❌
Can be rebuilt using Radix “Tabs”
Map
❌
❌
X (Twitter)
❌
Custom Element
❌
See status of this component in Webstudio
Code Block
✅
Grid
✅
Columns
✅