The Map View: Working with the Visual Sitemaps in Claritee

The Map View is usually the very first step when starting a project in Claritee. It gives you a high-level overview of your entire project and helps you stay organized as you move into layout and design.

Purpose of the Map View

Plan your hierarchy – Lay out every page or screen your project will include.
Visualize structure – See how different sections and subpages fit together.
Track progress – Mark pages and sections with statuses (done, in progress, not started).
Rearrange freely – Drag and reorder pages at any time as your project evolves.
Get a bird’s-eye view – Quickly assess the scope and current state of your project.

Why It Matters

The Map View ensures you always have clarity on:

What pages you’re building.
How they connect to each other.
Which parts are complete and which still need work.

It’s both your starting point for planning and your dashboard for keeping track of progress throughout the project.

Navigating and Visualizing the Map

When working in the Map View, it’s important to be able to move smoothly around your project, especially as it grows larger. Claritee gives you several tools to zoom, search, and jump between pages.

Zooming In and Out

Bottom-right controls: Use the + and – buttons to zoom.
Zoom menu: Click the current zoom level to choose a preset or select Zoom to Fit to see the entire map at once.
Keyboard & mouse:
- Mac: Hold Command and scroll with your mouse wheel.
- Windows: Hold Control and scroll with your mouse wheel.
Laptop gestures: Use pinch gestures on your trackpad to zoom in or out.

Jumping to a Page

For large projects, quickly navigate to any page by:

Clicking the page selector in the top-right corner and choosing the page (e.g., “Product 2.2”).
Claritee will zoom and highlight that page instantly.

Searching for Pages

Use the search bar to find a page by name (e.g., “Home,” “Blog,” “Resources”).
The map will automatically take you to the selected page.

Collapsing and Expanding Hierarchy

The number in the top bar shows how many levels deep your hierarchy goes.
Use Collapse All to roll everything up to just the top-level page (e.g., Homepage).
Use Expand All to see the full hierarchy again.

Panning Around the Map

Use the hand tool (click and drag) to scroll around manually.
Combine panning with zooming for quick movement across very large projects.

Bottom line: Between zoom controls, search, collapse/expand, and the jump-to-page tool, you’ll always be able to navigate even the largest projects with ease.

Adding Pages to the Map, and Organizing the Map

The Map View is where you build the full structure of your project. Claritee makes it easy to add new pages, import existing site structures, and keep things organized with labels.

Adding New Pages

When you hover over any page in the map, you’ll see + icons on the edges.

Above/Below/Side – Click a + to add a new page in that position.
Blank Page – The most common option, creates an empty page to start from scratch.
Generate with AI – Use a prompt to create several new pages at once.
Import (WWW) – Paste a URL or a sitemap XML file to generate pages automatically.

👉 Tip: For best results, use the sitemap XML instead of just a URL. This gives Claritee a clearer structure to work from.

Example: Copying an Existing Site Structure

Pretend your homepage is already in place.
Click WWW on it.
Paste in the URL of the existing site with /sitemap.xml at the end.
Claritee will automatically create the full hierarchy of pages under your homepage.

Adding Labels

A label looks like a page on the map but isn’t actually one. It’s used for organization.

Common use cases:

Landing Pages – Group all campaign or ad landing pages under a “Landing Pages” label.
Ideas – Create a space for rough concepts, sketches, or potential pages you’re not committed to yet.
Non-Navigation Content – Keep pages that don’t belong in the main site navigation but are still part of the project.

Labels make it easy to separate your core website from extra content, experiments, or side projects while keeping everything in one place.

Bottom line: Between blank pages, AI-generated pages, imported sitemaps, and labels, you can quickly build and organize the entire structure of your project inside the map.

Working with Pages and Sections in the Map View

Each page in the Map View is more than just a placeholder—it’s linked directly to its layout and contains tools for managing structure, content, progress, and collaboration.

Sections and Layout Sync

Every page contains sections, which correspond directly to the sections in Layout View.
If you rename a section in one view, it automatically updates in the other.
Sections can be rearranged by dragging and dropping them in the map—this also updates their order in the layout.

Section Controls

Hovering over a section reveals several options:

Rename – Use the pencil icon to rename the section.
Edit – Jumps you into Layout View at that section for direct editing.
Menu Options (click in blank space inside the section):
- Delete – Remove the section.
- Quick View – Preview the layout without entering Layout View.
- Add Section Below – Insert a new section directly beneath.
- Status Marker – Apply a color/status (e.g., “In Progress,” “Needs Copy”).
  - NOTE: You can rename statuses and assign them custom colors.
  - Example: mark all sections needing copy as pink, then assign to a teammate like Angela.

Comments

Add comments directly to sections for collaboration.
Comments appear in multiple places:
- Map View – Linked to the section.
- Layout View – Enable comments to see them directly on the design.
Use the left-side panel to view or add comments at the page level.

Page-Level Controls

Each page also has its own set of tools:

Regenerate Page – Use an AI prompt to completely regenerate all sections and the layout for that page.
Three-Dot Menu (top-right of page):
- Duplicate the page.
- Put the page on hold.
- Collapse/expand child elements.
- Delete sections or “Delete Children” (removes all subpages in the hierarchy).
Quick View – Preview the page layout without opening Layout View.
Page Status (top-left of page) – Mark the entire page with a status (e.g., Done, In Progress).
Collapse/Expand Toggle (bottom-left of page) – Quickly roll up or open all nested pages underneath.
Navigation Buttons (bottom of page):
- Open the Layout for that page.
- Jump directly to the Design view.
Rename Page – Click the title to edit the page name.

Additional Tools in the Map View

Beyond managing pages and sections, the Map View gives you several utilities for collaboration, exporting, and overall project management.

Undo and Redo

Use the bottom-right corner controls to undo or redo recent changes.

Account and Project Actions (Top-Right)

Account Settings – Access personal information, account details, or sign out.
AI Actions Counter – See how many AI actions you have remaining.
Invite Members – Quickly add collaborators to your project.
Share Link – Generate a public link that anyone can access without logging in.

Export Options

Export your sitemap in multiple formats:

PNG – Static image snapshot.
PDF – Printable or shareable document format.
CSV – Tabular format for spreadsheets.
TXT – Simple text outline of your project.

Preview Mode

Use Preview to present your project page by page in a clean, client-friendly format.

Notepad

Built-in Notepad lets you add project notes in plain text.
Use / commands to insert structured items.
Great for keeping reference notes or a detailed project outline alongside your sitemap.

Navigation and Conversations (Top-Left)

Navigation Panel – Quickly jump between rooms, projects, or specific pages.
Conversations – View and manage comments across all pages in your project.

Project Settings (Bottom-Left)

Onboarding Video – Replay the tutorial anytime.
Project Settings – Control project-wide options (often linked to layout settings).
Status Settings – Define and customize the statuses you use across pages and sections.
Deleted Items – Restore any deleted pages, sections, or projects from your room.
Help Center – Direct access to support resources.

Wrap-Up: Why Map View Matters

The Map View is both your starting point and your command center in Claritee:

Lay out your full project structure.
Track progress with statuses and comments.
Export and share with your team or clients.
Navigate quickly across large projects.
Keep organized notes and project details in one place.

Bottom line: Map View keeps you in control of your project from the very beginning through to final delivery.