Join the Webstudio community

Updated 6 months ago

Skipping Unsupported Elements When Copying UI Components

At a glance

The community member is having an issue when trying to copy UI components from Webflow, Relume, or Flowbase, receiving an error message "Skipping unsupported elements". Other community members suggest rebuilding the components using similar ones in Webstudio, and provide a link to documentation on copying and pasting from Webflow. The community members discuss the challenges of transferring a Webflow navbar component to Webstudio, noting that it may not map 1:1 and that the community member should consider using Radix components like Radix Sheet and Radix Navigation Menu instead.

Useful resources
Any time I try copying UI components from Webflow, Relume or Flowbase, I keep getting this error message " Skipping unsupported elements"

What should I do in this situation?
J
B
O
28 comments
View what they are and rebuild them with similar components in Webstudio. You can see the list here https://docs.webstudio.is/university/foundations/copy-paste/webflow
Thank you John, I will try this out.
It literally informs you what has been skipped, so you are not surprised when something is missing
I noticed that.

Actually, it's my first time using Webstudio, and I'm finding it really interesting
How do I rebuild with similar components? Seems I might be doing something that isn't right...
Which component?Would need an example to provide any feedback
Untitled UI Nave component
What's it pasting in like? Navbars are one of the few or only components that do technically transfer but I don't think they'll map 1:1 as Webflow and Webstudio use very different components and navbars are kind of complex
After pasting, it looks good of large screen but broken on smaller screens
I'll send screenshots right away
Here are screenshots of how it looks on differrent screen sizes
Attachments
Webstudio_3.PNG
Webstudio_2.PNG
webstudio_1.PNG
Can you paste it into here from the ui library so i can test it https://webflow-copy-paste.wstd.io/
and provide me the output
I got some JSON text
Trying to send you that
I'm unable to copy and paste the JSON
Attachment
Webflow_json.PNG
@Oleg Isonen it's copied as application/json so how should he share it? I have a way with the clipboard online tool but wasn't sure if there was a different process because of this tool
uhh need a button to copy it as text, let me add this real quick
ok done, you can now choose to copy as text
It's working now
Thank you @Oleg Isonen
Here is the output
works well thanks oleg. So i see it like this on mobile. Honestly, even though these do transfer, nav component is probably the only one id say just rebuild it anyway. It transfers as just divs/boxes but you should really use Radix Sheet for mobile and Radix Navigation Menu for desktop. They offer lots of functionality like dropdowns
Attachments
image.png
image.png
Radix it is πŸ‘ Thank you for your support.
Add a reply
Sign up and join the conversation on Discord