# 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. ## 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](https://docs.webstudio.is/university/core-components/link)". [Buttons](https://docs.webstudio.is/university/core-components/button) 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](https://docs.webstudio.is/university/core-components/collection)" component. | | Image | ✅ | | | Video | ❌ | Can be rebuilt “[Vimeo](https://docs.webstudio.is/university/core-components/vimeo)” or “[HTML Embed](https://docs.webstudio.is/university/core-components/html-embed)” | | YouTube | ❌ | Can be rebuilt using “[HTML Embed](https://docs.webstudio.is/university/core-components/html-embed)”. [See status](https://github.com/webstudio-is/webstudio/issues/1747) of this component in Webstudio. | | Lottie Animation | ❌ | Can be rebuilt using “[HTML Embed](https://docs.webstudio.is/university/core-components/html-embed)” | | Spline Scene | ❌ | Can be rebuilt using “[HTML Embed](https://docs.webstudio.is/university/core-components/html-embed)” | | Form Block | ✅ | | | Label | ✅ | | | Input | ✅ | | | File Upload | ❌ | [See status](https://github.com/webstudio-is/webstudio/issues/3023) 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](https://docs.webstudio.is/university/core-components/button)" | | Search | ❌ | | | Background Video | ❌ | | | Dropdown | ❌ | Can be rebuilt using Radix “[Select](https://docs.webstudio.is/university/radix/select)” | | Code Embed | ✅ | | | Lightbox | ❌ | | | Locales List | ❌ | | | Navbar | ✅ | Generates the corresponding components such as [Boxes](https://docs.webstudio.is/university/core-components/element) and [Links](https://docs.webstudio.is/university/core-components/link) with [Tokens](https://docs.webstudio.is/university/foundations/design-tokens) and styles. | | Slider | ❌ | Can be rebuilt using Swiper.js in the Marketplace | | Tabs | ❌ | Can be rebuilt using Radix “[Tabs](https://docs.webstudio.is/university/radix/tabs)” | | Map | ❌ | | | Facebook | ❌ | | | X (Twitter) | ❌ | | | Custom Element | ❌ | [See status](https://github.com/webstudio-is/webstudio/issues/3632) 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](https://330243581-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTep4EGj6hSC54ozHujyK%2Fuploads%2Fgit-blob-3b846164470a7da4bd9eda677cb5fb56d308df9d%2Fglobal-tags.png?alt=media) ![h1 token in webstudio](https://330243581-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTep4EGj6hSC54ozHujyK%2Fuploads%2Fgit-blob-aaa05f1bc5bce4d2ca0c84c000c2a41ec9ce7fec%2Fh1-token.png?alt=media) ### Classes ✅ Classes and combo classes will transfer as [Tokens](https://docs.webstudio.is/university/foundations/design-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](https://webstudio.is/copy-paste) – Learn more about copying from Webflow to Webstudio * [CSS](https://docs.webstudio.is/university/foundations/copy-paste/css) – Paste CSS to populate the Style Panel * [Markdown](https://docs.webstudio.is/university/foundations/copy-paste/markdown) – Paste Markdown to create components automatically * [Shortcuts](https://docs.webstudio.is/university/foundations/shortcuts) – Keyboard shortcuts for faster workflows * [Commands and search](https://docs.webstudio.is/university/foundations/commands-and-search) – Quick access to commands and settings * [Anatomy of the Webstudio builder](https://docs.webstudio.is/university/foundations/anatomy-of-the-webstudio-builder) – Overview of the Webstudio interface