Join the Webstudio community

Updated last month

Importing a static website into Webstudio

At a glance

The community member has a question about importing a static website into Webstudio. They mention that a single HTML page can be easily copied and pasted, but they are unsure how to handle a modular code structure with separate HTML, CSS, and JavaScript files. The other community members respond that this is not the intended use of Webstudio, which is meant for building websites from scratch rather than importing existing code. They suggest it would be easier to just host the static website elsewhere, such as on Cloudflare Pages, instead of trying to import it into Webstudio. The community members agree that while importing would be convenient, it could lead to a messy codebase and defeat the purpose of using Webstudio to build clean, modular websites.

I have a question about importing a static website into Webstudio via code. Currently, if the code is a single (monolithic) full HTML page, it works perfectly after I copy and paste it into the "Code" box in the HTML Embed settings of a Webstudio project. However, for a modular code structure like index.html, styles.css, and script.js, how can we do this?
O
M
5 comments
This is not the intended way of using webstudio. If you have all the html/css/js you already built your website and could host it somewhere else?

Otherwise I don't understand your process. Essentially webstudio is used to build the site instead of copy-pasting something else into webstudio.
Thank you for the very quick response, Oleg. Yes, it is much easier to just deploy it on Cloudflare Pages, etc. I was just exploring the idea and possibility in the future if we could importing a website or web app to Webstudio and then modify or add thing further with Webstudio visual editor, etc.
But then again, it might be easier to just recreate the same thing here from scratch to modify.
yeah, it will be easier to import things, but its not gonna be full page with everything, its always gonna be things like copy some html, copy some css etc

Copy-paste as a tool to speed up your process, not as a way to just dump some bad html/css/js into webstudio and make it work somehow.
True, it would be a mess and defeat our purpose of building a clean code here.
Add a reply
Sign up and join the conversation on Discord