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:

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

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

  • 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 />

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.

Watch mode when enabled will automatically detect changes you make in the editor and updates code automatically

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:

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

@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.

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 to resolve it.

  • If conflict arises due to different project IDs or unsaved projects, refer this documentation 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:

PreviousMaking your UI responsiveNextBasic styling

Last updated