Custom Components

Beyond the built-in components and prebuilt layouts, you can create your own reusable patterns. Custom components let you save a component tree you have built and reuse it across your sheet or across different projects.

Creating a Custom Component

There are two ways to create a custom component:

From an Existing Component

1. Build the component structure you want in the layout — for example, a stat row with a label, an input, and a modifier display.
2. Right-click the root of that structure in the Element Hierarchy.
3. Select Save as Custom Component from the context menu.
4. Give it a name (e.g., "Stat Row" or "Resource Box").

The component and all its children are saved as a reusable template. It appears in the Custom Components section at the top of the Component Sidebar.

From Scratch

1. Click the + button in the Custom Components section header in the sidebar.
2. A dialog appears asking for a Component Name (e.g., "Stat Row" or "Resource Box").
3. Click Create. SheetArchitect creates a new custom component with a default empty container (a div with a dashed border) that you can build on.

The new component appears immediately in the Custom Components section of the sidebar, ready to drag into your layout. Edit it by clicking the edit button next to it in the sidebar.

Using Custom Components

Once saved, custom components work just like any other sidebar item:

• Drag and drop them from the Custom Components section onto the canvas or into the hierarchy.
• Each time you add a custom component, SheetArchitect creates a fresh copy with new unique IDs — so changes to one instance do not affect others.

You can edit a custom component by clicking the edit button next to it in the sidebar. This opens the component editor where you can modify its structure. Changes to the custom component definition affect future uses, but instances already placed on your sheet are not retroactively updated.

To delete a custom component you no longer need, click the delete button next to it in the sidebar.

Copy and Paste

For quick one-off duplication without saving a formal custom component, use copy and paste:

1. Select a component (or container with children) in the hierarchy.
2. Right-click and choose Copy, or press Ctrl+C / Cmd+C.
3. Select the container where you want to paste.
4. Right-click and choose Paste, or press Ctrl+V / Cmd+V.

The pasted copy gets new unique IDs but preserves the structure, labels, and attribute names. You will typically want to rename the attributes on the pasted copy so they do not conflict with the original.