Last updated: March 2026 Category: Designing Your App

Overview

Once you've created a template, you'll likely want to refine it — reorder sections, swap out images, tweak colors, or add new components. This guide covers everything you need to know about editing an existing template in the Template Builder.

Step-by-Step Guide

Step 1: Open an Existing Template

Navigate to Designing Your App → Template Builder and click on the template you want to edit. The Template Builder editor opens with your saved layout loaded in the Phone Preview.

[Screenshot: Template list with an existing template selected for editing]

Step 2: Select a Component

Click on any component in the Phone Preview to select it. A highlight border appears around the component, and the Inspector Panel on the right updates to show that component's settings.

[Screenshot: A selected component in the Phone Preview with the Inspector Panel open]

Step 3: Edit Component Content

Use the Inspector Panel tabs to make changes:

Content tab — Update text, images, links, product sources, or any data the component displays.
Layout tab — Adjust spacing, padding, margins, alignment, and column configurations.
Settings tab — Change behavioral options like auto-play speed, visibility toggles, or animation preferences.

Changes appear in the Phone Preview as you make them.

Step 4: Reorder Components

To change the order of components on the home screen:

Hover over the component you want to move in the Phone Preview.
Click and drag the component up or down.
Release it at the desired position.

The preview updates instantly to reflect the new order.

[Screenshot: Dragging a component to a new position in the Phone Preview]

Step 5: Clone a Component

If you want to duplicate an existing component with all its settings:

Select the component in the Phone Preview.
Click the Clone icon in the component toolbar.
A copy appears directly below the original with identical settings.

This is useful when you need multiple similar sections, like a series of banners with different images but the same layout.

Step 6: Delete a Component

To remove a component from your template:

Select the component in the Phone Preview.
Click the Delete icon in the component toolbar.
Confirm the deletion when prompted.

The component is removed and the remaining components shift to fill the gap.

Step 7: Preview Your Changes

The Phone Preview updates in real time as you edit. Scroll through the preview to review the full layout. Check that images load correctly, text is readable, and the overall flow feels natural.

Step 8: Save Your Changes

Click Save to store your updates. If the template is currently active, your changes will go live immediately after saving.

Key Concepts

Live editing — If a template has isActive toggled on, saving your edits pushes changes to your live app. If you need to make extensive edits without affecting customers, consider duplicating the template, editing the copy, and swapping the active flag when ready.
Component toolbar — Each selected component shows a small toolbar with icons for Clone, Delete, and a drag handle for reordering.
Undo — Use your keyboard shortcut (Cmd+Z on Mac, Ctrl+Z on Windows) to undo recent changes within the current editing session.

Tips

If you need to make major changes to a live template, duplicate it first. Edit the copy, then activate it when everything looks right.
Use the Clone feature to speed up building repetitive sections instead of configuring each one from scratch.
Always scroll through the entire Phone Preview after making changes to catch any layout issues.
Save your work regularly, especially before reordering multiple components.