Building your first React UI
Getting started with JSX.Design is simple and intuitive. Follow this guide to create a React UI effortlessly while maintaining full control over the design and code.
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.
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.
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.
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.
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.
Learn more about exporting your project here:
Exporting your codeNext Steps:
Congratulations! You’ve built your first React UI with JSX.Design. Ready to take it further?
Last updated