Creating reusable components

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.

• Note: This action is irreversible.

---

Next Steps:

Great! Let's move on to other exciting topics: