LogoLogo
Webstudio Home
  • Basics
    • 👋Welcome
    • 🔥Intro
    • 🎓Building your first site
    • 🤓Courses
    • 🔗Roadmap & Links
    • ❓FAQs
  • NEWS
    • 🆕April Update
    • 🆕December Update
    • 🆕September Update
    • 🆕Webstudio CMS Beta and Experts Network
  • university
    • ⚛️Foundations
      • 🛠️Anatomy of the Webstudio Builder
      • 🧱CSS Variables
      • 🖌️Design Tokens
      • 🔡Data Variables
      • ➕Expression Editor
      • Animations
      • 💾CMS
      • ↔️Copy-Paste
        • ↔️CSS
        • ↔️Markdown
        • ↔️Webflow
      • Commands & Search
      • 🎯SEO Settings
      • Shortcuts
      • ⚙️Project Settings
      • Modes
      • Share Links & Transferring Projects
      • 🌐Publishing & Custom Domains
    • 🧩Core Components
      • 📦Box
      • 🔗Link
      • 🖼️Image
      • 📃List
      • ⌨️HTML Embed
      • Animation Group
      • Text Animation
      • Video Animation
      • Stagger Animation
      • ✍️Webhook Form
      • ✍️Form
      • ⏯️Vimeo
      • ▶️Vimeo Background Video
      • YouTube
      • 💬Blockquote
      • 🔲Slot
      • Head Slot
      • ➖Separator
      • 📄Code Text
      • 🔘Button
      • 💾Collection
      • 🪜Content Embed
      • 🪜Markdown Embed
      • Content Block
      • 📘XML Node
    • ▫️Radix UI Components
      • Accordion
      • Collapsible
      • Dialog
      • Navigation Menu
      • Popover
      • Radio Group
      • Select
      • Sheet
      • Switch
      • Tabs
      • Tooltip
    • Marketplace
    • 🤖Webstudio AI
    • 📤Self-Hosting
      • ▶️CLI
      • ▶️Download
      • ▶️Cloudflare Pages
      • ▶️GitHub Pages
      • ▶️Netlify
      • ▶️Vercel
      • ▶️AWS with Flightcontrol (Docker)
      • ▶️Digital Ocean with Coolify (Docker)
      • ▶️Hetzner with Coolify (Docker)
    • 🧑‍🏫How-Tos
      • ▶️How to add icons
      • ▶️How to create fluid video backgrounds with Vimeo
      • ▶️How to create a countdown
      • ▶️How to crop an image with out cropping the original image
      • 🍀How to add a GSAP animation
      • ▶️Build Your Own Directory Website with Airtable
      • ▶️Using filters to dynamically display content (Airtable example)
    • 🔗Integrations
      • How to build a frontend for Hygraph using Webstudio
      • How to build a frontend for Airtable using Webstudio
      • How to build a WordPress frontend using Webstudio (no-code builder)
      • How to integrate a Notion database with Webstudio
      • How to integrate Webhook Form with Pabbly
      • How to integrate Webhook Form with Zappier
      • How to integrate Webhook Form with N8N
      • How to integrate a Webhook Form with Airtable
      • How to integrate Flotiq with Webstudio
    • Craft
  • Contributing
    • 🧑‍🎨Contributing for Designers
    • 🧑‍💻Contributing for Developers
    • Contributing to the Marketplace
  • ⚠️Errors
    • ▶️Connecting your Hostinger Domain to Webstudio
    • 🔌Worker not found
    • 🌮AppSumo redemption failed
  • Misc
    • 📊Account Limits
    • 🆘Webstudio Support Process
    • Fixing overflow issues
Powered by GitBook
On this page
  • What does and doesn’t transfer
  • Elements
  • Styles
  • Classes
  • Breakpoints
  • Interactions

Was this helpful?

Edit on GitHub
  1. university
  2. Foundations
  3. Copy-Paste

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

✅

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

❌

Image

✅

Video

❌

YouTube

❌

Lottie Animation

❌

Spline Scene

❌

Form Block

✅

Label

✅

Input

✅

File Upload

❌

Text Area

✅

Checkbox

✅

Radio Button

✅

Select

✅

reCAPTCHA

❌

reCAPTCHA doesn’t transfer as Webstudio uses alternative methods of preventing spam.

Form Button

✅

Search

❌

Background Video

❌

Dropdown

❌

Code Embed

✅

Lightbox

❌

Locales List

❌

Navbar

✅

Slider

❌

Can be rebuilt using Swiper.js in the Marketplace

Tabs

❌

Map

❌

Facebook

❌

X (Twitter)

❌

Custom Element

❌

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.

PreviousMarkdownNextCommands & Search

Last updated 10 months ago

Was this helpful?

Maps to “”. are for interactions, like submitting a form, not linking.

Though Webstudio does have a “” component.

Can be rebuilt “” or “”

Can be rebuilt using “”. of this component in Webstudio.

Can be rebuilt using “”

Can be rebuilt using “”

of this component in Webstudio

Maps to “”

Can be rebuilt using Radix “”

Generates the corresponding components such as and with and styles.

Can be rebuilt using Radix “”

of this component in Webstudio

⚛️
↔️
↔️
Link
Buttons
Collection
Vimeo
HTML Embed
HTML Embed
See status
HTML Embed
HTML Embed
See status
Button
Select
Boxes
Links
Tokens
Tabs
See status