Paste html just like variables

At a glance

The community member was trying to make a solution work in Webstudio and thought it would be nice to copy and paste the entire thing. However, they found that HTML embed would not transition the layout well into the builder. The community member searched for solutions to paste HTML, but was unsure if it was possible. They saw a cool paste CSS solution and got thinking about it.

In the comments, the community member clarified that they would like to paste HTML and have it transformed into boxes with the relevant semantic tags, display types, and class attributions. The Webstudio team responded that it is not currently possible to paste HTML elements, but it is planned for the future.

The community members discussed the Webflow copy-paste functionality and how it works, noting that Webflow has a special data structure in JSON that enables the transformation. The Webstudio team explained that their AI integration is working on this functionality, and it will continue to improve over time.

There is no explicitly marked answer, but the Webstudio team indicated that the ability to paste HTML and have it transformed is planned for the future, and their AI integration is working on this functionality.

Useful resources

JJacob

I was trying to make this solution work in webstudio and thought it would be nice if I could just copy and paste the whole damn thing.

https://web.dev/patterns/layout/holy-grail

HTML embed would not transition the layout well into the builder to work with in the gui and so on.

Probably a somewhat stupid thought since it is probably not possible. But easy is effective, and that is something we all want.

And seeing the paste css-solution which was really quite cool ... well ... got me thinking, right 🙂

I did search for solutions with keywords paste and paste html before thinking this suggestion out loud in writing.

26 comments

JJacob

To clarify i would like to paste the html and have it transformed into boxes with the relevant semantic tags and displaytype and class attributions .. and everything else haha. Just like pasting variables is translated with values and variables into the builder.

MMilan Boisgard | Uncode School

it's not possible to paste HTML elements yet but it's plan!

OOleg Isonen

we will get there soon

MMr Bean

@Oleg Isonen I love the speed at which you make changes and how much you listen to your community. You are truly at the top! This is the first time I check a Discord community so many times a day 🙂

OOleg Isonen

Here is an issue to follow. We just discussed it, it depends on another 2 issues, so not quite as simple as I initially thought https://github.com/webstudio-is/webstudio/issues/4404

JJacob

@Oleg Isonen i have not tried the webflow copypaste, but how is that done ?

OOleg Isonen

wha'ts your question?

JJacob

@Oleg Isonen What happens when i do the copy paste webflow thing, is it transformed like i am suggesting into boxes with properties ?

OOleg Isonen

yes

JJacob

So why is it not working for my example with the holy grail layout , if its working with the webflow solution ? What is different ?

OOleg Isonen

webflow copy paste isn't working via html/css

OOleg Isonen

they have a special data structure in json

JJacob

And once again. Much appreciated what you do.

JJacob

Data and aria tags would be good to have covered as a part of the solution

OOleg Isonen

wf> ws should already work

JJacob

Oh I mean when I copy html that has datatype and arialabels i want them translated into the builder also.

Or I am not understanding ?

JJacob

Oh you mean webflow to webstudio ... Sorry 😀

cchandra

so what datastructure json file can we copy and paste. Is there a specific structure we can copy and paste json file.

cchandra

can we paste from jason?

BBogdan

You can paste only elements copied from webflow, instances from webstudio or markdown.

BBogdan

What do you need json for?

cchandra

so we can generate jason from chatgpt or another Ai in the format needed, to create basic structure and then build on making it beautiful

OOleg Isonen

It's not that simple, we spent months researching just that. Our AI integration is doing it

OOleg Isonen

And will get better at it

Add a reply

Join the Webstudio community

Paste html just like variables