# Building your first React UI

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

***

## Step 1: Drag & Drop Components

JSX.Design’s drag-and-drop interface allows you to visually build your UI, eliminating the need to write HTML tags manually.

**How to use:**

* Select components from the **Add panel** in the left sidebar and choose components from basic elements or library components like *Ant Design.*
* Drag the selected component and drop it into the design canvas.
* Position and align components as needed by dragging them around the canvas.

**Tip:** Use drag handles from the first-most set of tools on the right sidebar to adjust *height, width, margin and padding* & align components precisely for a polished layout.

***

## Step 2: Customize Components

JSX.Design gives you full control over the appearance and behaviour of every component. All changes reflect instantly on the canvas, ensuring rapid feedback and seamless customization.

**How to use:**

* Select the component you want to modify.
* Open the **Style Panel** on the left sidebar to update dimensions, colours, typography, and more.
* Configure properties in the **Props Panel** to adjust the behaviour of the component.

{% hint style="info" %}
You control all the styling visually, without directly modifying JSX code.
{% endhint %}

***

## Step 3: Organise Your Layers

The **Layers Panel** on the left sidebar gives you a hierarchical view of your UI, allowing for easy organization and rearrangement of components.

**How to Use:**

* Open the **Layers** tab from the left sidebar
* Drag and drop components within the tree to reorder them.
* See the layout update instantly as the hierarchy changes.

This structured view is particularly useful for managing complex designs with nested components.

<figure><img src="/files/pfL7yxmzQdICOVySGBNg" alt="The layers in a JSX.Design project"><figcaption><p>The Layers tab allows for easy organization and rearrangement of components.</p></figcaption></figure>

***

## Step 4: Use Built-In Libraries

We’ve integrated *Ant Design*, so you can drag and drop beautifully styled components like buttons, forms, and tables that look great out of the box.

**How to Use:**

* Scroll down to see **AntD Components** in the **Add Panel**.
* Drag and drop library components directly onto the canvas.
* Customize them using the **Style Panel** and **Props Panel** to fit your needs.

**Full Customisation:**

Even though these components are pre-styled, you have full control to adjust their look and feel. Tweak colors, props, and styles to make them match your project perfectly.

**Note:** Components retain their native React functionality, making them easy to extend and manage in your codebase.

{% hint style="info" %}
**Tip:** You can use *AntD library props* with AntD components. [Learn more about props.](/jsx.design/styling-ui/creating-and-using-props.md)
{% endhint %}

***

## Step 5: Export Your Code

Once your design is complete, you can export production-ready *JSX* or *TSX* code to integrate into your React project.

{% hint style="success" %}
**Magic Tip:** You can enable *Watch Mode* while exporting to sync JSX.Design with your code. So, whenever you make a change in JSX.Design, the code will update automatically.
{% endhint %}

Learn more about exporting your project here:

{% content-ref url="/pages/ZXxfwYY21Yz9PCv9X7ja" %}
[Exporting your code](/jsx.design/getting-started/markdown.md)
{% endcontent-ref %}

***

#### **Next Steps:**

Congratulations! You’ve built your first React UI with JSX.Design. Ready to take it further?


---

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