Copy from Webflow, Paste into Webstudio
Paste work from Webflow and other platforms, and Webstudio will translate it into components and styles.
Cross-platform compatible
Now, designers benefit from the same thing that makes developers productive: copy-paste. Much of what you need is already created. Use it.
Webflow Projects, Templates, and Component Libraries
Pasting Webflow Elements automatically adds components and styles and converts classes to Tokens, whether you copy one section or the entire page.*
*Some things don't map
_EtP1la7JmCbAXN3sRf56f.png?width=3840&quality=80&format=auto)
Markdown
Pasting Markdown automatically adds the respective components.
Hint: Many tools use Markdown behind the scenes, letting you copy directly from the editor.
CSS Coming Soon
Pasting CSS code translates it to the various fields in the Style Panel.
Please respect the source’s license and terms.
Compatible with the Webflow ecosystem
Component libraries
Save hours by pasting styled and unstyled components. Component libraries offer 1,000s of sections, such as team grids and testimonials, that can be copied with one click.
_kBm8tUAmhQx9bw2AU6OPv.png?width=3840&quality=80&format=auto)
Templates
Start with any of the 1,000s of free and paid Webflow templates. Copy each page and paste it into Webstudio.
Your projects
Have a Webflow project you want to move to Webstudio? Copy and paste each page to save weeks of rebuilding the website.
How Webflow items map to Webstudio
Elements.
Most Webflow Elements map to Webstudio components such as Headings, Images, and Sections.
Classes.
Webflow uses combo classes, and Webstudio uses Tokens. Classes are transferred as Tokens with the same styles attached to them. Tokens can be removed and rearranged, no matter the order in which they are defined. Pasting a class/Token that already exists will not cause duplication or override it.
Styles.
Both Webflow and Webstudio support all CSS properties. Your styles will map 1:1.
Navigator names.
Webflow names elements in the Navigator by the first class, and Webstudio lets you create custom names. When pasting, Webstudio will set default names that match what you see in Webflow.
Breakpoints.
Responsive styles and breakpoints transfer to Webstudio. Webstudio breakpoints can be added, removed, and modified.
Things that won't transfer.
Variables, some Elements, and styles on global tags. See the documentation for a comprehensive list.
Next-gen builder, next-gen infrastructure.
Full power of CSS in a visual tool
Control every property, unit, and breakpoint (no-code).
Frontend that can talk to any backend
Fetch any HTTP API and bind response data.
Naming styles is optional
Create one-off style changes without having to name anything.
Reusable styles without classes
Build a large website without the pain of combo classes.
Scale without worrying about costs
From your first visitor to your billionth, pay only for what you use.
No hosting lock-in
You can self-host anywhere without paying Webstudio.
