Bring custom code or other React libraries

JSX.Design allows you to bring custom code or other React libraries into your canvas even if specific components aren’t directly supported by the editor.

With the Portal component, you can inject any custom code you need and see it reflected in your IDE's preview.

How to Use the Portal Component for Custom Code

The Portal component in JSX.Design makes it easy to embed custom code without needing to modify the exported code manually. Here’s how to do it:

Step 1: Add the Portal Component in your canvas

1. Open your canvas in JSX.Design.

2. Add the Portal component to your canvas.

3. Navigate to Props tab on the right sidebar. Assign an Elem ID to the Portal component, for example, portal1.

Portals come with a default children prop, which you’ll use to pass your custom component via code.

Step 2: Export Code to Your IDE

Once you’ve added the Portal component, export your project’s code from JSX.Design and open it in your IDE.

See: Export code to your database

Step 3: Inject Custom Code into the Portal Component

To add custom code simply inject your code directly using the portalId_children in your IDE:

portal1_children = {
  // Insert any custom code here
};

---

Things to remember

• The JSX.Design editor will not render the third-party component or custom code. However, the output in your React application will display the updated content.

• This approach works for any React library or custom component, giving you unparalleled flexibility.

---

Next Steps:

Great! Now get ready to build the most advanced UIs with eject.