โ†”๏ธ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.

Classes

โœ… 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.

Breakpoints

โœ… Responsive styles and breakpoints will transfer.

Interactions

โŒ Interactions and animations do not transfer.

Last updated

Was this helpful?