> For the complete documentation index, see [llms.txt](https://skyslit.gitbook.io/jsx.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://skyslit.gitbook.io/jsx.design/getting-started/markdown.md).

# Exporting your code

JSX.Design makes it seamless to export your designs into code, allowing for easy integration with popular frameworks like Next.js, Create React App (CRA), or any React-based projects.

## **How to export your code**

You can pull the generated code from JSX.Design directly into your React project using a terminal command. To begin, follow these steps:

{% tabs %}
{% tab title="NextJS Project" %}

* **Click on the Export Code Button**
  * Locate the **Export Code** button at the top-right corner of the canvas.
* **Copy the Terminal Command**
  * After clicking, you'll see a terminal command displayed.
  * Click on the **Copy Command** button next to the command to copy it to your clipboard.

> Command:
>
> ```jsx
> npx jsx-design@latest pull <unique_project_id>
> ```

* **Paste the Command in Your Terminal**
  * Open the terminal of your NextJS project and paste the copied command.
  * During this process, you will be prompted to install the required package (`jsx-design@0.0.17`). Simply hit "Enter" to proceed.
  * You will also be prompted whether to enable Watch mode. Hit 'Y' to enable it. [Learn more about Watch mode](#watch-mode)
* **Import the File to app.tsx**
  * Open **app.tsx**
  * Replace the placeholder contents with your file. For example, if the name of your canvas is 'auth', you can import it like: **`<authUI />`**
    {% endtab %}

{% tab title="CRA" %}

* **Click on the Export Code Button**
  * Locate the **Export Code** button at the top-right corner of the canvas.
* **Copy the Terminal Command**
  * After clicking, you'll see a terminal command displayed.
  * Click on the **Copy Command** button next to the command to copy it to your clipboard.

> Command:
>
> ```jsx
> npx jsx-design@latest pull <unique_project_id>
> ```

* **Paste the Command in Your Terminal**
  * Open the terminal of your React project and paste the copied command.
  * During this process, you will be prompted to install the required package (`jsx-design@0.0.17`). Simply hit "Enter" to proceed.
  * You will also be prompted whether to enable Watch mode. Hit 'Y' to enable it. [Learn more about Watch mode](#watch-mode)
* **Import the File to page.tsx**
  * Open **page.tsx**
  * Replace the placeholder contents with your file. For example, if the name of your canvas is 'auth', you can import it like: **`<authUI />`**
    {% endtab %}
    {% endtabs %}

## **Watch mode**

When you run the export command, JSX.Design provides the option to enable **Watch Mode**. This feature automatically syncs changes made in the editor with your codebase, ensuring your project stays up-to-date without manual intervention.

#### How it works:

* After running the export command, you'll be prompted:
  * “Enable watch mode? (Y/N)”
* Choose an Option:
  * **Press 'Y'** to enable Watch Mode.
    * Your code will automatically update every time you make changes in the JSX.Design editor.
  * **Press 'N'** to skip Watch Mode if you prefer manual updates.

<figure><img src="/files/EZiO4iIXuHUrg1VC4HVY" alt=""><figcaption><p>Watch mode when enabled will automatically detect changes you make in the editor and updates code automatically</p></figcaption></figure>

## **Global CSS warning**

Once the code is pulled, when you visit `localhost:3000`, a warning will be displayed in the output window, prompting you to import the global styles. You can resolve it by following the below steps:

{% tabs %}
{% tab title="NextJS Project" %}

* Resolve this by adding the following import in your **globals.css** file:

```css
@import './jsx-design/globals.css';
```

> If there is an existing `globals.css` file in your project, you may need to comment out or replace it with the current import to avoid conflicts.
> {% endtab %}

{% tab title="CRA" %}

* Resolve this by adding the following import in your **index.css** file:

```css
@import './jsx-design/globals.css';
```

> If there is an existing `globals.css` file in your project, you may need to comment out or replace it with the current import to avoid conflicts.
> {% endtab %}
> {% endtabs %}

***

## General notes

* Ensure that your project is React-based and compatible with JSX.Design's export process.
* If conflict arises due to any version mismatch between JSX.Design and your project, [refer this documentation](/jsx.design/troubleshooting/syncing-project-versions-between-jsx.design-and-ide.md) to resolve it.
* If conflict arises due to different project IDs or unsaved projects, [refer this documentation](/jsx.design/troubleshooting/handling-export-conflicts-for-unsaved-projects.md) to resolve it.
* If conflicts arise during the import of global styles, review your existing stylesheets for compatibility issues.
* For detailed troubleshooting, refer to the **Troubleshooting** section of this documentation.

***

#### **Next Steps:**

Kudos for exporting! Now let's style your canvas: