You don't have to rebuild a site to test it with Mockly. Import it: its pages come along with their styles, fonts, and images, and look as they did. Then add experiments to them like any other page.

Importing a site#

On the sites home, click New site, give it a name, and pick Import a site. Then choose where it comes from:

Web address. Give the address of a page, usually the home page. That page and the pages it links to on the same site come along, up to 20, following links two steps deep.
Files. Upload a ZIP of the site's files, and every HTML page in it comes along, up to 50, with index.html as the home page. One HTML file works too, though files it names by relative URLs need the ZIP.

Sites built with Webflow or Next.js import either way. From Webflow, use its code export, which gives you a ZIP. From Next.js, give the address of a running site, or set output: "export" in next.config and zip the out/ folder that next build makes.

An import can take a minute. When it's done, you see what it did: each page and its route, the files it brought along, what it left out, and anything that still loads from the original site.

What comes along#

Pages, each as a file in pages/, with its route from its address: /about.html and /about/ both become /about. The page you started from is the home page.
The head: the title, description, favicon, share image, theme color, noindex, and structured data become <Page> props, as if you'd written them.
Stylesheets, fonts, and images, downloaded into public/imported/, including fonts and stylesheets from other sites (published pages may only load their own). Images past the import's limits keep loading from where they were.
Links to the pages you imported point at their new routes. Links to other pages go to the original site.

What's different#

The site's JavaScript doesn't come along. Pages are read as a browser without JavaScript would show them. Sliders, menus that open with a script, and animations need rebuilding as interactive parts. A page that builds its content with JavaScript imports nearly empty.
Forms keep posting where they did, on the original site. To collect submissions in Mockly, use <Form>.
Mockly's utility classes are off on imported pages, so nothing changes how they look. Style them with their own classes, or a style attribute.
Some markup is rewritten: inline event handlers and scripts are left out, old elements like <center> become what browsers show them as, and an SVG using features Mockly's markup doesn't support becomes an image file when it can stand on its own.

How an imported page keeps its look#

An imported page's <Page> turns Mockly's own styles off, and links its stylesheets:

TSX

<Page  title="Northwind Coffee"  utilities={false}  stylesheets={["/imported/css/site.css"]}  bodyAttributes={{ class: "body" }}>

utilities={false} leaves out Mockly's reset and utility classes on this page, so its CSS meets the browser's defaults, as it was written for.
stylesheets links the page's CSS files from public/, in the order the original had them.
htmlAttributes and bodyAttributes keep the classes and attributes the original had on <html> and <body>, which stylesheets often select.

These props work on any page. See Pages and routes for the rest of <Page>.

After importing#

An imported page is an ordinary Mockly page. Wrap a section in an <Experiment> to test it, change its words in Content mode, and publish when it's ready.

Limits#

An import brings at most 20 pages from an address, or 50 from a ZIP; 2,000 files, each up to 10 MB and 100 MB in all; and a ZIP up to 50 MB. A page too long for one file is split into components in components/imported/, one per run of sections, and looks the same; the report says how many parts it has. In the studio's dev mode, an address on your own computer works too, so you can import a dev server running on another port.