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.

Repeating Sections

Repeating sections are a powerful feature that lets players dynamically add and remove rows of data — think inventory items, spell lists, attack entries, or class features. Instead of creating a fixed number of slots, you design one template row and the VTT handles letting players create as many copies as they need.

For complete Roll20 documentation on repeating sections, see the Roll20 Repeating Sections wiki page.

How Repeating Sections Work

A repeating section has two parts:

1. The section container — A special container with a name that starts with repeating_ (e.g., repeating_inventory, repeating_spells, repeating_attacks).
2. The template row — The components inside the container define the fields that each row will have. On Roll20, players see an "Add" button that creates a new copy of this template row.

When a player clicks "Add", a new row appears with all the same fields. Each row gets its own unique ID, so the attribute names automatically become unique (e.g., repeating_inventory_-ABC123_item_name).

Creating a Repeating Section

1. Drag a Repeating Section component from the Layout & Basic group in the sidebar.
2. You will be prompted to name the section (e.g., "inventory"). SheetArchitect automatically adds the repeating_ prefix.
3. The repeating section container appears in your layout.
4. Add components inside it to define your template row — inputs, labels, buttons, whatever each row should contain.

For example, an inventory repeating section might contain:

• A text input named item_name
• A number input named quantity
• A number input named weight
• A text area named description

Each inventory row the player creates will have all four of these fields.

Naming Rules

Roll20 enforces strict naming conventions for repeating sections:

• The section name must start with repeating_ followed by a lowercase name with no spaces.
• SheetArchitect handles the repeating_ prefix automatically — you just provide the section name (e.g., "inventory").
• Attribute names inside the repeating section should not include the section prefix. Just name them as you normally would (e.g., item_name, not repeating_inventory_item_name). Roll20 handles the full path at runtime.

Nesting Restrictions

Roll20 does not support nesting repeating sections inside other repeating sections. You cannot have a repeating_spells inside a repeating_spelllevels, for example. SheetArchitect prevents you from accidentally creating this invalid structure.

Roll Buttons Inside Repeating Sections

Roll buttons inside repeating sections are a common and powerful pattern. For example, an attack row might have a roll button that rolls the attack using the values from that specific row. SheetArchitect handles the attribute name scoping automatically — a button named attack_roll inside repeating_attacks will correctly reference the attributes from its own row.

Adding Rows to Prebuilt Repeating Sections

Some prebuilt layouts include repeating sections (like the D&D 5e Actions Section or Inventory Section). After adding one of these prebuilts, you can modify the template row just like any other component — add fields, remove them, rearrange them, or change their properties. The repeating section context menu also offers an Add Row Field option for quickly inserting common field types.