# 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:


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://skyslit.gitbook.io/jsx.design/getting-started/markdown.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.