Custom components in JSX.Design let you reuse groups of elements effortlessly. Instead of recreating similar structures repeatedly, you can combine elements, save them as a custom component, and drag them into your canvas whenever needed.
How to create a custom component
Option 1: From the Canvas
Right-Click an Element:
Open the Layers panel and right-click on a div or any block.
Select "Add to Components" from the menu.
Name Your Component:
Enter a name for the new custom component.
Click "Create" to save it.
Edit the Component:
A new canvas will open for the custom component.
Make any changes here, and these updates will automatically reflect on all instances of this component across your project.
Option 2: From My Projects
Navigate to My Projects:
Open the My Projects modal and select the desired project.
Create a Component:
Click the "+" button within the project.
Name your custom component and select "New Reusable Component".
Click "Create File".
Locate Your Component:
The custom component will appear inside the project's components folder, ready for us
Exporting custom components
Export custom components as JSX or TSX, just like regular components.
When you export a project, all custom components are stored separately inside the components folder for easy organization and reuse.
Editing a custom component
Option 1: From the Canvas
Right-Click on the Component:
Select "Edit this Component" from the menu.
Update the Component:
Make edits on the custom component's canvas.
All changes will automatically sync across all instances of the component.
Option 2: From My Projects
Open My Projects:
Select the project containing your custom component.
Find and Edit:
Inside the components folder, select the custom component you want to modify.
Click "Edit in Canvas" to open and update it.
Deleting custom components
Deleting from a canvas
Right-Click the custom component in the canvas and select "Delete" to remove it from the current canvas.
Deleting the component from project
Open My Projects, select the project containing the custom component, and navigate to the components folder.
Right-click the custom component and select "Delete" to remove it entirely from the project.
