> ## Documentation Index
> Fetch the complete documentation index at: https://archie.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Views

> Screen, Grid, Pages, and Sitemap — four ways to look at your generated screens.

Four view modes, switchable from the toolbar at the top of [Screens](/docs/features/design/screens/overview):

<CardGroup cols={2}>
  <Card title="Screen" icon="expand">
    A single screen at full size, live in an interactive preview.
  </Card>

  <Card title="Grid" icon="table-cells">
    Every screen as a thumbnail, grouped by module.
  </Card>

  <Card title="Pages" icon="bars">
    Every screen listed for quick scanning.
  </Card>

  <Card title="Sitemap" icon="sitemap">
    The full site structure as a node graph, module by module.
  </Card>
</CardGroup>

## Screen

The default view. Shows the current screen full size, in an interactive preview you can click into — see [Navigation](/docs/features/design/screens/navigation) for the device and dark-mode controls, and [Editing a screen](/docs/features/design/screens/editing) for how to change what's on it.

## Grid and Pages

Both give you an overview of every generated screen at once instead of one at a time — useful for a quick visual pass across the whole app after a design change. Grid and Pages both support:

* **Group by module** — cluster screens by the module they belong to, color-coded
* **Search** — find a screen by name
* **All modules** / **All surfaces** filters — narrow the set shown

<img src="https://mintcdn.com/archie-e998dbf6/uKV7VZ3hAIAhG9GA/features/design/screens/grid-view.png?fit=max&auto=format&n=uKV7VZ3hAIAhG9GA&q=85&s=67f2fddeaef4c1b2a3d280617ee2d5c9" alt="Grid view showing generated screens as thumbnails" width="1700" height="1000" data-path="features/design/screens/grid-view.png" />

Reach for whichever layout makes it easier to scan the specific thing you're checking — Grid's module grouping, or Pages' straight list.

## Sitemap

Shows your app's structure as a node graph: a root node fanning out to each module, and each module fanning out to its screens. Beyond your blueprint's modules, Sitemap also surfaces the **core services** Archie generates screens for automatically — things like User Management, Payment Processing, and Notifications.

<img src="https://mintcdn.com/archie-e998dbf6/uKV7VZ3hAIAhG9GA/features/design/screens/sitemap-view.png?fit=max&auto=format&n=uKV7VZ3hAIAhG9GA&q=85&s=a74bc361f450b0835beecfb3b65b6c0c" alt="Sitemap in Map mode, showing modules fanning out to their screens as a node graph" width="1700" height="1000" data-path="features/design/screens/sitemap-view.png" />

Each screen node shows:

* Its name and route
* An access badge — **Public**, **Private**, **Admin**, or **Auth**
* Generation status, when relevant (for example, **Pending** or **Needs regeneration**)
* How many jobs it took to generate

Toggle between **Map** (the node graph, with a minimap and zoom controls) and **Outline** (a flat list of the same structure). Sitemap supports the same search and module/surface filters as Grid and Pages.

### The screen drawer

Click any screen node to open a drawer with everything Archie knows about that screen. It's the closest thing to a spec sheet for a single screen:

* **Preview and route** — a thumbnail of the current screen, its route path (with a copy button), and a link to open it directly
* **Regenerate screen** — rebuilds the screen but keeps its written spec
* **Re-imagine layout** — rewrites the layout from instructions you add in the field above it, replacing the current design; only enabled once you've added instructions
* **Screen Metadata** — screen title, surface, user capability, navigation group, and navigation depth
* **Permissions** — view-only access and manage access, each showing which roles are granted

<img src="https://mintcdn.com/archie-e998dbf6/uKV7VZ3hAIAhG9GA/features/design/screens/sitemap-drawer-header.png?fit=max&auto=format&n=uKV7VZ3hAIAhG9GA&q=85&s=2cbb2db2cfa010731a75767a77e25b61" alt="Top of the screen drawer for Admin Dashboard, showing the preview, regenerate actions, and Screen Metadata" width="1700" height="1000" data-path="features/design/screens/sitemap-drawer-header.png" />

Scroll further and the drawer gets more technical:

* **Purpose** — a short paragraph on why the screen exists
* **Key Jobs** — the specific tasks the screen is built to support, each with a one-line summary and a longer description
* **Data Requirements** — every data entity the screen depends on, listed with its fields (for example, `Subscription` — `id, status, planId, createdAt, canceledAt`)
* **Layout Specification** — a detailed written description of the screen's composition — regions, hierarchy, and what each part is for

<img src="https://mintcdn.com/archie-e998dbf6/uKV7VZ3hAIAhG9GA/features/design/screens/sitemap-drawer-spec.png?fit=max&auto=format&n=uKV7VZ3hAIAhG9GA&q=85&s=e0846eacfe2a23ab6c6bed574ad0fc16" alt="Bottom of the screen drawer, showing Data Requirements per entity and the full Layout Specification" width="1700" height="1000" data-path="features/design/screens/sitemap-drawer-spec.png" />

Metadata, Permissions, and the Layout Specification each have an **Edit** link — this is where you correct or refine the spec Archie generated, not just view it.

## FAQ

<AccordionGroup>
  <Accordion title="Why does Sitemap show screens I didn't add to my blueprint?">
    Core services like User Management, Payment Processing, and Notifications generate their own screens (login, checkout, the notification inbox, and so on) automatically, alongside the modules you defined yourself.
  </Accordion>

  <Accordion title="What's the difference between Regenerate screen and Re-imagine layout?">
    Regenerate screen rebuilds the screen from its existing spec — use it after a design value or content change elsewhere. Re-imagine layout replaces the layout itself, driven by instructions you write in the drawer, for when the structure needs to change, not just the values feeding it.
  </Accordion>

  <Accordion title="Can I edit the Layout Specification directly instead of regenerating from instructions?">
    Yes. Click **Edit** next to Layout Specification to change the written spec directly, the same way you can edit Screen Metadata and Permissions.
  </Accordion>
</AccordionGroup>
