📝 Webflow to Webstudio Copy/Paste

[itsNintu]

The Webflow to Webstudio Copy/Paste feature is a highly anticipated addition, providing an effortless transition for users migrating from Webflow. This feature will allow for the direct copying of elements, styles, and layouts from Webflow into Webstudio.

Todo

• [x] basic styles
• [x] basic plugin setup
• [x] custom attributes
• [x] preset styles
• [x] use class name as an instance label
• [x] preset states
• [x] style states
• [x] code embed
• [x] add toast in case of skipping unsupported elements
• [x] use preset styles w-something for each component that needs them
• [x] breakpoints
  • ensure there are no duplicate breakpoints
  • create one if not created
• [x] upload image assets and also use assets meta information from pasted object (currently skipped) @istarkov
• [x] forms (except select)
• [x] use unset value for variables
• [x] fix font-width @TrySound (after that rebuild mdn and rebuild wf preset)
• [x] make toasts go away on click
• [x] select element https://github.com/webstudio-is/webstudio/issues/3601 @istarkov
• [x] check form inputs/buttons state styles @kof
• [x] combo class conversion to tokens @kof
• [x] don't create extended breakpoints if there are no new styles on them @kof
• [x] parseCss needs to parse media queries @TrySound
• [x] compile webflow preset media queries @TrySound
• [x] background image @istarkov
• [x] ensure br in text translates @kof
• [x] style text via Span doesn't work @kof
• [x] use style source id generated from nanoid("webflow style _id" + "webstudio project id") @istarkov
  • when user copies instance from webflow to webstudio, we don't override existing tokens based on id
  • to resolve same token we would need to be able to diff token's css and provide a merge UI
• [x] parseCss doesn't support the list of vendor-prefixed non-standard properties (@TrySound )
• [x] convert shorthand css to long hands, e.g. text-decoration @TrySound
• [x] unset can't be used as part of border-left: 1px solid var(--property, unset) @TrySound
• [ ] what do we do with conditional styles like col-1 col-2 in the Columns component + inside media queries col-medium-1?
• [ ] navbar @istarkov
• [ ] Figure, Figcaption @kof
• [ ] dynamo DynamoWrapper, DynamoList, DynamoItem, DynamoEmpty, DynamoWrapper, DynamoList, DynamoItem, DynamoEmpty, DynamoWrapper, DynamoList, DynamoItem, DynamoEmpty
• [ ] wf custom css properties @TrySound
• [x] Quick stack bug https://github.com/webstudio-is/webstudio/issues/3734

After release

• [ ] handle duplication of breakpoints https://github.com/webstudio-is/webstudio/issues/3442

[TrySound]

Duplicate of https://github.com/webstudio-is/webstudio/issues/492

[studiolj]

it's possible to create. feature Framer to webstudio Copy/Paste ? its will be so amaizing ! Because i would like design irresistible website like framer :)

[ValtecSolutions]

Any idea when this feature will be available. I currently use Webflow, I'm anxiously waiting to start using Webstudio to transfer and create new sites over. Thanks

[DavHobbs]

Also be able to paste Relume Library components to WebStudio

https://www.relume.io/

[kof]

https://jsfiddle.net/7zj56veg/