> For the complete documentation index, see [llms.txt](https://docs.uichemy.com/llms.txt).
> Use it to discover all available pages before exploring further.

# Sitemap Editor

Plan your site's pages and sections on a visual canvas, then add, rename, and manage them before design begins.


<Callout kind="info">
**Phase 2 of 4**: Scope → You are here: **Sitemap** → Design → Export. The Sitemap Editor is where you review and refine the structure AI Website Creator generated from your brief. Changes here feed directly into the Design Editor.
</Callout>

The Sitemap Editor is a visual canvas where you plan your website's pages and sections. When you enter a prompt or complete a scope, AI Website Creator generates your Core Pages automatically. You then review the structure, add more pages, edit sections, and finalize everything before moving to design.

## Understanding the Canvas

When you land on the Sitemap canvas, you see your Core Pages displayed as page nodes. These are the pages AI Website Creator generated based on your brief (for example, Home, About, Services, Contact). Each page node lists the sections assigned to it. From here, you can add new pages, edit section details, and add or remove sections.

<div style="border: 4px solid transparent; border-radius: 16px; background: linear-gradient(135deg, #FD6A35, #FEA686) border-box; overflow: hidden; margin: 1.5rem auto; max-width: 640px;">
  <div style={{margin: '-24px 0', lineHeight: 0}}>
    <Image src="https://res.cloudinary.com/ekxmy1t9/image/upload/v1790245350/uichemy-docs/ai-website-creator/sitemap-editor/overview/main-design-v3.webp" alt="" width={1912} height={938} style={{display: 'block', width: '100%', height: 'auto', borderRadius: '8px', margin: 0}} priority={true} fetchPriority="high" />
  </div>
</div>
<p style="text-align: center; font-size: 0.875rem; color: var(--text-color-secondary, #6b7280); margin-top: 0.5rem;"><em>The Sitemap canvas: Core Pages as page nodes, with Add for extra pages</em></p>

Each page node shows a preview of its first few sections. Click **Expand** to reveal the full list, the button becomes **Collapse** so you can hide the list again.

<div style="border: 4px solid transparent; border-radius: 16px; background: linear-gradient(135deg, #FD6A35, #FEA686) border-box; overflow: hidden; margin: 1.5rem auto; max-width: 640px;">
  <div style={{margin: '-24px 0', lineHeight: 0}}>
    <Image src="https://res.cloudinary.com/ekxmy1t9/image/upload/v1790246845/uichemy-docs/ai-website-creator/sitemap-editor/overview/main-design-collapse-v3.webp" alt="" width={1909} height={935} style={{display: 'block', width: '100%', height: 'auto', borderRadius: '8px', margin: 0}} priority={true} fetchPriority="high" />
  </div>
</div>
<p style="text-align: center; font-size: 0.875rem; color: var(--text-color-secondary, #6b7280); margin-top: 0.5rem;"><em>Click Collapse to hide the expanded section list again</em></p>

A status bar at the bottom of the canvas shows **"Sitemap ready · N pages"** once your sitemap is complete, with a **Continue to design** button that takes you to the Design Editor.

## Use Cases

- **Adding pages beyond the AI-generated core set.** Blog, Legal, and Site Extras pages come pre-built, no hand-building a Privacy Policy or 404 page from scratch.
- **Restructuring the AI's page plan before committing to design.** Reorder, rename, and add or remove sections while the structure is still cheap to change.
- **Making a repeated element consistent site-wide.** Turn any section into a Global Section so editing it once updates it on every page.

## Section Categories

The section library includes 51+ section types. Here are the most common categories:

| Category | Section Types |
|---|---|
| Navigation | Navbar, Mega Menu, Header |
| Content | Hero, About Us, Services, Features, Metrics |
| Social Proof | Testimonials, Company Logos, Portfolio, Gallery |
| Conversion | CTA, Contact Form, Pricing Table |
| Information | FAQ, Blog, Team, Location |
| Structure | Footer |

## Managing Pages

### Adding Pages

AI Website Creator generates your Core Pages from the brief. If you need additional pages, click the **+ Add** button on the canvas. A popup opens with the following page categories:

<div style="border: 4px solid transparent; border-radius: 16px; background: linear-gradient(135deg, #FD6A35, #FEA686) border-box; overflow: hidden; margin: 1.5rem auto; max-width: 640px;">
  <div style={{margin: '-24px 0', lineHeight: 0}}>
    <Image src="https://res.cloudinary.com/ekxmy1t9/image/upload/v1790246034/uichemy-docs/ai-website-creator/sitemap-editor/overview/add-pages-v4.webp" alt="" width={1914} height={937} style={{display: 'block', width: '100%', height: 'auto', borderRadius: '8px', margin: 0}} />
  </div>
</div>
<p style="text-align: center; font-size: 0.875rem; color: var(--text-color-secondary, #6b7280); margin-top: 0.5rem;"><em>The Add Pages popup: Blog, Shop, Legal, Site Extras, and Dynamic Pages</em></p>

- **Blog Pages:** Blog Page, Blog Detail Page, Search Results Page, Author Page, Category Page, and Tag Featured Page
- **Legal Pages:** Privacy Policy and Cookie Policy, each generated with Header, content, and Footer sections, ready to expand
- **Site Extras:** 404, Coming Soon, and Under Maintenance pages, each a single-section page ready to expand

The same popup also lists **Shop Pages** and **Dynamic Pages**, greyed out with a "Coming Soon" tag since they aren't selectable yet.

When you select a category, AI Website Creator generates the relevant pages and adds them to your canvas as a new group, the same way Core Pages appear. A confirmation message (for example, **"Site extras added"**) appears briefly in the top-right corner once generation finishes.

You can also add a page next to an existing one directly: hover over the right edge of any page node until a small **+** button appears (tooltip: **"Add page to the right"**), then click it to insert a new empty page beside it.

### Page Actions Menu

Click the three-dot menu beside a page's name to open **Add page**, **Add section**, **Rename**, a **Move to** group (**Blog Pages**, **Shop Pages**, **Legal Pages**, **Site Extras**), and **Delete**.

- **Rename a page:** Either select **Rename** from this menu, or double-click the page name directly on the node. Type the new name and it updates instantly.
- **Move a page to another group:** Select **Move to Blog Pages**, **Move to Shop Pages**, **Move to Legal Pages**, or **Move to Site Extras** to recategorize the page, moving it out of its current group and into the target one.
- **Delete a page:** Select **Delete** from this menu. AI Website Creator removes the page and all its sections from the canvas.

<Callout kind="info">
You cannot delete the last remaining page on the canvas, **Delete** is disabled when only one page remains.
</Callout>

## Managing Sections

Sections are the building blocks inside each page. You can view their details, add new ones, or delete the ones you do not need.

### Viewing and Editing Section Details

Click any section on a page node. A side panel opens with two tabs on the left, a pencil icon and a sparkle icon:

<div style="border: 4px solid transparent; border-radius: 16px; background: linear-gradient(135deg, #FD6A35, #FEA686) border-box; overflow: hidden; margin: 1.5rem auto; max-width: 640px;">
  <div style={{margin: '-24px 0', lineHeight: 0}}>
    <Image src="https://res.cloudinary.com/ekxmy1t9/image/upload/v1790247224/uichemy-docs/ai-website-creator/sitemap-editor/overview/section-editor-v2.webp" alt="" width={1910} height={934} style={{display: 'block', width: '100%', height: 'auto', borderRadius: '8px', margin: 0}} />
  </div>
</div>
<p style="text-align: center; font-size: 0.875rem; color: var(--text-color-secondary, #6b7280); margin-top: 0.5rem;"><em>The Edit tab: section Name and Description fields</em></p>

- **Edit** (pencil icon, "Edit: styleguide, sections & fields"): shows the section's **Name** and **Description** (up to 1000 characters). You can edit the description to add notes for your own reference or for team collaboration. This does not affect the design output, it is purely for internal documentation.
- **AI Agent** (sparkle icon): marked **Coming Soon**, not yet available.

Next to the section name, click the **sparkle icon button** to turn that section into a **Global Section**, shared across every page instead of belonging to just one. Click it again, now labeled **Remove Global Section**, to turn it back into a page-specific section.

### Adding a Section

Hover between two existing sections on a page node. A **plus (+) icon** appears. Click it and a side panel opens with three tabs:

- **Sections Tab:** Browse section categories like Header, Hello Bar, Hero, About Us, Why Choose Us, Services, Features, Metrics, Gallery, and Portfolio. Each category shows how many design variants it has (for example, Hero has 46 variants), click any section to add it at that position.

<div style="border: 4px solid transparent; border-radius: 16px; background: linear-gradient(135deg, #FD6A35, #FEA686) border-box; overflow: hidden; margin: 1.5rem auto; max-width: 640px;">
  <div style={{margin: '-24px 0', lineHeight: 0}}>
    <Image src="https://res.cloudinary.com/ekxmy1t9/image/upload/v1790244362/uichemy-docs/ai-website-creator/sitemap-editor/overview/add-section.webp" alt="" width={1909} height={936} style={{display: 'block', width: '100%', height: 'auto', borderRadius: '8px', margin: 0}} />
  </div>
</div>
<p style="text-align: center; font-size: 0.875rem; color: var(--text-color-secondary, #6b7280); margin-top: 0.5rem;"><em>The Add Section panel: Sections, Global, and Saved tabs</em></p>

- **Global Tab:** View all your Global sections. These are sections shared across multiple pages (typically Navbar and Footer).

<div style="border: 4px solid transparent; border-radius: 16px; background: linear-gradient(135deg, #FD6A35, #FEA686) border-box; overflow: hidden; margin: 1.5rem auto; max-width: 640px;">
  <div style={{margin: '-24px 0', lineHeight: 0}}>
    <Image src="https://res.cloudinary.com/ekxmy1t9/image/upload/v1790248337/uichemy-docs/ai-website-creator/sitemap-editor/overview/add-global.webp" alt="" width={1913} height={936} style={{display: 'block', width: '100%', height: 'auto', borderRadius: '8px', margin: 0}} />
  </div>
</div>
<p style="text-align: center; font-size: 0.875rem; color: var(--text-color-secondary, #6b7280); margin-top: 0.5rem;"><em>The Global tab: Navbar and Footer listed as reusable Global Sections</em></p>

- **Saved Tab:** View sections you've saved for reuse. Shows "No saved sections available" until you save one.

<Callout kind="info">
This panel's sparkle icon, labeled **AI Agent**, is marked **Coming Soon**, the same as the AI Agent tab shown when editing an existing section's details.
</Callout>

### Deleting a Section

Right-click any section on a page node. A context menu appears with the option to delete it. The section is removed from that page immediately.

## Troubleshooting

<ExpandableGroup>
  <Expandable title="My sitemap isn't generating" default-open="false">
    Make sure your prompt has enough context (one short sentence minimum), refresh the dashboard, and try again. If it still doesn't generate, open the project from **Last Opened** in the sidebar or the **My Projects** tab and run generation again, or contact support from the dashboard.
  </Expandable>
</ExpandableGroup>

## Frequently Asked Questions

<ExpandableGroup>
  <Expandable title="Does changing the sitemap affect my design?" default-open="false">
    Adding or removing sections updates your design automatically. Existing design customizations on unchanged sections are preserved.
  </Expandable>

  <Expandable title="What are global sections?" default-open="false">
    Global sections are shared across all pages. Typically these are your Navbar and Footer. Editing a global section in the Design Editor updates it everywhere at once.
  </Expandable>

  <Expandable title="Can I add section types that are not in the library?" default-open="false">
    No. You can only use section types available in the library.
  </Expandable>

  <Expandable title="Can I add Shop Pages or Dynamic Pages?" default-open="false">
    Not yet. Both are listed in the Add Pages popup but marked **Coming Soon** and aren't selectable.
  </Expandable>

  <Expandable title="Is the AI Agent chat feature available in the Sitemap Editor?" default-open="false">
    Not yet. The sparkle-icon AI Agent tab is marked **Coming Soon** in both the section details panel and the Add Section panel.
  </Expandable>

  <Expandable title="Can I move a page to a different category after creating it?" default-open="false">
    Yes. Open a page's three-dot menu and select **Move to Blog Pages**, **Move to Shop Pages**, **Move to Legal Pages**, or **Move to Site Extras**.
  </Expandable>
</ExpandableGroup>

## Next Step

<Card title="Design Editor" href="/ai-website-creator/design-editor/overview" icon="palette">
  Customize the visual look of every page and section.
</Card>
