Exporting your code
Last updated
Last updated
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.
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:
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.
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 />
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.
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.
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:
If there is an existing
globals.cssfile in your project, you may need to comment out or replace it with the current import to avoid conflicts.
Ensure that your project is React-based and compatible with JSX.Design's export process.
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.
Kudos for exporting! Now let's style your canvas:
If conflict arises due to any version mismatch between JSX.Design and your project, to resolve it.
If conflict arises due to different project IDs or unsaved projects, to resolve it.
