Export your Framer Next.js code to GitHub

From converted site to reviewed source

1. 01

   Select the export you intend to keep

   Convert your published Framer site first. Choose the Next.js converter when you need generated React source. FNJ decomposes the public Framer markup into named sections and page views while keeping Framer's runtime for fidelity. This is a code project, not an export of Framer's editing workspace. For React and Next.js files, select original generated source in FNJ's GitHub export dialog.

2. 02

   Prepare a repository you control

   Create a dedicated GitHub repository with an initial commit, such as a README. In FNJ's Push to GitHub action, enter owner/repository and a fine-grained token with Contents: Read and write access to that repository. Enter the token directly in FNJ, not in an agent conversation.

3. 03

   Review the export commit

   Open the fnj-export branch and the fnj-site/ folder. Check package.json, generated section files and page views. Run the exported project's build command and inspect its preview before merging a source change. Review additions, changes and removed files before opening a pull request. FNJ's export keeps the default branch unchanged.

4. 04

   Choose how future changes reach the repository

   Use your code editor for repository changes. When exporting another version from FNJ, review the refreshed export branch before merging again; changes made outside FNJ may need manual reconciliation. Keep related styles and assets in the same change so previews are reproducible.

5. 05

   Configure hosting separately

   Run the generated project's documented install and build steps from the folder containing package.json. Choose a hosting setup suitable for its output. A repository push is not a deployment, and application source is not a folder of prebuilt HTML files.

Check the files in your export branch

FNJ writes under fnj-site/ on fnj-export. The Next.js source should include package.json and the generated application files. File names and asset folders vary by capture; inspect the actual export rather than creating placeholder files.

fnj-export branch
└── fnj-site/
    ├── package.json
    ├── src/sections/
    ├── src/views/
    └── application files, scripts and assets

If fnj-site/ already belongs to another project, use a separate repository. A later FNJ export refreshes its managed folder, so review your edits before using the export action again.

Framer to GitHub: questions

Does exporting Framer code to GitHub make the website live?

A push stores code in a repository. Publishing needs a separately configured host or deployment workflow. FNJ's export branch does not automatically enable GitHub Pages or connect Cloudflare Git integration.

Which branch and folder does FNJ use?

FNJ writes to the fnj-export branch under fnj-site/ and does not change the default branch. Review the commit before merging. Keep a dedicated repository for the exported site when practical.

Will later changes in Framer automatically sync to GitHub?

No. Review and export a new version when you want an update. Choose the original generated source in FNJ's GitHub export dialog to keep the Next.js project. Current HTML with saved site changes is a different artifact. Do not assume draft changes made through FNJ MCP are already reflected in the original React source; check which version you intend to hand off.

Can my connected MCP agent push these files for me?

FNJ MCP can identify the site but cannot itself export files or push to GitHub. An agent needs authorized browser access to FNJ's GitHub action, or a downloaded ZIP and its own authorized GitHub connection. Enter credentials directly in the relevant service, never in the prompt.

Continue with the right setup

Converting requires a signed-in FNJ account and current conversion access. Review FNJ pricing for purchase terms. For help using your own agent, follow the deployment guide and prompt library.