> Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: About Exporting Your Site to Code ## Article: About Exporting Your Site to Code ## Article Link: https://dev.wix.com/docs/studio-two/code-your-site/export-your-site/about-exporting-your-site-to-code.md ## Article Content: # About Exporting Your Site to Code
__Alpha:__ Exporting your site to code is currently in alpha. This feature is subject to change and may have bugs, issues, and limitations. We're actively improving it based on your feedback.
You can export a Studio Two site as React source code and host it on your own infrastructure, work on it outside Wix, or import your changes back into Wix. The export is a complete, runnable project. With an exported site you can: - Build the site and serve it from any host you choose. - Keep the code in your own version control and run it through your own tooling. - Open the site in an IDE or hand it to a coding agent and change its code. - Run the site locally to preview your changes. - Import your changes back into Studio Two. An exported site is built to go in both directions. Its code follows the conventions Studio Two uses for pages, components, and extensions, so changes you make outside Studio Two, by hand or with a coding agent, can import back into the site. Each export is a copy of the site at that moment, so importing replaces the site with the exported site's version and overwrites any changes made in Studio Two since you exported. ## Exported site contents An exported site is a Yarn workspace with a site package, and a code package if the site has a code project. - **[Site package](#site-package) (`packages/site-app`):** Pages, shared sections such as the header and footer, and the site's menus and theme. - **[Code package](#code-package) (`packages/site-code`):** The site's code project, if it has one, where Editor React Components (ERCs), Data Sources, and other extensions live, exported as a standard Wix CLI app. ### Resources for coding agents An exported site is designed to be edited with a coding agent such as Claude Code or Cursor. The workspace includes files that tell the agent how to work on the site, so you can describe a change in plain language without explaining the rules yourself. - **Agent instructions (`AGENTS.md`, `CLAUDE.md`):** These tell the agent to make every change in a form Studio Two can import, and to follow the editing skill before changing anything. - **Editing skill (`.claude/skills/wix-site-edit`):** The rules for editing pages, shared sections, the theme, and menus in a form the import accepts, with reference material and step-by-step playbooks for tasks such as adding a page or a section. It points to companion skills for setting up the CLI, looking up components, and building a new ERC. - **Component catalog (`packages/site-app/component-catalog.md`):** Every component the site can use, grouped by kind, with a short description of each. - **Component contracts (`packages/site-app/llm-context`):** One file per component, describing its props, the CSS properties you can set, its presets, and its inner parts. ## Site package The site package is React, written in a particular style. Each element maps to one the Studio Two editor understands, so your changes import back into the site. In the site package, you can: - Add, remove, nest, and reorder the components the site's catalog offers. - Set each component's props, using values its contract allows. - Change layout and style through CSS, within each component's list of allowed properties. - Change the site's theme, including colors, fonts, text styles, and the shared button and box styles that pages apply. Page files describe the components on a page and how they look. To add behavior, build it in the [code package](#code-package) with any extension the site supports, for example an ERC for custom UI or a Data Source that shares data and functions with the components on a page. ## Code package The code package is a standard [Wix CLI app](https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-the-cli/about-the-wix-cli.md), and the extensions you build there work the same way they do in the [**Code** tab](https://dev.wix.com/docs/studio-two/get-started/about-the-code-tab.md). Pages in the site package use your extensions just like built-in components. An ERC you create here appears on a page like any component from the catalog, and your Data Sources attach to the components that use them. ## Preview, build, and host An exported site runs locally as a preview, so you can see your changes before you import or host them. Each page in the site package becomes a route, so a new page appears in the preview without any extra setup. The preview shows how a page looks, and the project's lint checks whether the import will accept it. The lint applies the import's rules to the site package locally, so you can catch most problems before you import. Building the site produces a Node server that serves each page, along with the site's 404 page for unknown URLs. You can host it on any platform that runs Node. Hosting is independent of Wix, but the running site isn't. It loads fonts and media from Wix and calls Wix APIs for any business features on the page. Think of an exported site as a frontend you host for a site Wix still runs. ## Import back into Studio Two Importing an exported site replaces the site with the exported site's version: - **Pages:** The import replaces the site's pages with the exported site's pages. It deletes and adds again every page except the home page, so those pages get new IDs. Their URLs stay the same. Pages that aren't in the exported site are deleted. Lightboxes are also deleted and added again, with new IDs. - **Shared sections, menus, and theme:** The import replaces them with the exported site's versions. - **Code:** The import replaces the site's code with the code package. If the exported site has no code package, the import leaves the site's code as it is. The import doesn't change the site's installed apps, CMS collections, or other site data, and it doesn't publish the site. ## Current limitations Some site features aren't supported in an exported site yet: - **Dynamic pages:** A site with dynamic pages can't be exported. - **Lightboxes:** Lightboxes are exported and kept when you import, but they don't appear on the running site. - **Widgets from installed apps:** A page with a widget that an installed app provides, other than an ERC, fails in the preview and in the build. - **Member login:** Visitors can't log in to an exported site. - **Custom code that needs visitor consent:** Analytics, marketing, and other custom code that waits for visitor consent doesn't load. ## See also - [Export Your Site to Code](https://dev.wix.com/docs/studio-two/code-your-site/export-your-site/export-your-site-to-code.md) - [Edit an Exported Site](https://dev.wix.com/docs/studio-two/code-your-site/export-your-site/edit-an-exported-site.md) - [Import Changes to Your Site](https://dev.wix.com/docs/studio-two/code-your-site/export-your-site/import-changes-to-your-site.md) - [Host an Exported Site Outside Wix](https://dev.wix.com/docs/studio-two/code-your-site/export-your-site/host-an-exported-site-outside-wix.md) - [About the Code Tab](https://dev.wix.com/docs/studio-two/get-started/about-the-code-tab.md) - [About Editor React Components](https://dev.wix.com/docs/studio-two/code-your-site/code-model/editor-react-components/about-editor-react-components.md)