> For the complete documentation index, see [llms.txt](https://docs.webstudio.is/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webstudio.is/university/foundations/copy-paste/webflow.md). # 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. If the pasted Webflow content references images, including background images, Webstudio uploads those images into [Assets](/university/foundations/assets.md) 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](/university/core-components/link.md)". [Buttons](/university/core-components/button.md) 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](/university/core-components/collection.md)" component. | | Image | ✅ | | | Video | ❌ | Can be rebuilt “[Vimeo](/university/core-components/vimeo.md)” or “[HTML Embed](/university/core-components/html-embed.md)” | | YouTube | ❌ | Can be rebuilt using “[HTML Embed](/university/core-components/html-embed.md)”. [See status](https://github.com/webstudio-is/webstudio/issues/1747) of this component in Webstudio. | | Lottie Animation | ❌ | Can be rebuilt using “[HTML Embed](/university/core-components/html-embed.md)” | | Spline Scene | ❌ | Can be rebuilt using “[HTML Embed](/university/core-components/html-embed.md)” | | 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](/university/core-components/button.md)" | | Search | ❌ | | | Background Video | ❌ | | | Dropdown | ❌ | Can be rebuilt using Radix “[Select](/university/radix/select.md)” | | Code Embed | ✅ | | | Lightbox | ❌ | | | Locales List | ❌ | | | Navbar | ✅ | Generates the corresponding components such as [Boxes](/university/core-components/element.md) and [Links](/university/core-components/link.md) with [Tokens](/university/foundations/design-tokens.md) and styles. | | Slider | ❌ | Can be rebuilt using Swiper.js in the Marketplace | | Tabs | ❌ | Can be rebuilt using Radix “[Tabs](/university/radix/tabs.md)” | | 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\&token=bf16ddae-81e7-4109-8938-9341906af6b3) ### Classes ✅ Classes and combo classes will transfer as [Tokens](/university/foundations/design-tokens.md) 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](/university/foundations/copy-paste/css.md) – Paste CSS to populate the Style Panel * [Markdown](/university/foundations/copy-paste/markdown.md) – Paste Markdown to create components automatically * [Referenced images](/university/foundations/copy-paste/images.md) – Understand image handling during paste * [Shortcuts](/university/foundations/shortcuts.md) – Keyboard shortcuts for faster workflows * [Commands and search](/university/foundations/commands-and-search.md) – Quick access to commands and settings * [Anatomy of the Webstudio builder](/university/foundations/anatomy-of-the-webstudio-builder.md) – Overview of the Webstudio interface --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.webstudio.is/university/foundations/copy-paste/webflow.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.