↔️Webflow

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

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

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.

Global tag styling in webflow h1 token in webstudio

Classes

βœ… Classes and combo classes will transfer as Tokens with their respective styles.

Breakpoints

βœ… Responsive styles and breakpoints will transfer.

Interactions

❌ Interactions and animations do not transfer.

Last updated

Was this helpful?