> For the complete documentation index, see [llms.txt](https://skyslit.gitbook.io/jsx.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://skyslit.gitbook.io/jsx.design/getting-started/editor.md).

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