Join the Webstudio community

Updated 2 months ago

Import a static website into Webstudio

At a glance

The community member is trying to migrate multiple single-page websites from HTML/CSS (Tailwind) code into webstudio.is so their marketing team can update the websites themselves. They are asking if there is an import function inside the webstudio builder to help with this migration. The webstudio team responds that they have plans to add the ability to paste HTML, which would make this process easier. However, they note that pasting the entire site may be challenging for maintainability. The community member shares some example websites they would like to migrate, and another community member offers a "quick and dirty" script they have been using to convert HTML to webstudio AST, which can then be pasted into webstudio. The community members continue to discuss the challenges and limitations of this approach, and the webstudio team confirms they will be adding the ability to paste HTML to make the migration process simpler.

Useful resources
Hello!

I'm trying to migrate multiple single-page websites from HTML/CSS(tailwind) code into webstudio.is so our marketing team can update these website themselves, maybe I missed an import function inside webstudio builder?

Is there any way to do it? (it would greatly help us migrate our websites to webstudio :))
J
@
14 comments
On our roadmap is to be able to paste HTML.

You can currently paste CSS on a single instance (no selectors).

I'm personally not a fan of the concept of pasting in the whole site.. I think that'll be rough on maintainability. Pasting in HTML can be a big boost in rebuilding it though
Yes, that’s exactly our goal, faster the transition and then continue to build it from webstudio 🙂

in the meantime could you please give some pointers on where I should take a look at the builder codebase level to try to implement a quick and dirty import feature?
Do you have an example site? I have a work in progress aka quick and dirty script I use as I'm creating a lot of templates for the Marketplace. I use it to convert image to html (AI) and then html to Webstudio AST which can be pasted into Webstudio.

It's very rough though and probs pretty opinionated and restrictive based on what I am doing with it.

I would normally not share it but you're about to embark on the same thing I did. I didn't consult with any of the engineers though (I'm growth/product/education here, not engineer). I just reverse engineered various instances I copied out of Webstudio
I would like to move theses website to Webstudio
" I have a work in progress aka quick and dirty script I use as I'm creating a lot of templates for the Marketplace. I use it to convert image to html (AI) and then html to Webstudio AST which can be pasted into Webstudio."
🤩 yes please share 🙏
I extracted the two relevant files.

Disclaimers: very rough, opinionated for what I'm doing, not official, I code like one thing per year, lots of missing features, may cause drowsiness
I fixed it but then I copy the JSON stringified output and try to paste it into webstudio and it does not work @John Siciliano
Attachments
image.png
image.png
paste into here and copy back out with json radio toggled https://webflow-copy-paste.wstd.io/
oh!
It's better but not quite there ^^
Attachment
image.png
Havent seen that one. I'd break it into smaller chunks
hum indeed, we are far from an importer, I understand the idea but we will need a better HTML import support in webstudio to move our website to you (sadly)
We are going to add paste HTML which will make this as easy as copy paste
Add a reply
Sign up and join the conversation on Discord