# Import from Framer Source: https://modulify.ai/docs/build/import-from-framer Bring a published Framer site into Modulify as editable pages, CMS tables, images and fonts, with the import's progress and warnings. **Import from Framer** brings a published Framer 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 Framer import. [Migrate from Framer](https://modulify.ai/docs/migrate/framer) explains how the migration works, what each part of a Framer site becomes, where the data is stored and how to fix a failed import. ## Start the import Click **+** on the prompt on Home, then choose **From Framer** under **Import**. The import dialog opens. Fill in the three fields, tick **I own this site, or I have permission to rebuild it.**, then select **Confirm**: - **Site address**: the address your Framer site is published at, such as `yoursite.framer.website` or your own domain. - **Framer project link**: the link to the project in Framer. - **Framer API key**: a key you create in the project's settings. The prompt then shows the site as a card with a screenshot of it, what the import found and an **Import site** button. 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 Framer** is greyed out, because a Framer import starts a new site. ## Create a Framer API key ### Copy the project link Open your project in Framer and copy the link from the address bar. It looks like `framer.com/projects/Name--abc123`. ### Open the settings Open **Site settings** and choose **General**. ### Create the key Under **API Keys**, create a key and copy it. ### Paste both into Modulify Paste the project link into **Framer project link** and the key into **Framer API key**. The dialog checks the key, and checks that the project is published at the address you entered. A key from another project, or an address the project is not published at, is refused before the site is created. The key reads the project as you. Modulify keeps it encrypted with your site, and the chat uses it to read your Framer project when it needs more than the import brought across. Once you delete the key in Framer, the chat works from what was imported. ## Publish the site first The site must be published in Framer before you import it, because only published pages are read. Draft pages are left out, and a page with changes you have not published yet comes across as it was last published, named in a warning. Draft CMS items come across marked as drafts, without pages of their own. Right after a publish, Framer takes a few minutes to prepare each page, and until then it serves the page empty. The import keeps reading a page that comes back empty for a while. A page that is still not ready is left out and listed as a warning, so import the site again a few minutes later to bring it across. ## Progress and warnings The import shows in the site's chat as a normal message that reads `Importing from Framer. 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 from Framer.`, 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 from Framer 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 key the site already has, so you do not create a new key. 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 - Every published page comes across as an editable React component at the same address, with its title, description, favicon, social share tags and robots tag. That includes pages hidden from search engines, each published CMS item page and the pages in each language. Links between pages point at the same addresses on your site. - The stylesheets Framer publishes are kept, so the layout for each screen width comes across as designed. Fonts that Framer hosts are copied into the site, and Google Fonts load from Google as before. - Images, videos and files that Framer hosts are copied to Modulify storage. Framer's resized versions of an image all use the copied original. - Entrance effects, such as layers and text that fade, slide or blur in, play when they scroll into view, and tickers keep scrolling. Visitors who ask their device for reduced motion see everything in place, without the movement. - CMS collections come across with their published items, saved as they were in the hidden `_import_rows` table of the site database. Draft items come across too, marked as drafts, 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. Text, formatted text, numbers, toggles, colors, dates, links, images and files keep their values, the alt text of CMS images comes across in a field next to the image, and option fields keep the name of the chosen option. Galleries are lists of images, and other lists are kept as structured data. A field that links to items of another collection holds their ids, and the AI turns it into a reference between the tables that you can edit in the CMS. - Translated text and formatted text in CMS fields come across in each language, and the AI gives the tables a column per language for 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, the form shows a thank-you message. - Redirects set in Framer come across as redirects in the site, including their copies for each language when a redirect applies to all languages. - A sitemap at `/sitemap.xml` lists the imported 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 Framer's address. - Each language of the site comes across at the same addresses as on Framer, such as `/fr` for French, and the site's language list is set from the import. A language picker lists the languages its page is published in and opens the page in the language a visitor picks. - Custom code from your site and page settings comes across. Scripts load from the addresses they used on Framer. - 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 with their item counts and fields under "Data from Framer", the languages, the pages that need work, what did not come across and the warnings. The project's color styles and text styles are saved next to them in `design.json`, and the source of the project's code components and overrides in `code/`, for reference only. The guide file at the root of the site, `CLAUDE.md`, points the chat at these notes. ## What is not imported yet - Hover effects, menus that open and close, sliders, site search and other interactions that Framer runs with its own code. You can rebuild them with the chat. - Components that only appear once Framer's own code runs in the browser, such as icons from an icon set. The import lists them as a warning when a page has any. - Redirects that use a wildcard. - Form submissions that Framer already holds. - Framer Analytics. ## After the import When the import finishes, the AI takes over on its own. It reads the import notes, builds the CMS tables from the saved items, 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 rebuilding. 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 Framer project directly through the import's connection: CMS items, a page as Framer publishes it, redirects, styles or code. While the import is still running, the chat tells you so and waits for it before changing files.