Import from Webflow

Import from Webflow brings a published Webflow site into Modulify. The import runs in the background, and the site's chat shows its progress and warnings. The prompt field does not apply to a Webflow import. For the whole move, from the connection to your domain, see Migrate from Webflow.

Start the import

Click + on the prompt on Home, then choose From Webflow under Import. The import dialog opens. Connect your site in the dialog, then select Confirm.

The prompt then shows the site as a card with a picture of it, what the import found and an Import site button. The picture is the one Webflow makes of the site, so a password protected site shows its design rather than its password page. The dialog then warns The home page asks for a password, so the pages behind it cannot be read. Remove the password in Webflow and publish the site again, then import it. When Webflow has none, it is a screenshot of the published home page. Use the pencil to change the site or the cross to remove it, and select Import site to create the site and start the import. Inside a project's chat, From Webflow is greyed out, because a Webflow import starts a new site.

Connect your site

The import dialog connects to Webflow in one of two ways. Choose the one you want in the dialog.

• Connect a Webflow app uses a Data Client app that you create in your Webflow workspace.
• Use a site token uses an API token that you create for the site in Webflow.

Connect with a Webflow app

The app connection expires after a short time. If it expires, the dialog shows Connection expired, and Start again gets you a new connection.

Connect with a site token

Publish the site first

The site must be published in Webflow before you import it, because only published pages are read.

Progress and warnings

The import shows in the site's chat as a normal message that reads Importing <site name> from Webflow. The AI takes over as soon as it finishes., with a row under it that shows the step it is on and a count such as 2/5. Select the row to open the activity panel with the steps in order: Reading the site, Copying images, Saving the data for the AI, Building pages and Saving pages. While a step reads pages, copies images and files, or saves records, its row also counts them, such as Copying images (340 of 2,100).

When the import finishes, the message reads Imported <site name> from Webflow., the row reads Did 5 actions, and the chat lists any warnings under Warnings from the import.

If the import stops

If the import stops for a reason you do not have to fix, such as a restart on Modulify's side, it starts again on its own once, and the message adds The first try stopped, so the import started again on its own.

If it stops again, or stops with an error you have to fix first, the message reads The import of <site name> from Webflow stopped., and an alert under it shows the reason and Try again. Choose it and confirm. Modulify removes what the failed run created, its pages, code and the data it saved, and then imports again from the connection the site already has, so you do not connect again. Changes you made to those parts since the failed run are lost. Only people who can edit the site can use the button.

What comes across

• Static pages come across as editable React components at the same paths, with their titles and descriptions. Nested pages keep their paths. Their favicon and social share images are copied to Modulify storage. A page that Webflow hides from search engines stays hidden.
• The published stylesheets are kept as Webflow exports them, so design variables and classes come across as written.
• Page scripts come across with each page, so Webflow interactions and animations carry over. Check them on the imported site, because they have not been tested on every site.
• Script blocks in the page body come across as they were.
• CMS collections come across with their published items, saved as they were in the hidden _import_rows table of the site database. Draft and archived items come across too, marked as drafts or archived, and get no page of their own. As soon as the import finishes, the AI builds the CMS tables from them, usually one per collection, and picks their names itself. Each published CMS item also has its own page at the same address, in each language that is published. These item pages are copies of the published pages, and the AI connects them to their tables when it takes over. Until a page reads its table, a later change to an item does not change its page. The import says how many items of each collection are drafts or archived. Item pages are found through the published sitemap, and through the links on your pages and the collection's address when the sitemap is missing or leaves an item out.
• A reference field in a collection holds the id of the item it names, and a field that names several items holds a list of ids. The AI turns them into references between the tables, which you can edit in the CMS.
• Products come across with their SKUs, and each published product has its own page at the same address. Each SKU keeps its stock: whether it is tracked and how many are left. Checkout is not available yet, so the buy buttons on product pages do not take payments.
• Orders come across with everything Webflow returns for each order, such as its status, currency and totals, the customer's name and email, the addresses, the items bought and the payment details. They hold personal data, so the AI builds their table from the list of their fields without reading them.
• Forms keep their fields. A submission is saved in the site's database before it is emailed to the site's address, which forwards it to you, so a submission is kept even when its email cannot be sent. After a submission, visitors go to the page that Webflow sends them to, when the form has one.
• Form submissions that Webflow already holds come across too, each with the name of its form, the fields the visitor sent and the time it was sent. The AI loads them into the same table of the site's database as new submissions, without reading them.
• If Webflow does not return the orders or the form submissions, for example because the token is missing a scope, or the site has more of them than one import reads, the import says so in its warnings.
• Redirects set in Webflow come across as redirects in the site. Webflow lists redirects only for Enterprise workspaces, so the import reports when it cannot read them.
• A sitemap at /sitemap.xml lists the imported pages, including the pages in each language and the CMS item pages. Pages hidden from search engines and the 404 page are left out.
• The robots.txt file of the published site is copied. Its sitemap lines are left out, because they point at Webflow's address. A robots.txt that blocks every search engine, as a staging address can, is not copied, and the import says so.
• Each language declared on the Webflow site comes across under its own address, such as /fr for French, and the site's language list is set from the import. Translated text in plain text and rich text CMS fields comes across in each language, and the AI gives the tables a column per language for it.
• Privacy policy, terms and other legal pages come across as ordinary pages, with their text as published.
• Images and files are copied to Modulify storage, including the ones used in CMS items, rich text, products and the stylesheets.
• Notes for the chat are saved in the site's code at .modulify/import/README.md, with the same details in manifest.json next to them. They list the pages, which pages were copied from CMS items, the CMS collections, products, orders and form submissions with their item counts and fields under "Data from Webflow", the languages, what did not come across and the warnings. The guide file at the root of the site, CLAUDE.md, points the chat at these notes.

What is not imported yet

• Checkout and payments.
• Canonical and language link tags, which point at the Webflow address.
• Webflow's confirmation emails to visitors.
• Spam protection for forms.
• A site that is password protected in Webflow. Its pages cannot be read, so turn the password off in Webflow before you import it.

After the import

When the import finishes, the AI takes over on its own. It reads the import notes, builds the tables from the saved records, connects the pages that show them, such as a blog list or the copied CMS item pages, to those tables while keeping them looking the same, and checks the pages. Then it answers with the pages, the tables it built with their row counts, the languages, the warnings and what still needs work. The automatic message that starts it is not shown, so the import flows straight into its answer. If you were already chatting when the import finished, the chat gets the same notes with your next message instead.

The chat builds on the imported site and never starts it over. When it needs more than the notes, it reads your Webflow site directly through the import's connection: the site and its languages, the pages and any page as Webflow publishes it, the CMS collections and their items, the products, the redirects and the forms. While the import is still running, the chat tells you so and waits for it before changing files.