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

{% embed url="<https://youtu.be/CJOZMoh__jM>" %}

## 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.&#x20;
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`.

{% hint style="info" %}
Portals come with a default `children` prop, which you’ll use to pass your custom component via code.
{% endhint %}

### 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.&#x20;

See: [Export code to your database](/jsx.design/getting-started/markdown.md)

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

```jsx
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.


---

# 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/advanced-features/bring-custom-code-or-other-react-libraries.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.